Themes

A theme item has only CSS variables, but any item can bring its own (a table with its colors, for example). slabui add writes them to your global CSS.

Where the variables go

The CSS variables of an item come in three groups:

Every light or dark value that is a color (oklch, hsl, rgb, #…) also gets --color-<name>: var(--<name>) in @theme inline, so Tailwind classes like bg-<name> work right away.

In the user's project

After npx slabui add theme-default, the css file from slabui.json contains:

Copy@import "tailwindcss";
 
@custom-variant dark (&:is(.dark *));
 
@theme inline {
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-lg: var(--radius);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}
 
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --radius: 0.65rem;
}
 
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
}

The rest of the file is kept. Existing :root, .dark and @theme inline blocks are reused; missing ones are created at the end.

Updates

update merges the variables one by one, comparing with the installed version:

Edit the theme live

To change the theme in your running app and see every change right away, use the theme editor.