Theming

Vinyaas uses CSS variables for semantic theme tokens. Components read those tokens so you can retheme without rewriting class names.

Overview

After vinyaas init, theme tokens are written into your CSS entry under :root and .dark. Tailwind maps them to utilities such as bg-background, text-foreground, and border-border.

Prefer changing tokens over hard-coding colors on individual components. For a visual preview of curated presets, open the Themes playground.

CSS variables

Keep tailwind.cssVariables enabled in components.json. That is the default for Vinyaas projects.

<div className="bg-background text-foreground" />

Token convention

Tokens use semantic background / foreground pairs. The base token is the surface; the -foreground token is the text or icon color that sits on that surface. Example: primary pairs with primary-foreground.

<div className="bg-primary text-primary-foreground">Save</div>

Theme tokens

These tokens live in your CSS under :root and .dark:

  • background / foreground — page shell and default text
  • card / popover — elevated and floating surfaces
  • primary / secondary / accent /muted — emphasis levels and supporting UI
  • destructive — error and destructive actions
  • border, input, ring — edges and focus outlines
  • chart-1 … chart-5 — chart palette
  • sidebar-* — sidebar surfaces when used

Radius

--radius is the base corner size. Derived scales (--radius-sm, --radius-md, --radius-lg, --radius-xl) keep components consistent when you change one value.

Typography tokens

Init maps --font-sans and --font-mono for UI text and code. Content rhythm for Markdown layouts is covered separately on Typeset. Component-level text styles use the Typography component.

Dark mode

Dark mode overrides the same tokens inside .dark. Toggle the class on the document root — see Dark Mode for framework-specific wiring.

Customizing themes

Edit the CSS variables in your global stylesheet, or start from a curated look in the Themes playground and copy the generated CSS into the project. Keep light and dark pairs readable together when you change primary, accent, or surface colors.

To add a token, define it under :root and .dark, then expose it with @theme inline so Tailwind utilities can use it.