Theming

Your pages look like your website. The CSS is added by <FloconPage />. Nothing to import.

Default look

  • Your website uses shadcn? The page uses your colors, radius, font and dark mode. Nothing to do.
  • No shadcn? The page uses the Flocon colors. It turns dark only if your website has a dark mode: color-scheme: dark (or light dark with a dark browser) on your page, or a .dark class (Tailwind).

The variables

Override any of these on .flocon-page:

  • --flocon-primary
  • --flocon-background
  • --flocon-foreground
  • --flocon-card
  • --flocon-muted
  • --flocon-muted-foreground
  • --flocon-border
  • --flocon-radius
  • --flocon-font
.flocon-page {
--flocon-primary: #e11d48;
--flocon-radius: 4px;
}

Override the CSS

All the default CSS is in @layer flocon. Any CSS of yours that is not in a layer wins over it. So you can restyle an element by its class name:

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

Old shadcn (Tailwind v3) is not supported yet. Its colors are HSL numbers like 222 47% 11%. Set the --flocon-* variables yourself.

Updated