Theme

theme

The color scale plus the variables shadcn components read, so a component from either registry agrees with the other on what --background means.

Provided by vernostudio

Open in

tw-animate-css

Installation

Install directly from the provider.

pnpm dlx shadcn@latest add "https://verno-studio.vercel.app/r/theme.json"

Files

No files found

Styles

Light Mode

--background-100:

oklch(1 0 0)

--background-200:

oklch(0.984 0 0)

--gray-100:

oklch(0.961 0 0)

--gray-200:

oklch(0.94 0 0)

--gray-300:

oklch(0.925 0 0)

--gray-400:

oklch(0.937 0 0)

--gray-500:

oklch(0.836 0 0)

--gray-600:

oklch(0.732 0 0)

--gray-700:

oklch(0.65 0 0)

--gray-800:

oklch(0.59 0 0)

--gray-900:

oklch(0.42 0 0)

--gray-1000:

oklch(0.205 0 0)

--gray-alpha-300:

oklch(0 0 0 / 0.1)

--gray-alpha-400:

oklch(0 0 0 / 0.08)

--gray-alpha-700:

oklch(0 0 0 / 0.44)

--blue-700:

oklch(57.61% 0.2508 258.23)

--red-700:

oklch(62.56% 0.2524 23.03)

--purple-700:

oklch(55.5% 0.3008 306.12)

--teal-700:

oklch(64.92% 0.1572 181.95)

--amber-700:

oklch(81.87% 0.1969 76.46)

--pink-700:

oklch(63.52% 0.238 1.01)

--shadow-tint:

oklch(0 0 0 / 0.04)

--background:

var(--background-100)

--foreground:

var(--gray-1000)

--card:

var(--background-100)

--card-foreground:

var(--gray-1000)

--popover:

var(--background-100)

--popover-foreground:

var(--gray-1000)

--primary:

var(--gray-1000)

--primary-foreground:

var(--background-100)

--secondary:

var(--gray-100)

--secondary-foreground:

var(--gray-1000)

--muted:

var(--gray-100)

--muted-foreground:

var(--gray-900)

--accent:

var(--gray-200)

--accent-foreground:

var(--gray-1000)

--destructive:

var(--red-700)

--destructive-foreground:

oklch(1 0 0)

--border:

var(--gray-alpha-400)

--border-strong:

var(--gray-alpha-700)

--input:

var(--gray-alpha-400)

--ring:

var(--blue-700)

--sidebar:

var(--background-100)

--sidebar-foreground:

var(--gray-1000)

--sidebar-primary:

var(--gray-1000)

--sidebar-primary-foreground:

var(--background-100)

--sidebar-accent:

var(--gray-200)

--sidebar-accent-foreground:

var(--gray-1000)

--sidebar-border:

var(--gray-alpha-400)

--sidebar-ring:

var(--blue-700)

--chart-1:

var(--blue-700)

--chart-2:

var(--purple-700)

--chart-3:

var(--teal-700)

--chart-4:

var(--amber-700)

--chart-5:

var(--pink-700)

--radius-small:

0.375rem

--radius:

0.5rem

--color-scheme:

light

Dark Mode

--background-100:

oklch(0 0 0)

--background-200:

oklch(0.027 0 0)

--gray-100:

oklch(0.218 0 0)

--gray-200:

oklch(0.239 0 0)

--gray-300:

oklch(0.281 0 0)

--gray-400:

oklch(0.301 0 0)

--gray-500:

oklch(0.39 0 0)

Theme

--color-background-100:

var(--background-100)

--color-background-200:

var(--background-200)

--color-gray-100:

var(--gray-100)

--color-gray-200:

var(--gray-200)

--color-gray-300:

var(--gray-300)

--color-gray-400:

var(--gray-400)

--color-gray-500:

var(--gray-500)

--color-gray-600:

var(--gray-600)

--color-gray-700:

var(--gray-700)

--color-gray-800:

