Skip to content
Drivn

Theming

Add dark/light theme support to your project. Theming is optional — Drivn works with light theme by default.

Installation

Run the add command to enable dark/light theme switching.

npx drivn add theme
  • Appends dark/light theme tokens to your globals file
  • Creates theme-provider.tsx component
  • Installs next-themes

Setup

After installing, wrap your app with the ThemeProvider.

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

Built for Tailwind v4

Drivn uses Tailwind v4's @theme inline to map CSS custom properties to utility classes. No tailwind.config.ts needed.

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
18  /* Semantic */
19  --color-destructive: var(--destructive);
20  --color-destructive-foreground: var(--destructive-foreground);
21  --color-success: var(--success);
22
23  /* Borders & Inputs */
24  --color-border: var(--border);
25  --color-input: var(--input);
26
27  /* Special Surfaces */
28  --color-nav: var(--nav);
29  --color-code: var(--code);
30  --color-code-highlight: var(--code-highlight);
31  --color-overlay: var(--overlay);
32
33  /* Terminal (always dark-on-dark) */
34  --color-terminal: var(--terminal);
35  --color-terminal-foreground: var(--terminal-foreground);
36  --color-terminal-muted: var(--terminal-muted);
37  --color-terminal-border: var(--terminal-border);
38
39  /* Syntax Highlighting */
40  --color-syntax-keyword: var(--syntax-keyword);
41  --color-syntax-string: var(--syntax-string);
42  --color-syntax-function: var(--syntax-function);
43  --color-syntax-component: var(--syntax-component);
44  --color-syntax-prop: var(--syntax-prop);
45  --color-syntax-operator: var(--syntax-operator);
46  --color-syntax-punctuation: var(--syntax-punctuation);
47}

Color Palette

All available design tokens. Swatches reflect the current theme — toggle dark/light to see both sets.

Surfaces

background

bg-background

card

bg-card

muted

bg-muted

accent

bg-accent

Brand

primary

bg-primary

primary-light

bg-primary-light

secondary

bg-secondary

Semantic

success

bg-success

destructive

bg-destructive

Borders & Inputs

border

bg-border

input

bg-input

Special Surfaces

nav

bg-nav

code

bg-code

code-highlight

bg-code-highlight

overlay

bg-overlay

Dark Theme

The dark theme is applied via :root and data-theme attribute.

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 */
14  --primary: hsl(239 84% 67%);
15  --primary-light: hsl(239 84% 74%);
16  --primary-foreground: hsl(0 0% 100%);
17  --secondary: hsl(189 94% 53%);
18
19  /* Semantic */
20  --success: hsl(142 71% 59%);
21  --destructive: hsl(0 84% 60%);
22  --destructive-foreground: hsl(0 0% 100%);
23
24  /* Borders & Inputs */
25  --border: hsl(240 4% 16%);
26  --input: hsl(240 4% 16%);
27
28  /* Special Surfaces */
29  --nav: hsl(240 6% 4% / 0.8);
30  --code: hsl(240 6% 10%);
31  --code-highlight: hsl(0 0% 100% / 0.06);
32  --overlay: hsl(0 0% 0% / 0.5);
33
34  /* Terminal (always dark) */
35  --terminal: hsl(240 23% 15%);
36  --terminal-foreground: hsl(0 0% 98%);
37  --terminal-muted: hsl(240 5% 46%);
38  --terminal-border: hsl(0 0% 100% / 0.08);
39
40  /* Syntax Highlighting (dark) */
41  --syntax-keyword: hsl(286 60% 67%);
42  --syntax-string: hsl(95 38% 62%);
43  --syntax-function: hsl(207 82% 66%);
44  --syntax-component: hsl(207 82% 66%);
45  --syntax-prop: hsl(39 67% 69%);
46  --syntax-operator: hsl(187 47% 55%);
47  --syntax-punctuation: hsl(220 9% 73%);
48}

Light Theme

Light theme overrides the same custom properties via data-theme selector.

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 */
13  --primary: hsl(239 80% 66%);
14  --primary-light: hsl(239 70% 58%);
15  --primary-foreground: hsl(0 0% 100%);
16  --secondary: hsl(189 85% 48%);
17
18  /* Semantic */
19  --success: hsl(142 76% 36%);
20  --destructive: hsl(0 72% 51%);
21  --destructive-foreground: hsl(0 0% 100%);
22
23  /* Borders & Inputs */
24  --border: hsl(214 32% 91%);
25  --input: hsl(214 32% 91%);
26
27  /* Special Surfaces */
28  --nav: hsl(0 0% 100% / 0.8);
29  --code: hsl(0 0% 100%);
30  --code-highlight: hsl(0 0% 0% / 0.05);
31  --overlay: hsl(0 0% 0% / 0.18);
32
33  /* Terminal (stays dark in light theme) */
34  --terminal: hsl(240 23% 15%);
35  --terminal-foreground: hsl(0 0% 98%);
36  --terminal-muted: hsl(240 5% 46%);
37  --terminal-border: hsl(0 0% 100% / 0.1);
38
39  /* Syntax Highlighting (light — darker, more saturated for contrast) */
40  --syntax-keyword: hsl(286 72% 40%);
41  --syntax-string: hsl(120 50% 30%);
42  --syntax-function: hsl(210 90% 40%);
43  --syntax-component: hsl(210 90% 40%);
44  --syntax-prop: hsl(30 80% 38%);
45  --syntax-operator: hsl(187 70% 32%);
46  --syntax-punctuation: hsl(220 15% 40%);
47}

Usage in Components

Reference tokens through Tailwind utility classes.

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>

Adding New Colors

Add a custom token in four steps: :root, light theme, @theme inline, then use it.

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>