Theming
Catnip supports theming via CSS variables. Design tokens are exposed as --catnip-* variables that you can override.
Light and Dark Themes
Default (light)
@import "@signicat/catnip-design-tokens/css";Tokens are applied on :root. Color examples:
--catnip-color-content-neutral-strongest--catnip-color-background-neutral-subtlest--catnip-color-brand-500
Typography: responsive --catnip-font-* presets are included in the default CSS bundle (see Typography tokens). Spacing and shadow tokens ship as --catnip-space-* and --catnip-shadow-* (see Spacing tokens and Shadow tokens). Catnip CSS shadow utilities use the same variables.
Component tokens (for example --catnip-button-radius) also ship on :root. Components consume these named variables; themes override them. See Component tokens below.
Dark theme
@import "@signicat/catnip-design-tokens/css";
@import "@signicat/catnip-design-tokens/css/dark";Dark semantic color overrides apply when the subtree has data-theme="dark":
<html data-theme="dark">
<!-- Dark semantic colors apply -->
</html>Or scope to a section:
<div data-theme="dark">
<!-- Only this subtree uses dark semantic overrides -->
</div>Primitive color variables stay on :root unless you override them yourself.
EndUI (whitelabel) theme
Use the EndUI theme for non-Signicat / whitelabel surfaces so primary UI uses the blue brand palette instead of Signicat purple, and main buttons use a squared radius.
EndUI is opt-in: import it from the tokens package (it is not bundled into @signicat/catnip-css).
@import "@signicat/catnip-design-tokens/css";
@import "@signicat/catnip-design-tokens/css/endui";Then set data-theme="endui":
<html data-theme="endui">
<!-- Blue brand + squared main buttons -->
</html>Or scope to a section:
<div data-theme="endui">
<!-- Only this subtree uses EndUI / whitelabel overrides -->
</div>EndUI remaps color.brand.* to the blue scale (so semantic primary tokens follow) and sets --catnip-button-radius to the squared scale step (radius.s).
data-theme can be only one value at a time, so EndUI and dark do not combine in this release. Combining brand + dark is a follow-up.
CDN
Load token stylesheets with <link> tags instead of @import:
<link rel="stylesheet" href="https://static.signicat.com/catnip/design-tokens/latest/css/default.css" />
<link rel="stylesheet" href="https://static.signicat.com/catnip/design-tokens/latest/css/dark.css" />
<link rel="stylesheet" href="https://static.signicat.com/catnip/design-tokens/latest/css/endui.css" />Then apply dark or EndUI with data-theme="dark" or data-theme="endui" as above. For the full CDN setup (CSS utilities, icons, fonts), see Installation — CDN.
Component tokens
Component tokens are named for a control (for example --catnip-button-radius) but defined on :root in the design-tokens package — not invented inside each component stylesheet.
Rules:
- Defaults always exist on
:root(Signicat look). - Themes override the same variables (for example EndUI sets
--catnip-button-radius). - Component SCSS only consumes the variable.
- Use a leaf name first (
button.radius→--catnip-button-radius). Add a suffix only when a second value is needed (button.radius.utility→--catnip-button-radius-utility).
Per-instance overrides still work: set the CSS variable on a host or wrapper; cascade wins over :root.
See also the shipped inventory: Component tokens.
Overriding tokens
Redefine CSS variables where you need custom branding:
:root {
--catnip-color-brand-500: #6d28d9;
--catnip-color-brand-600: #5b21b6;
}Custom theme
You can add another data-theme value and set variables on it:
/* my-theme.css */
[data-theme="brand"] {
--catnip-color-brand-500: #0ea5e9;
--catnip-color-brand-600: #0284c7;
}Then apply: <div data-theme="brand">.
Prefer shipping brand themes the same way as EndUI (token JSON + build) when the override set is shared across services.
Token reference
See Design tokens for what ships today and Color tokens for the full color list.