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

​
Available Themes

Catppuccin

Popular pastel theme with soothing purple tonesColors
  • Light: oklch(0.55 0.25 297.02) - Rich purple
  • Dark: oklch(0.79 0.12 304.77) - Soft lavender
Font: Montserrat, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-catppuccin.json

Bubblegum

Sweet pink theme with playful energyColors
  • Light: oklch(0.62 0.18 348.14) - Bubblegum pink
  • Dark: oklch(0.92 0.08 87.67) - Soft yellow
Font: Poppins, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-bubblegum.json

Nature

Fresh green inspired by the natural worldColors
  • Light: oklch(0.52 0.13 144.17) - Forest green
  • Dark: oklch(0.67 0.16 144.21) - Bright green
Font: Montserrat, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-nature.json

Ocean Breeze

Refreshing aqua tones reminiscent of tropical watersColors
  • Light: oklch(0.72 0.19 149.58) - Bright aqua
  • Dark: oklch(0.77 0.15 163.22) - Cyan
Font: DM Sans, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-ocean-breeze.json

Sunset Horizon

Warm peachy-orange sunset colorsColors
  • Light: oklch(0.74 0.16 34.71) - Peachy orange
  • Dark: oklch(0.74 0.16 34.71) - Peachy orange
Font: Montserrat, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-sunset-horizon.json

Pastel Dreams

Soft purple pastels for a dreamy aestheticColors
  • 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
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-pastel-dreams.json

Perpetuity

Cool blue-gray with cyan accentsColors
  • 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
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-perpetuity.json

Tangerine

Vibrant orange citrus themeColors
  • Light: oklch(0.64 0.17 36.44) - Tangerine orange
  • Dark: oklch(0.64 0.17 36.44) - Tangerine orange
Font: Inter, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-tangerine.json

Solar Dusk

Golden hour yellows and orangesColors
  • Light: oklch(0.56 0.15 49) - Deep gold
  • Dark: oklch(0.7 0.19 47.6) - Bright gold
Font: Oxanium, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-solar-dusk.json

Candyland

Sweet pastel pinks and soft tonesColors
  • Light: oklch(0.87 0.07 7.09) - Soft pink
  • Dark: oklch(0.8 0.14 349.23) - Rose pink
Font: Poppins, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-candyland.json

Northern Lights

Mystical teal inspired by aurora borealisColors
  • 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
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-northern-lights.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 colorful theme from above using its installation command.

​
Usage

Switch to a colorful theme programmatically: 
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>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us