#Styling

Use class and style for outer layout, and theme for colors and typography inside the content.

#Page layout

style accepts a CSS string. Pass an existing application class through class:

<Fluxdown
  class="conversation-message"
  style="padding: 16px; max-width: 720px"
  {text}
/>

Svelte scopes component styles by default. Use a global selector when styling the component's outer element through this class:

<style>
  :global(.conversation-message) {
    margin: 0 auto;
  }
</style>

#Light and dark

Choose a preset with theme="light" or theme="dark". Connect it to your application's theme state:

<Fluxdown theme={isDark ? 'dark' : 'light'} {text} />

#Override the theme

A theme accepts a preset name, partial overrides, or a [preset, overrides] tuple:

<Fluxdown
  theme={[
    'dark',
    {
      tokens: {
        colors: { accent: '#82d8cf' },
        typography: { fontSize: { md: '16px' } },
        paragraph: { marginBottom: '16px' },
      },
    },
  ]}
  {text}
/>

Import Theme, ThemeTokens and PartialThemeConfig from @fluxdown/svelte.

Each group accepts partial overrides. Use slot plugins to replace code toolbars, links or image components.