Theme

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @videorc/theme

Every component lists the theme as a dependency, so the CLI also adds it with the first component you install.

Your global stylesheet must import shadcn/tailwind.css after tailwindcss. It defines the data-open, data-checked, data-horizontal and other variants the components style with. Every base-* project has it. Keep shadcn's class-based dark variant too, so dark: utilities follow the same .dark class the tokens do:

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

What gets addedCopy Anchor Link

The CLI merges the theme into your global stylesheet:

The base layer:

• gives every element the border color and a ring-colored outline;
• paints body with the window coat (bg-glass-window) and primary text, so the first paint is already the theme's tone;
• sets color-scheme on body, never on the root. A root color-scheme: light makes Chromium paint an opaque canvas over a transparent window;
• sets the font to the system stack: SF Pro on macOS, Segoe UI on Windows;
• draws a 2 px focus ring on :focus-visible;
• collapses motion under prefers-reduced-motion.

The theme declares no @custom-variant. The shadcn CLI can't carry one through a registry item, so the components use built-in variants only.

TokensCopy Anchor Link

Values are dark · light. Neutrals are OKLCH with chroma 0, written here as their lightness.

Surfaces and coatsCopy Anchor Link

Set the covers and leave the coats alone: they're computed so each region composites to exactly its cover. See The ground and the coats.

FloatsCopy Anchor Link

A light dialog gets the deeper drop so porcelain separates from the white chrome under it.

Text tiersCopy Anchor Link

Semantic tonesCopy Anchor Link

Each has a -foreground partner except --reward, and each maps to Tailwind colors (bg-success, bg-live/10). Show a status through a tone utility on a chip or a dot rather than coloring text.

The theme also carries theme-invariant brand tints for platform marks (text-platform-youtube, -twitch, -instagram, -facebook, -kick), and meter and channel tones (--meter-ok, --meter-warn, --meter-clip, --channel-mute) for audio components.

Hairlines and selectionCopy Anchor Link

A hairline is always 1 px. bg-accent is the hover and selected block for rows and menu items: a full-row fill, no outline.

shadcn's own tokens (--background, --card, --primary, --secondary, --muted, --popover, --sidebar-*) are all set, monochrome. --primary is ink on porcelain and chrome on black, and --popover follows --glass-float.

RadiusCopy Anchor Link

--radius is 0.625rem, and shadcn's rounded-sm to rounded-xl scale stays on it for stock components. Videorc's own code uses the tiers.

Desktop scaleCopy Anchor Link

They're spacing tokens, so every spacing utility takes them: min-h-row, gap-gutter, py-gutter. See Desktop scale.

TypeCopy Anchor Link

Body text stays text-sm (14 px).

Chip and chrome tokensCopy Anchor Link

The --chip-*, --keycap-*, --chrome-*, --chrome-row-*, --knob* and --scrollbar-thumb* tokens tune the utilities below: fills, rims, highlights, drops and gradient stops, per theme. Tune the tokens, not the utilities.

UtilitiesCopy Anchor Link

Pair a glass-* utility with border: it sets the rim's color, and the element brings the width. The chrome-* utilities write their light and shade into Tailwind's shadow stack, so focus rings still compose with them.

ToastsCopy Anchor Link

The theme restyles Sonner: every toast is the same glass-float panel with monochrome text, and a typed toast colors its icon only. richColors would paint solid green, amber and red panels; here its colors point back at the glass.

AccessibilityCopy Anchor Link

The theme follows three system settings. They're media queries, so a change applies at once, with no reload.

Under both contrast settings, the chrome controls keep their gradients: they're opaque.

CustomizingCopy Anchor Link

The components read the variables, so customizing is editing them in your global stylesheet:

• Change a cover (--glass-cover-sidebar, --glass-cover-work), not a coat. The coats are derived from the covers.
• After changing a surface or a text color, check the contrast of all three text tiers over your own background.
• Keep neutrals at chroma 0 to keep the monochrome look.

Running npx shadcn@latest add @videorc/theme again merges the registry's values back over your edits.

In this repository the theme is generated. styles/videorc.css is the source of truth, comments and all, and pnpm theme:build turns it into the registry's theme item. Edit the stylesheet, then run the build; pnpm theme:check fails while the registry is out of date.

On a web pageCopy Anchor Link

The coats are translucent and composite to the theme's solid. On a web page, give the page that solid so they come out the tone Videorc shows:

@layer base {
  html {
    background-color: var(--glass-solid);
  }
}

Leave out the desktop base on a website, so text stays selectable.