Theming

bext/ui themes with CSS variables. Components reference semantic tokens (bg-primary, text-muted-foreground) that resolve to HSL custom properties — so a single class is correct in both light and dark.

CSS variables

1
2
3
4
5
6
7
8
9
10
11:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --border: 240 5.9% 90%;
  --ring: 240 10% 3.9%;
  --radius: 0.5rem;
}

Values are space-separated HSL channels, consumed as hsl(var(--primary)). This makes opacity modifiers like bg-primary/90 work.

Dark mode

Override the same variables under a .dark selector. See Dark Mode for the toggle.

1
2
3
4
5
6.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
}

Adding colors

Add a new token by defining it in both :root and .dark, then a matching utility class. Browse the full color reference.