Skip to content
Drivn logoDrivn

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.

1npx 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  --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
25  /* Borders & Inputs */
26  --color-border: var(--border);
27  --color-input: var(--input);
28
29  /* Special Surfaces */
30  --color-overlay: var(--overlay);
31}

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  --secondary-foreground: hsl(0 0% 100%);
19
20  /* Semantic */
21  --success: hsl(142 71% 59%);
22  --success-foreground: hsl(0 0% 100%);
23  --destructive: hsl(0 84% 60%);
24  --destructive-foreground: hsl(0 0% 100%);
25
26  /* Borders & Inputs */
27  --border: hsl(240 4% 16%);
28  --input: hsl(240 4% 16%);
29
30  /* Special Surfaces */
31  --overlay: hsl(0 0% 0% / 0.5);
32}

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(222 47% 11%);
5  --card: hsl(0 0% 100%);
6  --card-foreground: hsl(222 47% 11%);
7  --muted: hsl(212 30% 93.5%);
8  --muted-foreground: hsl(220 17% 17%);
9  --accent: hsl(210 40% 96%);
10  --accent-foreground: hsl(222 47% 11%);
11
12  /* Brand */
13  --primary: hsl(239 84% 67%);
14  --primary-light: hsl(239 84% 74%);
15  --primary-foreground: hsl(0 0% 100%);
16  --secondary: hsl(189 90% 36%);
17  --secondary-foreground: hsl(0 0% 100%);
18
19  /* Semantic */
20  --success: hsl(142 76% 36%);
21  --success-foreground: hsl(0 0% 100%);
22  --destructive: hsl(0 72% 51%);
23  --destructive-foreground: hsl(0 0% 100%);
24
25  /* Borders & Inputs */
26  --border: hsl(214 32% 91%);
27  --input: hsl(214 32% 91%);
28
29  /* Special Surfaces */
30  --overlay: hsl(0 0% 0% / 0.18);
31}

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>