Theming

1
// app/layout.tsx
2
import { ThemeProvider } from "@/components/ui/theme-provider"
3
4
export default function Layout({ children }) {
5
  return (
6
    <html suppressHydrationWarning>
7
      <body>
8
        <ThemeProvider>
9
          {children}
10
        </ThemeProvider>
11
      </body>
12
    </html>
13
  )
14
}

1
@theme inline {
2
  /* Surfaces */
3
  --color-background: var(--background);
4
  --color-foreground: var(--foreground);
5
  --color-card: var(--card);
6
  --color-card-foreground: var(--card-foreground);
7
  --color-muted: var(--muted);
8
  --color-muted-foreground: var(--muted-foreground);
9
  --color-accent: var(--accent);
10
  --color-accent-foreground: var(--accent-foreground);
11
12
  /* Brand */
13
  --color-primary: var(--primary);
14
  --color-primary-light: var(--primary-light);
15
  --color-primary-foreground: var(--primary-foreground);
16
  --color-secondary: var(--secondary);
17
  --color-secondary-foreground: var(--secondary-foreground);
18
19
  /* Semantic */
20
  --color-destructive: var(--destructive);
21
  --color-destructive-foreground: var(--destructive-foreground);
22
  --color-success: var(--success);
23
  --color-success-foreground: var(--success-foreground);
24
  --color-info: var(--info);
25
  --color-info-foreground: var(--info-foreground);
26
  --color-brand: var(--brand);
27
  --color-brand-light: var(--brand-light);
28
  --color-brand-foreground: var(--brand-foreground);
29
30
  /* Charts */
31
  --color-chart-1: var(--chart-1);
32
  --color-chart-2: var(--chart-2);
33
  --color-chart-3: var(--chart-3);
34
  --color-chart-4: var(--chart-4);
35
  --color-chart-5: var(--chart-5);
36
37
  /* Borders & Inputs */
38
  --color-border: var(--border);
39
  --color-input: var(--input);
40
  --color-ring: var(--ring);
41
42
  /* Special Surfaces */
43
  --color-nav: var(--nav);
44
  --color-code: var(--code);
45
  --color-code-highlight: var(--code-highlight);
46
  --color-overlay: var(--overlay);
47
48
  /* Terminal (always dark-on-dark) */
49
  --color-terminal: var(--terminal);
50
  --color-terminal-foreground: var(--terminal-foreground);
51
  --color-terminal-muted: var(--terminal-muted);
52
  --color-terminal-border: var(--terminal-border);
53
54
  /* Syntax Highlighting */
55
  --color-syntax-keyword: var(--syntax-keyword);
56
  --color-syntax-string: var(--syntax-string);
57
  --color-syntax-function: var(--syntax-function);
58
  --color-syntax-component: var(--syntax-component);
59
  --color-syntax-prop: var(--syntax-prop);
60
  --color-syntax-operator: var(--syntax-operator);
61
  --color-syntax-punctuation: var(--syntax-punctuation);
62
}

1
:root,
2
[data-theme="dark"] {
3
  /* Surfaces */
4
  --background: hsl(240 6% 4%);
5
  --foreground: hsl(0 0% 98%);
6
  --card: hsl(240 5% 7%);
7
  --card-foreground: hsl(0 0% 98%);
8
  --muted: hsl(240 4% 16%);
9
  --muted-foreground: hsl(220 17% 83%);
10
  --accent: hsl(240 4% 10%);
11
  --accent-foreground: hsl(0 0% 98%);
12
13
  /* Brand (monochrome — near-white on dark surfaces) */
14
  --primary: hsl(0 0% 98%);
15
  --primary-light: hsl(0 0% 85%);
16
  --primary-foreground: hsl(240 6% 10%);
17
  --secondary: hsl(189 94% 53%);
18
  --secondary-foreground: hsl(240 6% 4%);
19
20
  /* Semantic */
21
  --success: hsl(142 71% 59%);
22
  --success-foreground: hsl(240 6% 4%);
23
  --info: hsl(217 91% 60%);
24
  --info-foreground: hsl(0 0% 100%);
25
  --destructive: hsl(0 84% 60%);
26
  --destructive-foreground: hsl(0 0% 100%);
27
28
  /* Charts (monochrome tints) */
29
  --chart-1: hsl(0 0% 98%);
30
  --chart-2: hsl(0 0% 82%);
31
  --chart-3: hsl(0 0% 66%);
32
  --chart-4: hsl(0 0% 50%);
33
  --chart-5: hsl(0 0% 35%);
34
35
  /* Brand accent — DESIGN/marketing surfaces only, never shipped in components */
36
  --brand: hsl(239 84% 67%);
37
  --brand-light: hsl(239 84% 74%);
38
  --brand-foreground: hsl(0 0% 100%);
39
40
  /* Borders & Inputs */
41
  --border: hsl(240 4% 16%);
42
  --input: hsl(240 4% 16%);
43
  --ring: hsl(0 0% 56%);
44
45
  /* Special Surfaces */
46
  --nav: hsl(240 6% 4% / 0.8);
47
  --code: hsl(240 6% 10%);
48
  --code-highlight: hsl(0 0% 100% / 0.06);
49
  --overlay: hsl(0 0% 0% / 0.5);
50
51
  /* Terminal (always dark) */
52
  --terminal: hsl(240 23% 15%);
53
  --terminal-foreground: hsl(0 0% 98%);
54
  --terminal-muted: hsl(240 5% 46%);
55
  --terminal-border: hsl(0 0% 100% / 0.08);
56
57
  /* Syntax Highlighting (dark) */
58
  --syntax-keyword: hsl(286 60% 67%);
59
  --syntax-string: hsl(95 38% 62%);
60
  --syntax-function: hsl(207 82% 66%);
61
  --syntax-component: hsl(207 82% 66%);
62
  --syntax-prop: hsl(39 67% 69%);
63
  --syntax-operator: hsl(187 47% 55%);
64
  --syntax-punctuation: hsl(220 9% 73%);
65
}

