#Styling guide

Use a theme to match your app's colors, typography, and spacing, then use container styles for layout. For components and interactions, use slot plugins.

#Follow your app's theme

import { Fluxdown } from 'fluxdown';

type ArticleProps = {
  text: string;
  dark: boolean;
};

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

The default theme is light. Fluxdown does not automatically follow the system theme; pass in your app's existing theme state.

#Adjust typography and color

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

<Fluxdown
  text={text}
  theme={[
    'light',
    {
      tokens: {
        colors: { accent: '#567153' },
        typography: { fontSans: 'Inter, sans-serif' },
        heading: { h1: { fontSize: '2rem' } },
        paragraph: { marginBottom: '1rem' },
      },
    },
  ]}
/>

Tokens cover colors, typography, headings, paragraph spacing, code highlighting, corner radii, and spacing. Passing a token object directly extends light; use ['dark', overrides] to extend the dark preset.

Use className or style for the container's size and layout:

<Fluxdown
  style={{
    maxWidth: '72ch',
    marginInline: 'auto',
  }}
  text={text}
/>

See Configuration for all theme options. Formulas, footnotes, and other Markdown syntax switches are covered under build.

#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 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