Minimal Themes

Clean, understated themes focused on simplicity and readability

Minimal themes prioritize clarity and focus with subtle colors and clean typography. Perfect for content-focused applications and professional interfaces.

Available Themes

Default

The standard shadcn/ui theme with neutral grays

Colors

• Light: oklch(0.2050 0 0) - Pure black
• Dark: oklch(0.9220 0 0) - Pure white

Font: ui-sans-serif, system-ui, sans-serif

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-default.json

Mocha Mousse

Warm, subtle brown tones for a comfortable reading experience

Colors

• Light: oklch(0.61 0.06 44.36) - Soft brown
• Dark: oklch(0.73 0.05 52.33) - Warm beige

Font: DM Sans, sans-serif

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-mocha-mousse.json

Mono

Monochrome theme with monospace typography

Colors

• Light: oklch(0.56 0 0) - Medium gray
• Dark: oklch(0.56 0 0) - Medium gray

Font: Geist Mono, monospace

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-mono.json

Modern Minimal

Contemporary minimal design with subtle purple accent

Colors

• Light: oklch(0.62 0.19 259.81) - Soft purple
• Dark: oklch(0.62 0.19 259.81) - Soft purple

Font: Inter, sans-serif

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-modern-minimal.json

Amber Minimal

Warm amber accent with minimal styling

Colors

• Light: oklch(0.77 0.16 70.08) - Golden amber
• Dark: oklch(0.77 0.16 70.08) - Golden amber

Font: Inter, sans-serif

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-amber-minimal.json

Clean Slate

Neutral purple-gray for a fresh, clean interface

Colors

• Light: oklch(0.59 0.2 277.12) - Cool purple-gray
• Dark: oklch(0.68 0.16 276.93) - Light purple-gray

Font: Inter, sans-serif

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-clean-slate.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 minimal theme from above using its installation command.

Usage

Switch to a minimal theme programmatically:

import { useTheme } from "next-themes";

export function ThemeExample() {
  const { setTheme } = useTheme();
  
  return (
    <div>
      <button onClick={() => setTheme("default-dark")}>
        Default Dark
      </button>
      <button onClick={() => setTheme("mono-light")}>
        Mono Light
      </button>
      <button onClick={() => setTheme("mocha-mousse-dark")}>
        Mocha Mousse Dark
      </button>
    </div>
  );
}