Olive

Monochrome buttons and highlights on the green-tinted Olive base, with amber charts and large corners.

Base Olive
Corners Large
Charts Amber

Colors

Background
Foreground
Primary
Secondary
Muted
Accent
Border
Chart 1
Chart 2
Chart 3
Chart 4
Chart 5

Use this theme

Changes colors and radius only. Your components, fonts and icons stay as they are.

Replace the :root and .dark blocks in your globals.css.

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.153 0.006 107.1);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.153 0.006 107.1);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.153 0.006 107.1);
  --primary: oklch(0.228 0.013 107.4);
  --primary-foreground: oklch(0.988 0.003 106.5);
  --secondary: oklch(0.966 0.005 106.5);
  --secondary-foreground: oklch(0.228 0.013 107.4);
  --muted: oklch(0.966 0.005 106.5);
  --muted-foreground: oklch(0.58 0.031 107.3);
  --accent: oklch(0.966 0.005 106.5);
  --accent-foreground: oklch(0.228 0.013 107.4);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.93 0.007 106.5);
  --input: oklch(0.93 0.007 106.5);
  --ring: oklch(0.737 0.021 106.9);
  --chart-1: oklch(0.879 0.169 91.605);
  --chart-2: oklch(0.769 0.188 70.08);
  --chart-3: oklch(0.666 0.179 58.318);
  --chart-4: oklch(0.555 0.163 48.998);
  --chart-5: oklch(0.473 0.137 46.201);
  --radius: 0.875rem;
  --sidebar: oklch(0.988 0.003 106.5);
  --sidebar-foreground: oklch(0.153 0.006 107.1);
  --sidebar-primary: oklch(0.228 0.013 107.4);
  --sidebar-primary-foreground: oklch(0.988 0.003 106.5);
  --sidebar-accent: oklch(0.966 0.005 106.5);
  --sidebar-accent-foreground: oklch(0.228 0.013 107.4);
  --sidebar-border: oklch(0.93 0.007 106.5);
  --sidebar-ring: oklch(0.737 0.021 106.9);
}

.dark {
  --background: oklch(0.153 0.006 107.1);
  --foreground: oklch(0.988 0.003 106.5);
  --card: oklch(0.228 0.013 107.4);
  --card-foreground: oklch(0.988 0.003 106.5);
  --popover: oklch(0.228 0.013 107.4);
  --popover-foreground: oklch(0.988 0.003 106.5);
  --primary: oklch(0.93 0.007 106.5);
  --primary-foreground: oklch(0.228 0.013 107.4);
  --secondary: oklch(0.286 0.016 107.4);
  --secondary-foreground: oklch(0.988 0.003 106.5);
  --muted: oklch(0.286 0.016 107.4);
  --muted-foreground: oklch(0.737 0.021 106.9);
  --accent: oklch(0.286 0.016 107.4);
  --accent-foreground: oklch(0.988 0.003 106.5);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.58 0.031 107.3);
  --chart-1: oklch(0.879 0.169 91.605);
  --chart-2: oklch(0.769 0.188 70.08);
  --chart-3: oklch(0.666 0.179 58.318);
  --chart-4: oklch(0.555 0.163 48.998);
  --chart-5: oklch(0.473 0.137 46.201);
  --sidebar: oklch(0.228 0.013 107.4);
  --sidebar-foreground: oklch(0.988 0.003 106.5);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.988 0.003 106.5);
  --sidebar-accent: oklch(0.286 0.016 107.4);
  --sidebar-accent-foreground: oklch(0.988 0.003 106.5);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.58 0.031 107.3);
  --radius: 0.875rem;
}

Want the whole look?

Olive comes from preset b4r0BVlDHO, which also sets the Luma component style, Lora and Remix Icon.

Open the preset

Olive in real blocks

Marketing blocks from shadcncraft Pro

shadcncraft Pro

Every block, your theme.Ship faster with Pro.

Themes are free to copy. shadcncraft Pro is a premium shadcn/ui design system, with blocks, components and the official Figma kit ready for your theme.

Production-ready shadcn/ui blocks and components
The official shadcn/ui Figma kit, in all 8 styles
A Figma plugin for styles, themes and presets
Figma layouts exported to React code
Agent skills and an MCP server for your IDE
Lifetime updates and unlimited commercial use

Get shadcncraft ProFrom $119 · Trusted by 16,000+ creators and teams

One-time payment. We earn a commission on sales.