var(--gray-800)

CSS

No CSS found.

--gray-700:

oklch(0.65 0 0)

--gray-800:

oklch(0.59 0 0)

--gray-900:

oklch(0.85 0 0)

--gray-1000:

oklch(0.946 0 0)

--gray-alpha-300:

oklch(1 0 0 / 0.13)

--gray-alpha-400:

oklch(1 0 0 / 0.14)

--gray-alpha-700:

oklch(1 0 0 / 0.54)

--blue-700:

oklch(71.7% 0.1648 250.794)

--red-700:

oklch(62.56% 0.2234 23.03)

--purple-700:

oklch(55.5% 0.2186 306.12)

--teal-700:

oklch(64.92% 0.1403 181.95)

--amber-700:

oklch(81.87% 0.1969 76.46)

--pink-700:

oklch(63.52% 0.2346 1.01)

--shadow-tint:

oklch(0 0 0 / 0.5)

--color-scheme:

dark

--color-gray-1000:

var(--gray-1000)

--color-background:

var(--background)

--color-foreground:

var(--foreground)

--color-card:

var(--card)

--color-card-foreground:

var(--card-foreground)

--color-popover:

var(--popover)

--color-popover-foreground:

var(--popover-foreground)

--color-primary:

var(--primary)

--color-primary-foreground:

var(--primary-foreground)

--color-secondary:

var(--secondary)

--color-secondary-foreground:

var(--secondary-foreground)

--color-muted:

var(--muted)

--color-muted-foreground:

var(--muted-foreground)

--color-accent:

var(--accent)

--color-accent-foreground:

var(--accent-foreground)

--color-destructive:

var(--destructive)

--color-destructive-foreground:

var(--destructive-foreground)

--color-border:

var(--border)

--color-border-strong:

var(--border-strong)

--color-input:

var(--input)

--color-ring:

var(--ring)

--color-sidebar:

var(--sidebar)

--color-sidebar-foreground:

var(--sidebar-foreground)

--color-sidebar-primary:

var(--sidebar-primary)

--color-sidebar-primary-foreground:

var(--sidebar-primary-foreground)

--color-sidebar-accent:

var(--sidebar-accent)

--color-sidebar-accent-foreground:

var(--sidebar-accent-foreground)

--color-sidebar-border:

var(--sidebar-border)

--color-sidebar-ring:

var(--sidebar-ring)

--color-chart-1:

var(--chart-1)

--color-chart-2:

var(--chart-2)

--color-chart-3:

var(--chart-3)

--color-chart-4:

var(--chart-4)

--color-chart-5:

var(--chart-5)

--radius-sm:

var(--radius-small)

--radius-md:

var(--radius-small)

--radius-lg:

var(--radius)

--shadow-border:

0 0 0 1px var(--border)

--shadow-xs:

0 1px 2px 0 var(--shadow-tint)

--shadow-sm:

0 2px 4px 0 var(--shadow-tint)

--shadow-md:

0 4px 8px 0 var(--shadow-tint)

--shadow-lg:

0 8px 16px 0 var(--shadow-tint)

--text-xs:

0.8125rem

--text-xs--line-height:

1.125rem

--text-sm--line-height:

1.25rem

--text-base--line-height:

1.5rem

--text-lg--line-height:

1.75rem

--text-xl--line-height:

1.625rem

--text-xl--letter-spacing:

-0.02em

--text-2xl--line-height:

2rem

--text-2xl--letter-spacing:

-0.04em

--text-3xl--line-height:

2.5rem

--text-3xl--letter-spacing:

-0.06em

--text-4xl--line-height:

3rem

--text-4xl--letter-spacing:

-0.06em

--text-5xl--line-height:

3.5rem

--text-5xl--letter-spacing:

-0.06em

--font-weight-heading:

450

--tracking-tighter:

-0.06em

--tracking-tight:

-0.04em

--tracking-snug:

-0.02em