Tweakcn
Customize theme for shadcn/ui with tweakcn's interactive editor.
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:
--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:
--font-serif:
--font-mono:
--shadow-color:
hsl(185 70% 30% / 0.15)
--shadow-opacity:
--shadow-blur:
--shadow-spread:
--shadow-offset-x:
--shadow-offset-y:
--letter-spacing:
--spacing:
--shadow-2xs:
--shadow-xs:
--shadow-sm:
--shadow:
--shadow-md:
--shadow-lg:
--shadow-xl:
--shadow-2xl:
--tracking-normal:
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:
--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:
--font-serif:
--font-mono:
--shadow-color:
hsl(180 70% 60% / 0.2)
--shadow-opacity:
--shadow-blur:
--shadow-spread:
--shadow-offset-x:
--shadow-offset-y:
--letter-spacing:
--spacing:
--shadow-2xs:
--shadow-xs:
--shadow-sm:
--shadow:
--shadow-md:
--shadow-lg:
--shadow-xl:
--shadow-2xl:
Theme
--font-sans:
--font-mono:
--font-serif:
--radius:
--tracking-tighter:
--tracking-tight:
--tracking-wide:
--tracking-wider:
--tracking-widest:
CSS