#Styling guide

Themes control Markdown colors, typography and spacing. Container styles handle layout. Use Slot plugins to change components or interactions.

#Follow your app's theme

import { Fluxdown } from '@fluxdown/solid';

type ArticleProps = {
  text: string;

  dark: boolean;
};

export function Article(props: ArticleProps) {
  return <Fluxdown text={props.text} theme={props.dark ? 'dark' : 'light'} />;
}

The default theme is light. Pass your app's theme state to switch it reactively.

#Adjust typography and color

Start with a preset and override only the tokens you need:

import type { Theme } from '@fluxdown/solid';

import { Fluxdown } from '@fluxdown/solid';

type ArticleProps = {
  text: string;
};

const theme: Theme = [
  'light',
  {
    tokens: {
      colors: { accent: '#567153' },
      typography: { fontSans: 'Inter, sans-serif' },
      heading: { h1: { fontSize: '2rem' } },
      paragraph: { marginBottom: '1rem' },
    },
  },
];

export function Article(props: ArticleProps) {
  return <Fluxdown text={props.text} theme={theme} />;
}

Import Theme from @fluxdown/solid.

A token object on its own uses light as its base. Use ['dark', overrides] to start from the dark theme. Set colors.bg: 'transparent' to blend into the surrounding container.

#Arrange the container

Solid's class, classList and style apply to the outer element. Use them to arrange that container, and tokens for the Markdown inside it:

<Fluxdown
  text={text()}
  class="article"
  style={{ 'max-width': '72ch', 'margin-inline': 'auto' }}
/>

See configuration for syntax options such as math and footnotes.

#Style fields

All fields below live under theme.tokens and support partial overrides. Colors, dimensions, and spacing accept CSS values; line heights and font weights also accept numbers. Omitted fields inherit from the selected theme.

Import ThemeTokens from @fluxdown/solid for the full type.

#Colors

#Typography

#Headings

Replace <level> with h1, h2, h3, h4, h5, or h6 to configure each heading level independently.

#Paragraphs and code blocks

#Inline code

#Dividers

#Footnotes

#Syntax highlighting

#Radii and spacing