Tweakcn

Customize theme for shadcn/ui with tweakcn's interactive editor.

Website

kodama-grove

style

Open in
Save

Installation

Copy and the paste the following command into your terminal.

CSS

Light Mode

--background:

oklch(0.8798 0.0534 91.7893)

--foreground:

oklch(0.4265 0.0310 59.2153)

--card:

oklch(0.8937 0.0395 87.5676)

--card-foreground:

oklch(0.4265 0.0310 59.2153)

--popover:

oklch(0.9378 0.0331 89.8515)

--popover-foreground:

oklch(0.4265 0.0310 59.2153)

--primary:

oklch(0.6657 0.1050 118.9078)

--primary-foreground:

oklch(0.9882 0.0069 88.6415)

--secondary:

oklch(0.8532 0.0631 91.1493)

--secondary-foreground:

oklch(0.4265 0.0310 59.2153)

--muted:

oklch(0.8532 0.0631 91.1493)

--muted-foreground:

oklch(0.5761 0.0259 60.9323)

--accent:

oklch(0.8361 0.0713 90.3269)

--accent-foreground:

oklch(0.4265 0.0310 59.2153)

--destructive:

oklch(0.7136 0.0981 29.9827)

--destructive-foreground:

oklch(0.9790 0.0082 91.4818)

--border:

oklch(0.6918 0.0440 59.8448)

--input:

oklch(0.8361 0.0713 90.3269)

--ring:

oklch(0.7350 0.0564 130.8494)

--chart-1:

oklch(0.7350 0.0564 130.8494)

--chart-2:

oklch(0.6762 0.0567 132.4479)

--chart-3:

oklch(0.8185 0.0332 136.6539)

--chart-4:

oklch(0.5929 0.0464 137.6224)

--chart-5:

oklch(0.5183 0.0390 137.1892)

--radius:

0.425rem

--sidebar:

oklch(0.8631 0.0645 90.5161)

--sidebar-foreground:

oklch(0.4265 0.0310 59.2153)

--sidebar-primary:

oklch(0.7350 0.0564 130.8494)

--sidebar-primary-foreground:

oklch(0.9882 0.0069 88.6415)

--sidebar-accent:

oklch(0.9225 0.0169 88.0027)

--sidebar-accent-foreground:

oklch(0.4265 0.0310 59.2153)

--sidebar-border:

oklch(0.9073 0.0170 88.0044)

--sidebar-ring:

oklch(0.7350 0.0564 130.8494)

--font-sans:

Merriweather, serif

--font-serif:

Source Serif 4, serif

--font-mono:

JetBrains Mono, monospace

--shadow-color:

hsl(88 22% 35% / 0.15)

--shadow-opacity:

0.15

--shadow-blur:

2px

--shadow-spread:

0px

--shadow-offset-x:

3px

--shadow-offset-y:

3px

--letter-spacing:

0em

--spacing:

0.25rem

--shadow-2xs:

3px 3px 2px 0px hsl(88 22% 35% / 0.07)

--shadow-xs:

3px 3px 2px 0px hsl(88 22% 35% / 0.07)

--shadow-sm:

3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 1px 2px -1px hsl(88 22% 35% / 0.15)

--shadow:

3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 1px 2px -1px hsl(88 22% 35% / 0.15)

--shadow-md:

3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 2px 4px -1px hsl(88 22% 35% / 0.15)

--shadow-lg:

3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 4px 6px -1px hsl(88 22% 35% / 0.15)

--shadow-xl:

3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 8px 10px -1px hsl(88 22% 35% / 0.15)

--shadow-2xl:

3px 3px 2px 0px hsl(88 22% 35% / 0.38)

--tracking-normal:

0em

Dark Mode

--background:

oklch(0.3303 0.0214 88.0737)

--foreground:

oklch(0.9217 0.0235 82.1191)

--card:

oklch(0.3583 0.0165 82.3257)

--card-foreground:

oklch(0.9217 0.0235 82.1191)

--popover:

oklch(0.3583 0.0165 82.3257)

--popover-foreground:

oklch(0.9217 0.0235 82.1191)

--primary:

oklch(0.6762 0.0567 132.4479)

--primary-foreground:

oklch(0.2686 0.0105 61.0213)

--secondary:

oklch(0.4448 0.0239 84.5498)

--secondary-foreground:

oklch(0.9217 0.0235 82.1191)

--muted:

oklch(0.3892 0.0197 82.7084)

--muted-foreground:

oklch(0.7096 0.0171 73.6179)

--accent:

oklch(0.6540 0.0723 90.7629)

--accent-foreground:

oklch(0.2686 0.0105 61.0213)

--destructive:

oklch(0.6287 0.0821 31.2958)

--destructive-foreground:

oklch(0.9357 0.0201 84.5907)

--border:

oklch(0.4448 0.0239 84.5498)

--input:

oklch(0.4448 0.0239 84.5498)

--ring:

oklch(0.6762 0.0567 132.4479)

--chart-1:

oklch(0.6762 0.0567 132.4479)

--chart-2:

oklch(0.7350 0.0564 130.8494)

--chart-3:

oklch(0.5929 0.0464 137.6224)

--chart-4:

oklch(0.6540 0.0723 90.7629)

--chart-5:

oklch(0.5183 0.0390 137.1892)

--radius:

0.425rem

--sidebar:

oklch(0.3303 0.0214 88.0737)

--sidebar-foreground:

oklch(0.9217 0.0235 82.1191)

--sidebar-primary:

oklch(0.6762 0.0567 132.4479)

--sidebar-primary-foreground:

oklch(0.2686 0.0105 61.0213)

--sidebar-accent:

oklch(0.6540 0.0723 90.7629)

--sidebar-accent-foreground:

oklch(0.2686 0.0105 61.0213)

--sidebar-border:

oklch(0.4448 0.0239 84.5498)

--sidebar-ring:

oklch(0.6762 0.0567 132.4479)

--font-sans:

Merriweather, serif

--font-serif:

Source Serif 4, serif

--font-mono:

JetBrains Mono, monospace

--shadow-color:

hsl(88 22% 35% / 0.15)

--shadow-opacity:

0.15

--shadow-blur:

2px

--shadow-spread:

0px

--shadow-offset-x:

3px

--shadow-offset-y:

3px

--letter-spacing:

0em

--spacing:

0.25rem

--shadow-2xs:

3px 3px 2px 0px hsl(88 22% 35% / 0.07)

--shadow-xs:

3px 3px 2px 0px hsl(88 22% 35% / 0.07)

--shadow-sm:

3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 1px 2px -1px hsl(88 22% 35% / 0.15)

--shadow:

3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 1px 2px -1px hsl(88 22% 35% / 0.15)

--shadow-md:

3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 2px 4px -1px hsl(88 22% 35% / 0.15)

--shadow-lg:

3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 4px 6px -1px hsl(88 22% 35% / 0.15)

--shadow-xl:

3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 8px 10px -1px hsl(88 22% 35% / 0.15)

--shadow-2xl:

3px 3px 2px 0px hsl(88 22% 35% / 0.38)

Theme

--font-sans:

Merriweather, serif

--font-mono:

JetBrains Mono, monospace

--font-serif:

Source Serif 4, serif

--radius:

0.425rem

--tracking-tighter:

calc(var(--tracking-normal) - 0.05em)

--tracking-tight:

calc(var(--tracking-normal) - 0.025em)

--tracking-wide:

calc(var(--tracking-normal) + 0.025em)

--tracking-wider:

calc(var(--tracking-normal) + 0.05em)

--tracking-widest:

calc(var(--tracking-normal) + 0.1em)

CSS