Skip to main content
Dark themes are specifically designed for low-light environments, providing excellent readability while reducing eye strain during extended use.

​
Available Themes

Cosmic Night

Deep space purple with cosmic vibesColors
  • Light: oklch(0.54 0.18 288.03) - Deep purple
  • Dark: oklch(0.72 0.16 290.40) - Bright purple
Font: Inter, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-cosmic-night.json

Midnight Bloom

Rich purple perfect for nighttime useColors
  • Light: oklch(0.57 0.20 283.08) - Royal purple
  • Dark: oklch(0.57 0.20 283.08) - Royal purple
Font: Montserrat, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-midnight-bloom.json

Graphite

Professional neutral gray, easy on the eyesColors
  • Light: oklch(0.49 0 0) - Dark gray
  • Dark: oklch(0.71 0 0) - Light gray
Font: Inter, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-graphite.json

Caffeine

Warm brown tones for comfortable late-night codingColors
  • Light: oklch(0.43 0.04 41.99) - Deep brown
  • Dark: oklch(0.92 0.05 66.17) - Cream
Font: system-ui, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-caffeine.json

Starry Night

Deep blue inspired by Van Gogh’s masterpieceColors
  • Light: oklch(0.48 0.12 263.38) - Night blue
  • Dark: oklch(0.48 0.12 263.38) - Night blue
Font: Libre Baskerville, serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-starry-night.json

​
Installation

Install the theme system first (if you haven’t already): 
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/nextjs/theme-system.json
Then add any dark theme from above using its installation command.

​
Usage

Switch to a dark theme programmatically: 
import { useTheme } from "next-themes";

export function ThemeExample() {
  const { setTheme } = useTheme();
  
  return (
    <div>
      <button onClick={() => setTheme("cosmic-night-dark")}>
        Cosmic Night Dark
      </button>
      <button onClick={() => setTheme("graphite-dark")}>
        Graphite Dark
      </button>
      <button onClick={() => setTheme("starry-night-dark")}>
        Starry Night Dark
      </button>
    </div>
  );
}

​
Dark Mode Best Practices

When using dark themes:
  • Contrast: Ensure sufficient contrast between text and background
  • Color Temperature: Warmer tones (like Caffeine) are easier on eyes at night
  • Brightness: Consider your environment’s ambient lighting
  • Transitions: Use disableTransitionOnChange to prevent flash when switching
  • Cosmic Night: Creative applications, design tools
  • Midnight Bloom: Content apps, reading interfaces
  • Graphite: Professional tools, code editors
  • Caffeine: Late-night work, extended sessions
  • Starry Night: Artistic apps, portfolios

Build docs developers (and LLMs) love

Get started for freeTalk to us