Theming

flootlets’ colours and radius are shadcn/ui theme variables (--primary, --muted-foreground, --radius…), plus --success and --warning. Change a handful of them and everything follows. See Theme variables for the full list.

With Tailwind

Import the theme after Tailwind. It maps every variable into Tailwind, so bg-primary or text-muted-foreground in your own markup follow the theme too:

@import 'tailwindcss';
@import 'flootlets/theme.css';

Override variables

Put overrides in your own CSS. Order doesn’t matter: flootlets’ variables live in Tailwind’s base layer, and styles outside a layer always win.

:root {
  --primary: #0064ff; /* buttons, links, sale prices, focus */
  --primary-foreground: #ffffff;
  --ring: #0064ff;
  --radius: 0.375rem; /* squarer corners */
}
.dark {
  --primary: #6fa8ff;
  --primary-foreground: #050706;
}

--primary is used both as a fill (with --primary-foreground on it) and as text on the page, so it needs at least 4.5:1 contrast against both. The same goes for --destructive, --success and --warning. Focus rings (--ring) and input borders (--input) need 3:1.

Use a shadcn or tweakcn theme

Any theme from shadcn/ui or tweakcn works: paste its :root and .dark blocks into your CSS. If it has no --success and --warning, add them. Then check it, from a clone of the flootlets repo:

bun run check:theme path/to/my-theme.css

It reads hex, rgb(), hsl(), oklch() and shadcn v3’s bare H S% L% values, composites translucent colours over the background, and reports every pair below WCAG AA in light and dark.

Light and dark

By default flootlets follows the visitor’s system setting (prefers-color-scheme). To force a theme, put class="dark" or class="light" (shadcn’s and next-themes’ convention), or data-theme="dark" / data-theme="light", on <html> or on any element to theme just that part of the page:

<html class="dark">
  …
  <section class="light">A light panel on a dark page.</section>
</html>

This site’s theme picker sets data-theme on <html>, and the examples follow.

Tailwind’s dark: variant follows the same rules: .dark, data-theme="dark", or the system setting when neither theme is forced.

A pasted shadcn theme only switches with the .dark class. To keep following the system setting, repeat its dark block for it:

@media (prefers-color-scheme: dark) {
  :root:not(.light, [data-theme='light']) {
    /* the same variables as .dark */
  }
}

Restyle one component

Pass Tailwind classes in class. They’re merged last with tailwind-merge, so they replace the component’s own classes rather than fighting them:

<Button class="h-12 rounded-full uppercase">Checkout</Button>

Every component also exports its class recipe (buttonVariants, badgeVariants…), made with class-variance-authority as in shadcn/ui, for styling other elements the same way:

<a class={buttonVariants({ variant: 'outline' })} href="/cart">
  View cart
</a>

To restyle every instance from CSS, target the data-slot attribute each part carries, plus its state attributes (data-variant, data-size, data-loading):

[data-slot='button'][data-variant='default'] {
  text-transform: uppercase;
}