Theme Generator for Next.js

Quick Start: Select your base colors for both themes and watch the code update. Copy theglobals.cssoutput, wrap your app in anext-themesprovider, and you are good to go!

Color Picker

Light Theme (:root)

#FAFAFA
#0F172A
#FFFFFF
#4F46E5
#F1F5F9
#E2E8F0
#FF6467

Dark Theme (.dark)

#020617
#F8FAFC
#0F172A
#6366F1
#1E293B
#1E293B
#FF6467

Live Preview

Preview: Light Mode

Dashboard Card

Standard card component

Active Tag
System Update 1Just now
System Update 2Just now

Preview: Dark Mode

Dashboard Card

Standard card component

Active Tag
System Update 1Just now
System Update 2Just now

Output: globals.css

@import "tailwindcss";

:root {
  --background: #fafafa;
  --foreground: #0f172a;
  --card: #ffffff;
  --primary: #4f46e5;
  --muted: #f1f5f9;
  --border: #e2e8f0;
  --destructive: #ff6467;
}

.dark {
  --background: #020617;
  --foreground: #f8fafc;
  --card: #0f172a;
  --primary: #6366f1;
  --muted: #1e293b;
  --border: #1e293b;
  --destructive: #ff6467;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-primary: var(--primary);
  --color-muted: var(--muted);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

Implementation Guide

1Install Dependency

Install next-themes to handle the dark mode switching logic in your Next.js application.

npm install next-themes

2Create ThemeProvider

"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";

export function ThemeProvider({
children,
...props
}: React.ComponentProps<typeof NextThemesProvider>) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>};

3Configure Layout

Wrap your root layout with the ThemeProvider. Ensure suppressHydrationWarning is added to the html tag to prevent hydration mismatches.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

4Update Global CSS

Paste the generated code from this tool into your globals.css. This setup uses Tailwind v4's native variable mapping.