Skip to main content
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 graysColors
  • 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 experienceColors
  • 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 typographyColors
  • 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 accentColors
  • 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 stylingColors
  • 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 interfaceColors
  • 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>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us