Theming

Change the look with CSS variables. <FloconPage /> has default CSS inside. Nothing to import.

The CSS is plain CSS in @layer flocon, scoped under .flocon-page. It does not need Tailwind.

The variables

Override any of these on .flocon-page:

• --flocon-primary: links.
• --flocon-background
• --flocon-foreground: text color.
• --flocon-card: FAQ items.
• --flocon-muted: code and table headers.
• --flocon-muted-foreground: description and secondary text.
• --flocon-border
• --flocon-radius
• --flocon-font

.flocon-page {
--flocon-primary: #e11d48;
--flocon-radius: 4px;
}

Style the class names

Any CSS of yours that is not in a layer wins over the default CSS. So you can restyle an element with the class names, like flocon-page, flocon-faq or flocon-table:

.flocon-page h1 {
font-size: 3rem;
}

Dark mode

Nothing to do. Text, muted and border colors follow your text color (currentColor). Light and dark mode work with no setup.

Updated November 3, 2026