Tweakcn

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

Website

perpetuity

style

Installation

Copy and the paste the following command into your terminal.

CSS

Light Mode

--background:

oklch(0.9491 0.0085 197.0126)

--foreground:

oklch(0.3772 0.0619 212.6640)

--card:

oklch(0.9724 0.0053 197.0692)

--card-foreground:

oklch(0.3772 0.0619 212.6640)

--popover:

oklch(0.9724 0.0053 197.0692)

--popover-foreground:

oklch(0.3772 0.0619 212.6640)

--primary:

oklch(0.5624 0.0947 203.2755)

--primary-foreground:

oklch(1.0000 0 0)

--secondary:

oklch(0.9244 0.0181 196.8450)

--secondary-foreground:

oklch(0.3772 0.0619 212.6640)

--muted:

oklch(0.9295 0.0107 196.9723)

--muted-foreground:

oklch(0.5428 0.0594 201.5662)

--accent:

oklch(0.9021 0.0297 201.8915)

--accent-foreground:

oklch(0.3772 0.0619 212.6640)

--destructive:

oklch(0.5732 0.1901 25.5409)

--destructive-foreground:

oklch(1.0000 0 0)

--border:

oklch(0.8931 0.0205 204.4136)

--input:

oklch(0.9244 0.0181 196.8450)

--ring:

oklch(0.5624 0.0947 203.2755)

--chart-1:

oklch(0.5624 0.0947 203.2755)

--chart-2:

oklch(0.6389 0.1029 201.5918)

--chart-3:

oklch(0.7124 0.1075 201.2486)

--chart-4:

oklch(0.7701 0.0979 201.1816)

--chart-5:

oklch(0.8336 0.0771 200.9702)

--radius:

0.125rem

--sidebar:

oklch(0.9280 0.0183 205.3151)

--sidebar-foreground:

oklch(0.3772 0.0619 212.6640)

--sidebar-primary:

oklch(0.5624 0.0947 203.2755)

--sidebar-primary-foreground:

oklch(1.0000 0 0)

--sidebar-accent:

oklch(0.9021 0.0297 201.8915)

--sidebar-accent-foreground:

oklch(0.3772 0.0619 212.6640)

--sidebar-border:

oklch(0.8931 0.0205 204.4136)

--sidebar-ring:

oklch(0.5624 0.0947 203.2755)

--font-sans:

Courier New, monospace

--font-serif:

Courier New, monospace

--font-mono:

Courier New, monospace

--shadow-color:

hsl(185 70% 30% / 0.15)

--shadow-opacity:

0.15

--shadow-blur:

2px

--shadow-spread:

0px

--shadow-offset-x:

1px

--shadow-offset-y:

1px

--letter-spacing:

0em

--spacing:

0.25rem

--shadow-2xs:

1px 1px 2px 0px hsl(185 70% 30% / 0.07)

--shadow-xs:

1px 1px 2px 0px hsl(185 70% 30% / 0.07)

--shadow-sm:

1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 1px 2px -1px hsl(185 70% 30% / 0.15)

--shadow:

1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 1px 2px -1px hsl(185 70% 30% / 0.15)

--shadow-md:

1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 2px 4px -1px hsl(185 70% 30% / 0.15)

--shadow-lg:

1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 4px 6px -1px hsl(185 70% 30% / 0.15)

--shadow-xl:

1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 8px 10px -1px hsl(185 70% 30% / 0.15)

--shadow-2xl:

1px 1px 2px 0px hsl(185 70% 30% / 0.38)

--tracking-normal:

0em

Dark Mode

--background:

oklch(0.2068 0.0247 224.4533)

--foreground:

oklch(0.8520 0.1269 195.0354)

--card:

oklch(0.2293 0.0276 216.0674)

--card-foreground:

oklch(0.8520 0.1269 195.0354)

--popover:

oklch(0.2293 0.0276 216.0674)

--popover-foreground:

oklch(0.8520 0.1269 195.0354)

--primary:

oklch(0.8520 0.1269 195.0354)

--primary-foreground:

oklch(0.2068 0.0247 224.4533)

--secondary:

oklch(0.3775 0.0564 216.5010)

--secondary-foreground:

oklch(0.8520 0.1269 195.0354)

--muted:

oklch(0.2894 0.0412 218.8153)

--muted-foreground:

oklch(0.6611 0.0975 195.0526)

--accent:

oklch(0.3775 0.0564 216.5010)

--accent-foreground:

oklch(0.8520 0.1269 195.0354)

--destructive:

oklch(0.6168 0.2086 25.8088)

--destructive-foreground:

oklch(0.9612 0 0)

--border:

oklch(0.3775 0.0564 216.5010)

--input:

oklch(0.3775 0.0564 216.5010)

--ring:

oklch(0.8520 0.1269 195.0354)

--chart-1:

oklch(0.8520 0.1269 195.0354)

--chart-2:

oklch(0.6611 0.0975 195.0526)

--chart-3:

oklch(0.5804 0.0849 195.0673)

--chart-4:

oklch(0.4269 0.0630 202.6247)

--chart-5:

oklch(0.3142 0.0455 204.1575)

--radius:

0.125rem

--sidebar:

oklch(0.2068 0.0247 224.4533)

--sidebar-foreground:

oklch(0.8520 0.1269 195.0354)

--sidebar-primary:

oklch(0.8520 0.1269 195.0354)

--sidebar-primary-foreground:

oklch(0.2068 0.0247 224.4533)

--sidebar-accent:

oklch(0.3775 0.0564 216.5010)

--sidebar-accent-foreground:

oklch(0.8520 0.1269 195.0354)

--sidebar-border:

oklch(0.3775 0.0564 216.5010)

--sidebar-ring:

oklch(0.8520 0.1269 195.0354)

--font-sans:

Source Code Pro, monospace

--font-serif:

Source Code Pro, monospace

--font-mono:

Source Code Pro, monospace

--shadow-color:

hsl(180 70% 60% / 0.2)

--shadow-opacity:

0.2

--shadow-blur:

2px

--shadow-spread:

0px

--shadow-offset-x:

1px

--shadow-offset-y:

1px

--letter-spacing:

0em

--spacing:

0.25rem

--shadow-2xs:

1px 1px 2px 0px hsl(180 70% 60% / 0.10)

--shadow-xs:

1px 1px 2px 0px hsl(180 70% 60% / 0.10)

--shadow-sm:

1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 1px 2px -1px hsl(180 70% 60% / 0.20)

--shadow:

1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 1px 2px -1px hsl(180 70% 60% / 0.20)

--shadow-md:

1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 2px 4px -1px hsl(180 70% 60% / 0.20)

--shadow-lg:

1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 4px 6px -1px hsl(180 70% 60% / 0.20)

--shadow-xl:

1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 8px 10px -1px hsl(180 70% 60% / 0.20)

--shadow-2xl:

1px 1px 2px 0px hsl(180 70% 60% / 0.50)

Theme

--font-sans:

Source Code Pro, monospace

--font-mono:

Source Code Pro, monospace

--font-serif:

Source Code Pro, monospace

--radius:

0.125rem

--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