⚠️ Mobile is not supported yet.

Command Palette

Search for a command to run...

[Explore]
[Search]
[Saved]

Terms of Service Privacy Policy

JOYCO Theme – shadcn/ui Theme by joyco | shadcnregistry

Registries
joyco
JOYCO Theme

JOYCO Theme

theme

JOYCO brand theme with light and dark mode color tokens.

Provided by joyco

Open in https://v0.dev/Open in

Installation

Install directly from the provider.

pnpm dlx shadcn@latest add "https://registry.joyco.studio/r/joyco-theme.json"

Files

No files found

Styles

Light Mode

--background:

oklch(1 0 0)

--foreground:

oklch(0.145 0 0)

--card:

oklch(0.97 0 0)

--card-foreground:

oklch(0.145 0 0)

--popover:

oklch(1 0 0)

--popover-foreground:

oklch(0.145 0 0)

--primary:

oklch(0.452 0.313214 264.052)

--primary-foreground:

oklch(1 0 0)

--secondary:

oklch(0.97 0 0)

--secondary-foreground:

oklch(0.205 0 0)

--muted:

oklch(0.97 0 0)

--muted-foreground:

oklch(0.556 0 0)

--accent:

oklch(0.9 0 0)

--accent-foreground:

oklch(0.205 0 0)

--destructive:

oklch(0.577 0.245 27.325)

--border:

oklch(0.922 0 0)

--input:

oklch(0.922 0 0)

--ring:

oklch(0.708 0 0)

--chart-1:

oklch(0.646 0.222 41.116)

--chart-2:

oklch(0.6 0.118 184.704)

--chart-3:

oklch(0.398 0.07 227.392)

--chart-4:

oklch(0.828 0.189 84.429)

--chart-5:

oklch(0.769 0.188 70.08)

--sidebar:

oklch(0.985 0 0)

--sidebar-foreground:

oklch(0.145 0 0)

--sidebar-primary:

oklch(0.205 0 0)

--sidebar-primary-foreground:

oklch(0.985 0 0)

--sidebar-accent:

oklch(0.97 0 0)

--sidebar-accent-foreground:

oklch(0.205 0 0)

--sidebar-border:

oklch(0.922 0 0)

--sidebar-ring:

oklch(0.708 0 0)

--radius:

0rem

Dark Mode

--background:

oklch(0.1684 0 0)

--foreground:

oklch(0.985 0 0)

--card:

oklch(0.2046 0 0)

--card-foreground:

oklch(0.985 0 0)

--popover:

oklch(0.205 0 0)

--popover-foreground:

oklch(0.985 0 0)

--primary:

oklch(0.452 0.313214 264.052)

Theme

--gap:

0.25rem

--spacing-gap:

var(--gap)

--radius:

0rem

--font-sans:

var(--font-public-sans)

--font-mono:

var(--font-roboto-mono)

--default-font-family:

var(--font-sans)

--default-font-family-mono:

var(--font-mono)

--text-base--letter-spacing:

-0.015em

--text-lg--letter-spacing:

-0.02em

--text-xl--letter-spacing:

-0.025em

CSS

--primary-foreground:

oklch(1 0 0)

--secondary:

oklch(0.269 0 0)

--secondary-foreground:

oklch(0.985 0 0)

--muted:

oklch(0.2134 0 0)

--muted-foreground:

oklch(0.708 0 0)

--accent:

oklch(0.2768 0 0)

--accent-foreground:

oklch(0.8975 0 0)

--destructive:

oklch(0.704 0.191 22.216)

--border:

oklch(0.285 0 0)

--input:

oklch(1 0 0 / 15%)

--ring:

oklch(0.556 0 0)

--chart-1:

oklch(0.488 0.243 264.376)

--chart-2:

oklch(0.696 0.17 162.48)

--chart-3:

oklch(0.769 0.188 70.08)

--chart-4:

oklch(0.627 0.265 303.9)

--chart-5:

oklch(0.645 0.246 16.439)

--sidebar:

oklch(0.205 0 0)

--sidebar-foreground:

oklch(0.985 0 0)

--sidebar-primary:

oklch(0.488 0.243 264.376)

--sidebar-primary-foreground:

oklch(0.985 0 0)

--sidebar-accent:

oklch(0.269 0 0)

--sidebar-accent-foreground:

oklch(0.985 0 0)

--sidebar-border:

oklch(1 0 0 / 10%)

--sidebar-ring:

oklch(0.556 0 0)

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

-0.03em

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

-0.03em

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

-0.03em

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

-0.03em

--text-6xl--letter-spacing:

-0.03em

--text-7xl--letter-spacing:

-0.03em

--text-8xl--letter-spacing:

-0.03em

--text-9xl--letter-spacing:

-0.03em