CSS variables generator
Turn colors, spacing, font sizes, radii, shadows and font families into design tokens, then emit :root custom properties, a dark-mode override block, Tailwind @theme or SCSS variables.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Output options
Token names use kebab-case (primary, font-size-base); the variable name becomes --uk-color-primary
Design tokens
Live preview
The preview uses the light values; the dark block is emitted separately in the code
Token preview
This text uses the font size, family, radius, spacing and shadow from your tokens.
Generated code
:root {
--uk-color-primary: #3b82f6;
--uk-color-surface: #ffffff;
--uk-color-text: #0f172a;
--uk-spacing-sm: 8px;
--uk-spacing-md: 16px;
--uk-font-size-base: 16px;
--uk-radius-md: 8px;
--uk-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
--uk-font-family-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-theme="dark"] {
--uk-color-primary: #60a5fa;
--uk-color-surface: #0f172a;
--uk-color-text: #e2e8f0;
}What this tool does
- Collect a brand palette plus spacing, font sizes, radii and shadows as design tokens and emit a :root block you can paste into your global stylesheet.
- Add dark mode to an existing project: give each token a dark value and the tool emits a [data-theme="dark"] override block, so no component needs to change.
- Migrate between plain CSS and Tailwind v4: export the same tokens as custom properties and as @theme namespace variables, then swap them over.
- Need Sass instead? Switch to the SCSS output and every dark value becomes a $name-dark variable for older codebases.
Example
Input
Format: CSS custom properties, prefix uk-, dark overrides on; tokens: color/primary = #3b82f6 (dark #60a5fa), spacing/md = 16px
Output
:root {
--uk-color-primary: #3b82f6;
--uk-spacing-md: 16px;
}
[data-theme="dark"] {
--uk-color-primary: #60a5fa;
}Tokens are emitted in a fixed order (color, spacing, font size, radius, shadow, font family); a token without a dark value never appears in the dark block.
Frequently asked questions
Should I use custom properties or Sass variables?
Pick custom properties when the theme has to change at runtime: they participate in the cascade, so [data-theme="dark"] or a media query can switch them in the browser. Sass variables are substituted at build time, which is fine for older toolchains and for computations, but they cannot switch themes live.
Why [data-theme="dark"] instead of prefers-color-scheme?
The emitted block is the manual-switch approach, which can override the system preference and let users choose. If you only want to follow the OS, change the selector to @media (prefers-color-scheme: dark); the declarations inside stay the same.
Why do the Tailwind @theme variables have different names?
Tailwind v4 recognises theme variables by namespace: --color-* for colors, --spacing-* for spacing, --text-* for font sizes, --font-* for families and --shadow-* for shadows. So the @theme block uses namespace names while the dark override block keeps the custom property names so it still works at runtime.
What are the rules for token names?
Kebab-case only: start with a lowercase letter and use lowercase letters, digits and hyphens, like primary or font-size-base. Names must be unique inside a group, otherwise the CSS would contain two declarations for the same property and the later one would silently win. Values may not contain ; { } either.
Can the output contain duplicate declarations?
No. Variable names are checked for uniqueness before anything is generated and a duplicate raises an error instead of producing broken CSS. A token appearing once in the light block and once in the dark block is intentional, not a duplicate.
Keywords：css variablescustom propertiesdesign tokensthemedark modetailwind themescss variablesCSS 变量设计令牌自定义属性暗色模式主题变量