Lime on Mist

Lime buttons and highlights on the blue-tinted Mist base, with indigo charts and large corners.

Base Mist
Corners Large
Charts Indigo

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.148 0.004 228.8);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.148 0.004 228.8);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.148 0.004 228.8);
  --primary: oklch(0.841 0.238 128.85);
  --primary-foreground: oklch(0.405 0.101 131.063);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.963 0.002 197.1);
  --muted-foreground: oklch(0.56 0.021 213.5);
  --accent: oklch(0.963 0.002 197.1);
  --accent-foreground: oklch(0.218 0.008 223.9);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.925 0.005 214.3);
  --input: oklch(0.925 0.005 214.3);
  --ring: oklch(0.723 0.014 214.4);
  --chart-1: oklch(0.785 0.115 274.713);
  --chart-2: oklch(0.585 0.233 277.117);
  --chart-3: oklch(0.511 0.262 276.966);
  --chart-4: oklch(0.457 0.24 277.023);
  --chart-5: oklch(0.398 0.195 277.366);
  --radius: 0.875rem;
  --sidebar: oklch(0.987 0.002 197.1);
  --sidebar-foreground: oklch(0.148 0.004 228.8);
  --sidebar-primary: oklch(0.648 0.2 131.684);
  --sidebar-primary-foreground: oklch(0.986 0.031 120.757);
  --sidebar-accent: oklch(0.963 0.002 197.1);
  --sidebar-accent-foreground: oklch(0.218 0.008 223.9);
  --sidebar-border: oklch(0.925 0.005 214.3);
  --sidebar-ring: oklch(0.723 0.014 214.4);
}

.dark {
  --background: oklch(0.148 0.004 228.8);
  --foreground: oklch(0.987 0.002 197.1);
  --card: oklch(0.218 0.008 223.9);
  --card-foreground: oklch(0.987 0.002 197.1);
  --popover: oklch(0.218 0.008 223.9);
  --popover-foreground: oklch(0.987 0.002 197.1);
  --primary: oklch(0.768 0.233 130.85);
  --primary-foreground: oklch(0.405 0.101 131.063);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.275 0.011 216.9);
  --muted-foreground: oklch(0.723 0.014 214.4);
  --accent: oklch(0.275 0.011 216.9);
  --accent-foreground: oklch(0.987 0.002 197.1);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.56 0.021 213.5);
  --chart-1: oklch(0.785 0.115 274.713);
  --chart-2: oklch(0.585 0.233 277.117);
  --chart-3: oklch(0.511 0.262 276.966);
  --chart-4: oklch(0.457 0.24 277.023);
  --chart-5: oklch(0.398 0.195 277.366);
  --sidebar: oklch(0.218 0.008 223.9);
  --sidebar-foreground: oklch(0.987 0.002 197.1);
  --sidebar-primary: oklch(0.768 0.233 130.85);
  --sidebar-primary-foreground: oklch(0.274 0.072 132.109);
  --sidebar-accent: oklch(0.275 0.011 216.9);
  --sidebar-accent-foreground: oklch(0.987 0.002 197.1);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.56 0.021 213.5);
  --radius: 0.875rem;
}

Want the whole look?

Lime on Mist comes from preset b4YtS7GakV, which also sets the Luma component style, Instrument Sans and Tabler Icons.

Open the preset

Lime on Mist 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.