1 slot open this monthBy the makers of shadcnregistryWe built shadcnregistry. Now we build your product.Book a callCheck availability
1 slot open this monthAI features?We build AI features into your product.Book a callCheck availability
1 slot open this month🚨 Slop police🚨 Slop police: we clean up vibe-coded apps.Report itReport your app
shadcnregistry
shadcnregistry
RegistryHealthInspect
Terms of ServicePrivacy Policy
  1. Registries
  3. joyco
  5. JOYCO Theme

JOYCO Theme

theme

JOYCO brand theme with light and dark mode color tokens.

pnpm dlx shadcn@latest add "https://registry.joyco.studio/r/joyco-theme.json"
Premium blocks for shadcn/uiShadcnblocks.com · AffiliateExplore

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)

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

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

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

CSS