Theme tokens
octane/themeFreeUtility
Default neutral shadcn theme tokens (oklch, .dark overrides).
Live preview
live · rendered by the registry
Rendered by octane on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://raw.githubusercontent.com/octanejs/octane/main/packages/shadcn/registry/theme.jsonSource
1/*2 * shadcn default theme tokens (neutral base color) for octane apps.3 * Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b3055444 * apps/v4/app/globals.css (:root / .dark blocks) — values unchanged; the5 * site-only tokens (--surface, --code-*, --selection*) and the Tailwind-scale6 * chart references are omitted: --chart-1..5 get concrete oklch values here7 * because this file must stand alone without a Tailwind build.8 *9 * Dark mode follows the upstream contract: a `.dark` class on an ancestor10 * overrides the same custom properties.11 */12:root {13 --radius: 0.625rem;14 --background: oklch(1 0 0);15 --foreground: oklch(0% 0 0);16 --card: oklch(1 0 0);17 --card-foreground: oklch(0% 0 0);18 --popover: oklch(1 0 0);19 --popover-foreground: oklch(0% 0 0);20 --primary: oklch(0% 0 0);21 --primary-foreground: oklch(0.985 0 0);22 --secondary: oklch(0.97 0 0);23 --secondary-foreground: oklch(0.205 0 0);24 --muted: oklch(0.97 0 0);25 --muted-foreground: oklch(0.556 0 0);26 --accent: oklch(0.97 0 0);27 --accent-foreground: oklch(0.205 0 0);28 --destructive: oklch(0.577 0.245 27.325);29 --destructive-foreground: oklch(0.97 0.01 17);30 --border: oklch(0.922 0 0);31 --input: oklch(0.922 0 0);32 --ring: oklch(0.708 0 0);33 --chart-1: oklch(0.809 0.096 251.813);34 --chart-2: oklch(0.623 0.214 259.815);35 --chart-3: oklch(0.546 0.245 262.881);36 --chart-4: oklch(0.488 0.243 264.376);37 --chart-5: oklch(0.424 0.199 265.638);38 --sidebar: oklch(0.985 0 0);39 --sidebar-foreground: oklch(0% 0 0);40 --sidebar-primary: oklch(0.205 0 0);41 --sidebar-primary-foreground: oklch(0.985 0 0);42 --sidebar-accent: oklch(0.97 0 0);43 --sidebar-accent-foreground: oklch(0.205 0 0);44 --sidebar-border: oklch(0.922 0 0);45 --sidebar-ring: oklch(0.708 0 0);46}4748.dark {49 --background: oklch(0.145 0 0);50 --foreground: oklch(0.985 0 0);51 --card: oklch(0.205 0 0);52 --card-foreground: oklch(0.985 0 0);53 --popover: oklch(0.205 0 0);54 --popover-foreground: oklch(0.985 0 0);55 --primary: oklch(0.922 0 0);56 --primary-foreground: oklch(0.205 0 0);57 --secondary: oklch(0.269 0 0);58 --secondary-foreground: oklch(0.985 0 0);59 --muted: oklch(0.269 0 0);60 --muted-foreground: oklch(0.708 0 0);61 --accent: oklch(0.371 0 0);62 --accent-foreground: oklch(0.985 0 0);63 --destructive: oklch(0.704 0.191 22.216);64 --destructive-foreground: oklch(0.58 0.22 27);65 --border: oklch(1 0 0 / 10%);66 --input: oklch(1 0 0 / 15%);67 --ring: oklch(0.556 0 0);68 --chart-1: oklch(0.809 0.096 251.813);69 --chart-2: oklch(0.623 0.214 259.815);70// … truncated
