> ## 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.

# Colorful Themes

> Vibrant themes with rich color palettes and visual impact

Colorful themes bring energy and personality to your application with vibrant hues and distinctive color combinations.

## Available Themes

<CardGroup cols={2}>
  <Card title="Catppuccin" icon="cat">
    Popular pastel theme with soothing purple tones

    **Colors**

    * Light: `oklch(0.55 0.25 297.02)` - Rich purple
    * Dark: `oklch(0.79 0.12 304.77)` - Soft lavender

    **Font**: Montserrat, sans-serif

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

  <Card title="Bubblegum" icon="candy-cane">
    Sweet pink theme with playful energy

    **Colors**

    * Light: `oklch(0.62 0.18 348.14)` - Bubblegum pink
    * Dark: `oklch(0.92 0.08 87.67)` - Soft yellow

    **Font**: Poppins, sans-serif

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

  <Card title="Nature" icon="leaf">
    Fresh green inspired by the natural world

    **Colors**

    * Light: `oklch(0.52 0.13 144.17)` - Forest green
    * Dark: `oklch(0.67 0.16 144.21)` - Bright green

    **Font**: Montserrat, sans-serif

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

  <Card title="Ocean Breeze" icon="water">
    Refreshing aqua tones reminiscent of tropical waters

    **Colors**

    * Light: `oklch(0.72 0.19 149.58)` - Bright aqua
    * Dark: `oklch(0.77 0.15 163.22)` - Cyan

    **Font**: DM Sans, sans-serif

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

  <Card title="Sunset Horizon" icon="sunset">
    Warm peachy-orange sunset colors

    **Colors**

    * Light: `oklch(0.74 0.16 34.71)` - Peachy orange
    * Dark: `oklch(0.74 0.16 34.71)` - Peachy orange

    **Font**: Montserrat, sans-serif

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

  <Card title="Pastel Dreams" icon="cloud">
    Soft purple pastels for a dreamy aesthetic

    **Colors**

    * Light: `oklch(0.71 0.16 293.54)` - Pastel purple
    * Dark: `oklch(0.79 0.12 295.75)` - Light lavender

    **Font**: Open Sans, sans-serif

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

  <Card title="Perpetuity" icon="infinity">
    Cool blue-gray with cyan accents

    **Colors**

    * Light: `oklch(0.56 0.09 203.28)` - Deep blue-gray
    * Dark: `oklch(0.85 0.13 195.04)` - Bright cyan

    **Font**: Courier New, monospace

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

  <Card title="Tangerine" icon="citrus">
    Vibrant orange citrus theme

    **Colors**

    * Light: `oklch(0.64 0.17 36.44)` - Tangerine orange
    * Dark: `oklch(0.64 0.17 36.44)` - Tangerine orange

    **Font**: Inter, sans-serif

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

  <Card title="Solar Dusk" icon="sun-horizon">
    Golden hour yellows and oranges

    **Colors**

    * Light: `oklch(0.56 0.15 49)` - Deep gold
    * Dark: `oklch(0.7 0.19 47.6)` - Bright gold

    **Font**: Oxanium, sans-serif

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

  <Card title="Candyland" icon="lollipop">
    Sweet pastel pinks and soft tones

    **Colors**

    * Light: `oklch(0.87 0.07 7.09)` - Soft pink
    * Dark: `oklch(0.8 0.14 349.23)` - Rose pink

    **Font**: Poppins, sans-serif

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

  <Card title="Northern Lights" icon="aurora">
    Mystical teal inspired by aurora borealis

    **Colors**

    * Light: `oklch(0.65 0.15 150.31)` - Arctic teal
    * Dark: `oklch(0.65 0.15 150.31)` - Arctic teal

    **Font**: Plus Jakarta Sans, sans-serif

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-northern-lights.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 colorful theme from above using its installation command.

## Usage

Switch to a colorful theme programmatically:

```tsx theme={null}
import { useTheme } from "next-themes";

export function ThemeExample() {
  const { setTheme } = useTheme();
  
  return (
    <div>
      <button onClick={() => setTheme("catppuccin-dark")}>
        Catppuccin Dark
      </button>
      <button onClick={() => setTheme("bubblegum-light")}>
        Bubblegum Light
      </button>
      <button onClick={() => setTheme("ocean-breeze-dark")}>
        Ocean Breeze Dark
      </button>
    </div>
  );
}
```