Tweakcn

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

Website

twitter

style

Open in
Save

Installation

Copy and the paste the following command into your terminal.

CSS

Light Mode

--background:

oklch(1.0000 0 0)

--foreground:

oklch(0.1884 0.0128 248.5103)

--card:

oklch(0.9784 0.0011 197.1387)

--card-foreground:

oklch(0.1884 0.0128 248.5103)

--popover:

oklch(1.0000 0 0)

--popover-foreground:

oklch(0.1884 0.0128 248.5103)

--primary:

oklch(0.6723 0.1606 244.9955)

--primary-foreground:

oklch(1.0000 0 0)

--secondary:

oklch(0.1884 0.0128 248.5103)

--secondary-foreground:

oklch(1.0000 0 0)

--muted:

oklch(0.9222 0.0013 286.3737)

--muted-foreground:

oklch(0.1884 0.0128 248.5103)

--accent:

oklch(0.9392 0.0166 250.8453)

--accent-foreground:

oklch(0.6723 0.1606 244.9955)

--destructive:

oklch(0.6188 0.2376 25.7658)

--destructive-foreground:

oklch(1.0000 0 0)

--border:

oklch(0.9317 0.0118 231.6594)

--input:

oklch(0.9809 0.0025 228.7836)

--ring:

oklch(0.6818 0.1584 243.3540)

--chart-1:

oklch(0.6723 0.1606 244.9955)

--chart-2:

oklch(0.6907 0.1554 160.3454)

--chart-3:

oklch(0.8214 0.1600 82.5337)

--chart-4:

oklch(0.7064 0.1822 151.7125)

--chart-5:

oklch(0.5919 0.2186 10.5826)

--radius:

1.3rem

--sidebar:

oklch(0.9784 0.0011 197.1387)

--sidebar-foreground:

oklch(0.1884 0.0128 248.5103)

--sidebar-primary:

oklch(0.6723 0.1606 244.9955)

--sidebar-primary-foreground:

oklch(1.0000 0 0)

--sidebar-accent:

oklch(0.9392 0.0166 250.8453)

--sidebar-accent-foreground:

oklch(0.6723 0.1606 244.9955)

--sidebar-border:

oklch(0.9271 0.0101 238.5177)

--sidebar-ring:

oklch(0.6818 0.1584 243.3540)

--font-sans:

Open Sans, sans-serif

--font-serif:

Georgia, serif

--font-mono:

Menlo, monospace

--shadow-color:

rgba(29,161,242,0.15)

--shadow-opacity:

0

--shadow-blur:

0px

--shadow-spread:

0px

--shadow-offset-x:

0px

--shadow-offset-y:

2px

--letter-spacing:

0em

--spacing:

0.25rem

--shadow-2xs:

0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00)

--shadow-xs:

0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00)

--shadow-sm:

0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)

--shadow:

0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)

--shadow-md:

0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)

--shadow-lg:

0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)

--shadow-xl:

0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)

--shadow-2xl:

0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00)

--tracking-normal:

0em

Dark Mode

--background:

oklch(0 0 0)

--foreground:

oklch(0.9328 0.0025 228.7857)

--card:

oklch(0.2097 0.0080 274.5332)

--card-foreground:

oklch(0.8853 0 0)

--popover:

oklch(0 0 0)

--popover-foreground:

oklch(0.9328 0.0025 228.7857)

--primary:

oklch(0.6692 0.1607 245.0110)

--primary-foreground:

oklch(1.0000 0 0)

--secondary:

oklch(0.9622 0.0035 219.5331)

--secondary-foreground:

oklch(0.1884 0.0128 248.5103)

--muted:

oklch(0.2090 0 0)

--muted-foreground:

oklch(0.5637 0.0078 247.9662)

--accent:

oklch(0.1928 0.0331 242.5459)

--accent-foreground:

oklch(0.6692 0.1607 245.0110)

--destructive:

oklch(0.6188 0.2376 25.7658)

--destructive-foreground:

oklch(1.0000 0 0)

--border:

oklch(0.2674 0.0047 248.0045)

--input:

oklch(0.3020 0.0288 244.8244)

--ring:

oklch(0.6818 0.1584 243.3540)

--chart-1:

oklch(0.6723 0.1606 244.9955)

--chart-2:

oklch(0.6907 0.1554 160.3454)

--chart-3:

oklch(0.8214 0.1600 82.5337)

--chart-4:

oklch(0.7064 0.1822 151.7125)

--chart-5:

oklch(0.5919 0.2186 10.5826)

--radius:

1.3rem

--sidebar:

oklch(0.2097 0.0080 274.5332)

--sidebar-foreground:

oklch(0.8853 0 0)

--sidebar-primary:

oklch(0.6818 0.1584 243.3540)

--sidebar-primary-foreground:

oklch(1.0000 0 0)

--sidebar-accent:

oklch(0.1928 0.0331 242.5459)

--sidebar-accent-foreground:

oklch(0.6692 0.1607 245.0110)

--sidebar-border:

oklch(0.3795 0.0220 240.5943)

--sidebar-ring:

oklch(0.6818 0.1584 243.3540)

--font-sans:

Open Sans, sans-serif

--font-serif:

Georgia, serif

--font-mono:

Menlo, monospace

--shadow-color:

rgba(29,161,242,0.25)

--shadow-opacity:

0

--shadow-blur:

0px

--shadow-spread:

0px

--shadow-offset-x:

0px

--shadow-offset-y:

2px

--letter-spacing:

0em

--spacing:

0.25rem

--shadow-2xs:

0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00)

--shadow-xs:

0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00)

--shadow-sm:

0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)

--shadow:

0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)

--shadow-md:

0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)

--shadow-lg:

0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)

--shadow-xl:

0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.00)

--shadow-2xl:

0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00)

Theme

--font-sans:

Open Sans, sans-serif

--font-mono:

Menlo, monospace

--font-serif:

Georgia, serif

--radius:

1.3rem

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