⚠️ Mobile is not supported yet.

Netflix

style

A theme based on the Netflix color palette

Provided by zippystarter

Open in

Installation

Install directly from the provider.

pnpm dlx shadcn@latest add "https://zippystarter.com/r/netflix.json"

Files

No files found

Styles

Light Mode

--radius:

0.5rem

--background:

oklch(1 0 0)

--foreground:

oklch(0.1913 0 0)

--card:

oklch(0.9812 0 0)

--card-foreground:

oklch(0.1913 0 0)

--popover:

oklch(1 0 0)

--popover-foreground:

oklch(0.1913 0 0)

--primary:

oklch(0.5800 0.2300 27.9900)

--primary-foreground:

oklch(1 0 0)

--secondary:

oklch(0.9551 0 0)

--secondary-foreground:

oklch(0.1913 0 0)

--muted:

oklch(0.9551 0 0)

--muted-foreground:

oklch(0.5103 0 0)

--accent:

oklch(0.9378 0 0)

--accent-foreground:

oklch(0.5103 0 0)

--destructive:

oklch(0.6570 0.2292 26.2531)

--destructive-foreground:

oklch(1 0 0)

--border:

oklch(0.9203 0 0)

--input:

oklch(0.9067 0 0)

--ring:

oklch(0.5814 0.2349 27.9869)

--chart-1:

oklch(0.4122 0.2596 23.9100)

--chart-2:

oklch(0.5800 0.2300 27.9900)

--chart-3:

oklch(0.7794 0.1395 20.8300)

--chart-4:

oklch(0.8587 0.0765 18.7599)

--chart-5:

oklch(0.9430 0.0286 17.6699)

--sidebar:

oklch(0.9812 0 0)

--sidebar-foreground:

oklch(0.1913 0 0)

--sidebar-primary:

oklch(0.5800 0.2300 27.9900)

--sidebar-primary-foreground:

oklch(1 0 0)

--sidebar-accent:

oklch(0.9197 0 0)

--sidebar-accent-foreground:

oklch(0.1913 0 0)

--sidebar-border:

oklch(0.8452 0 0)

--sidebar-ring:

oklch(0.5800 0.2300 27.9900)

--header:

oklch(0.9702 0 0)

--header-foreground:

oklch(0.1913 0 0)

--footer:

oklch(0.9551 0 0)

--footer-foreground:

oklch(0.3211 0 0)

--code:

oklch(0.9551 0 0)

--code-foreground:

oklch(0.3211 0 0)

--code-highlight:

oklch(0.9669 0.0162 17.4379)

--code-number:

oklch(0.6268 0 0)

--code-selection:

oklch(0.9236 0.0390 17.8791)

--code-border:

oklch(0.8452 0 0)

Dark Mode

--background:

oklch(0 0 0)

--foreground:

oklch(1 0 0)

--card:

oklch(0.1878 0 0)

--card-foreground:

oklch(1 0 0)

--popover:

oklch(0 0 0)

--popover-foreground:

oklch(1 0 0)

--primary:

oklch(0.5800 0.2300 27.9900)

Theme

--radius-2xl:

calc(var(--radius) + 8px)

--radius-3xl:

calc(var(--radius) + 12px)

--radius-4xl:

calc(var(--radius) + 16px)

--font-display-family:

var(--display-family)

--font-display-weight:

600

--font-display-tracking:

tighter

--font-body-family:

var(--body-family)

--font-body-weight:

400

--font-body-tracking:

normal

--body-family:

var(--font-inter)

CSS

--primary-foreground:

--secondary:

oklch(0.2602 0.0060 286.0300)

--secondary-foreground:

oklch(1 0 0)

--muted:

oklch(0.2350 0 0)

--muted-foreground:

oklch(0.7380 0 0)

--accent:

oklch(0.2612 0 0)

--accent-foreground:

oklch(0.9850 0 0)

--destructive:

oklch(0.6570 0.2292 26.2531)

--destructive-foreground:

oklch(1 0 0)

--border:

oklch(0.2949 0 0)

--input:

oklch(0.3697 0 0)

--ring:

oklch(0.5814 0.2349 27.9869)

--chart-1:

oklch(0.5800 0.2300 27.9900)

--chart-2:

oklch(0.6909 0.1987 23.9078)

--chart-3:

oklch(0.7650 0.1395 20.8346)

--chart-4:

oklch(0.8587 0.0765 18.7599)

--chart-5:

oklch(0.9430 0.0286 17.6699)

--sidebar:

oklch(0 0 0)

--sidebar-foreground:

oklch(1 0 0)

--sidebar-primary:

oklch(0.5814 0.2349 27.9869)

--sidebar-primary-foreground:

oklch(1 0 0)

--sidebar-accent:

oklch(0.2612 0 0)

--sidebar-accent-foreground:

oklch(0.9850 0 0)

--sidebar-border:

oklch(0.3211 0 0)

--sidebar-ring:

oklch(0.5814 0.2349 27.9869)

--header:

oklch(0.1900 0 0)

--header-foreground:

oklch(0.6000 0 0)

--footer:

oklch(0.1900 0 0)

--footer-foreground:

oklch(0.6000 0 0)

--code:

oklch(0.2350 0 0)

--code-foreground:

oklch(0.8975 0 0)

--code-highlight:

oklch(0.1815 0.0745 29.2339)

--code-number:

oklch(0.7380 0 0)

--code-selection:

oklch(0.2639 0.1083 29.2339)

--code-border:

oklch(0.3211 0 0)

--font-mono:

var(--font-fira-code)