Dark Themes

Sophisticated dark-first themes optimized for low-light environments

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 vibes

Colors

• 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 use

Colors

• 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 eyes

Colors

• 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 coding

Colors

• 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 masterpiece

Colors

• 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

Recommended Use Cases

• 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