Theme Switcher in Next.js with TailwindCSS and Shadcn/ui

How I built a theme switcher in Next.js with TailwindCSS

I’ve always liked the idea of letting users personalize how things look. So I recently added theme switching to my personal project using TailwindCSS and Next.js. Here’s how I made it work.

The goal

Let users choose between different themes like “Caffeine” or “NeoBrutalism,” and apply their colors globally - supporting both light and dark modes.

The approach

Rather than sticking to Tailwind’s default darkMode: 'class', I needed full flexibility. I used:

• CSS variables for color tokens
• Themes object that maps each theme’s light and dark palettes
• React state to toggle themes

Defining Themes

I created a themes object where each theme has light and dark color tokens (using OKLCH for consistency and accessibility):

// theme-colors.ts
export const themes = {
    Caffeine: {
        light: {
            background: "oklch(0.98 0 0)",
            foreground: "oklch(0.24 0 0)",
            // ...
        },
        dark: {
            background: "oklch(0.18 0 0)",
            foreground: "oklch(0.95 0 0)",
            // ...
        },
    },
    // more themes...
};

I also defined a type for the theme names:

// theme-types.ts
export type ThemeColors = "Perpetuity" | "VintagePaper" | "Notebook" | "NeoBrutalism" | "KodamaGrove" | "Doom64" | "Cyberpunk" | "Caffeine";

Setting Up React State

I used context + state to store and update the selected theme:

const [themeColor, setThemeColor] = useState<ThemeColors>("Caffeine");

Applying Theme Styles

When the theme changes, I inject its CSS variables into :root using document.documentElement.style.setProperty(...). Here’s a simple utility:

function applyTheme(theme: Record<string, string>) {
    Object.entries(theme).forEach(([key, value]) => {
        document.documentElement.style.setProperty(`--${key}`, value);
    });
}

This runs whenever themeColor or dark mode changes.

theme/theme-colors.json

This file contains the raw color tokens for each theme and mode (light/dark):

{
  "slate": {
    "light": {
      "color-text": "#0f172a",
      "color-bg": "#f1f5f9",
      "color-muted": "#64748b"
    },
    "dark": {
      "color-text": "#f1f5f9",
      "color-bg": "#0f172a",
      "color-muted": "#94a3b8"
    }
  },
  "amber": {
    "light": {
      "color-text": "#78350f",
      "color-bg": "#fef3c7",
      "color-muted": "#d97706"
    },
    "dark": {
      "color-text": "#fef3c7",
      "color-bg": "#78350f",
      "color-muted": "#fbbf24"
    }
  },
  "emerald": {
    "light": {
      "color-text": "#064e3b",
      "color-bg": "#d1fae5",
      "color-muted": "#10b981"
    },
    "dark": {
      "color-text": "#d1fae5",
      "color-bg": "#064e3b",
      "color-muted": "#34d399"
    }
  }
}

theme/theme-data-provider.tsx

This loads and applies the correct color variables to :root.

"use client";

import { useEffect } from "react";
import themes from "./theme-colors.json";
import { useThemeColor } from "./use-theme-color";

export function ThemeDataProvider() {
    const { themeColor } = useThemeColor();

    useEffect(() => {
        const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
        const mode = isDark ? "dark" : "light";
        const theme = themes[themeColor][mode];

        for (const [key, value] of Object.entries(theme)) {
            document.documentElement.style.setProperty(`--${key}`, value);
        }
    }, [themeColor]);

    return null;
}

components/theme-toggle.tsx

A simple theme switcher using a select dropdown:

"use client";

import { useThemeColor } from "@/theme/use-theme-color";
import { themes } from "@/theme/theme-list"; // An array like: ["slate", "amber", "emerald"]

export function ThemeToggle() {
    const { themeColor, setThemeColor } = useThemeColor();

    return (
        <select className="rounded border px-2 py-1" value={themeColor} onChange={(e) => setThemeColor(e.target.value)}>
            {themes.map((t) => (
                <option key={t} value={t}>
                    {t.charAt(0).toUpperCase() + t.slice(1)}
                </option>
            ))}
        </select>
    );
}

Tailwind classes like text-[color:var(--color-text)] and `bg-[color:var(–color-bg)] will now respond to the selected theme.

Wrap-Up

Theme switching can be aesthetic, accessible, and fun - without overengineering. Hope this gave you some ideas to try it yourself. If you’d like to see how the code looks like you can view the source code on GitHub.