> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/BankkRoll/tweakcn-theme-picker/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<CardGroup cols={2}>
  <Card title="Cosmic Night" icon="stars">
    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

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-cosmic-night.json
    ```
  </Card>

  <Card title="Midnight Bloom" icon="flower">
    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

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-midnight-bloom.json
    ```
  </Card>

  <Card title="Graphite" icon="pen-nib">
    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

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-graphite.json
    ```
  </Card>

  <Card title="Caffeine" icon="mug-hot">
    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

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-caffeine.json
    ```
  </Card>

  <Card title="Starry Night" icon="moon-stars">
    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

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-starry-night.json
    ```
  </Card>
</CardGroup>

## Installation

Install the theme system first (if you haven't already):

```bash theme={null}
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:

```tsx theme={null}
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