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.
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.
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" />Then apply dark mode with data-theme="dark" as above. For the full CDN setup (CSS utilities, icons, fonts), see Installation — CDN.
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">.
Token reference
See Design tokens for what ships today and Color tokens for the full color list.