1
[data-theme="light"] {
2
  /* Surfaces */
3
  --background: hsl(0 0% 100%);
4
  --foreground: hsl(224 16% 14%);
5
  --card: hsl(0 0% 100%);
6
  --card-foreground: hsl(222 16% 14%);
7
  --muted: hsl(0 0% 95.3%);
8
  --muted-foreground: hsl(220 17% 17%);
9
  --accent: hsl(240 5% 96.5%);
10
  --accent-foreground: hsl(222 16% 14%);
11
12
  /* Brand (monochrome — near-black on light surfaces) */
13
  --primary: hsl(240 6% 10%);
14
  --primary-light: hsl(240 5% 26%);
15
  --primary-foreground: hsl(0 0% 98%);
16
  --secondary: hsl(189 85% 48%);
17
  --secondary-foreground: hsl(224 16% 14%);
18
19
  /* Semantic */
20
  --success: hsl(142 76% 36%);
21
  --success-foreground: hsl(0 0% 100%);
22
  --info: hsl(217 91% 45%);
23
  --info-foreground: hsl(0 0% 100%);
24
  --destructive: hsl(0 72% 51%);
25
  --destructive-foreground: hsl(0 0% 100%);
26
27
  /* Charts (monochrome tints) */
28
  --chart-1: hsl(240 6% 10%);
29
  --chart-2: hsl(240 5% 24%);
30
  --chart-3: hsl(240 5% 38%);
31
  --chart-4: hsl(240 4% 52%);
32
  --chart-5: hsl(240 4% 65%);
33
34
  /* Brand accent — DESIGN/marketing surfaces only, never shipped in components */
35
  --brand: hsl(239 80% 66%);
36
  --brand-light: hsl(239 70% 58%);
37
  --brand-foreground: hsl(0 0% 100%);
38
39
  /* Borders & Inputs */
40
  --border: hsl(214 32% 91%);
41
  --input: hsl(214 32% 91%);
42
  --ring: hsl(0 0% 64%);
43
44
  /* Special Surfaces */
45
  --nav: hsl(0 0% 100% / 0.8);
46
  --code: hsl(0 0% 100%);
47
  --code-highlight: hsl(0 0% 0% / 0.05);
48
  --overlay: hsl(0 0% 0% / 0.18);
49
50
  /* Terminal (stays dark in light theme) */
51
  --terminal: hsl(240 23% 15%);
52
  --terminal-foreground: hsl(0 0% 98%);
53
  --terminal-muted: hsl(240 5% 46%);
54
  --terminal-border: hsl(0 0% 100% / 0.1);
55
56
  /* Syntax Highlighting (light — darker, more saturated for contrast) */
57
  --syntax-keyword: hsl(286 72% 40%);
58
  --syntax-string: hsl(120 50% 30%);
59
  --syntax-function: hsl(210 90% 40%);
60
  --syntax-component: hsl(210 90% 40%);
61
  --syntax-prop: hsl(30 80% 38%);
62
  --syntax-operator: hsl(187 70% 32%);
63
  --syntax-punctuation: hsl(220 15% 40%);
64
}

1
<div className="bg-background text-foreground">
2
  <p className="text-muted-foreground">Muted text</p>
3
  <div className="bg-primary/10 text-primary">
4
    Primary with opacity
5
  </div>
6
  <div className="border border-border rounded-lg">
7
    Bordered container
8
  </div>
9
</div>

1
/* 1. Add to :root */
2
:root,
3
[data-theme="dark"] {
4
  --warning: hsl(38 92% 50%);
5
}
6
7
/* 2. Add to light theme */
8
[data-theme="light"] {
9
  --warning: hsl(38 92% 50%);
10
}
11
12
/* 3. Add to @theme inline */
13
@theme inline {
14
  --color-warning: var(--warning);
15
}
16
17
/* 4. Use in components */
18
<div className="bg-warning text-white">Warning</div>