Theming

Flux UI reads semantic CSS variables. Tailwind utilities are wired through @theme inline so you theme once and every primitive updates.

CSS variables

Define :root for light and .dark for dark. Components use bg-card, text-primary, etc., which resolve to var(--card), var(--primary).

Mapping to Tailwind

Example bridge (trim or extend to match your app):

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-border: var(--border);
  /* …map remaining tokens */
}

Dark theme

Add className="dark" on html (e.g. next-themes with attribute="class"). Use the @custom-variant dark pattern from the installation guide so dark: utilities follow your toggle, not only prefers-color-scheme.