Emerald on Olive
Emerald buttons and highlights on the green-tinted Olive base, with lime charts and medium corners.
- Base Olive
- Corners Medium
- Charts Lime
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.508 0.118 165.612);
--primary-foreground: oklch(0.979 0.021 166.113);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--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.897 0.196 126.665);
--chart-2: oklch(0.768 0.233 130.85);
--chart-3: oklch(0.648 0.2 131.684);
--chart-4: oklch(0.532 0.157 131.589);
--chart-5: oklch(0.453 0.124 130.933);
--radius: 0.625rem;
--sidebar: oklch(0.988 0.003 106.5);
--sidebar-foreground: oklch(0.153 0.006 107.1);
--sidebar-primary: oklch(0.596 0.145 163.225);
--sidebar-primary-foreground: oklch(0.979 0.021 166.113);
--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.432 0.095 166.913);
--primary-foreground: oklch(0.979 0.021 166.113);
--secondary: oklch(0.274 0.006 286.033);
--secondary-foreground: oklch(0.985 0 0);
--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.897 0.196 126.665);
--chart-2: oklch(0.768 0.233 130.85);
--chart-3: oklch(0.648 0.2 131.684);
--chart-4: oklch(0.532 0.157 131.589);
--chart-5: oklch(0.453 0.124 130.933);
--sidebar: oklch(0.228 0.013 107.4);
--sidebar-foreground: oklch(0.988 0.003 106.5);
--sidebar-primary: oklch(0.696 0.17 162.48);
--sidebar-primary-foreground: oklch(0.262 0.051 172.552);
--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.625rem;
}Want the whole look?
Emerald on Olive comes from preset b3bEx3aBk2, which also sets the Vega component style, Public Sans and Lucide.
Emerald on 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.