#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

<script setup lang="ts">
import { Fluxdown } from '@fluxdown/vue';

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

const props = defineProps<ArticleProps>();
</script>

<template>
  <Fluxdown :text="props.text" :theme="props.dark ? 'dark' : 'light'" />
</template>

The default theme is light; it does not follow the system automatically. Pass your app's existing theme state.

#Adjust typography and color

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

<script setup lang="ts">
import type { Theme } from '@fluxdown/vue';

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

type ArticleProps = {
  text: string;
};

const props = defineProps<ArticleProps>();

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

<template>
  <Fluxdown :text="props.text" :theme="theme" />
</template>

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

Vue's class and style apply to the outer element. Scoped styles can arrange that container; use tokens for internal presentation:

<template>
  <Fluxdown class="article" :text="text" />
</template>

<style scoped>
.article {
  max-width: 72ch;
  margin-inline: auto;
}
</style>

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/vue 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