How to use CSS Theme Token Builder
- Enter unique token names with light and dark values.
- Choose the supported theme-output options.
- Review the declarations and copy or download CSS and JSON.
Example: CSS Theme Token Builder
Token surface with light #ffffff and dark #111111.
Options
- Token objects
- Enter each name without the -- prefix and supply both light and dark values of the same supported type. A token can be an opaque color or a nonnegative length.
- System preference
- The system dark preference applies only when an explicit theme selection is absent. The exported rules set values; they do not create a working toggle.
Supported inputs and limits
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
A token needs a consumer
Use the exported custom properties in actual declarations such as background: var(--surface). Merely defining a variable does not style an element. Check all text and control boundaries in both themes, since two valid color values can still have poor contrast. Unsupported declarations and URLs are refused rather than copied into the generated stylesheet.
Questions about CSS Theme Token Builder
Does this add a theme switch to my site?
No. It exports declarations and selectors. Your site must implement the switch and retain its state if needed.
Can I paste a whole CSS declaration as a value?
No. Enter a supported value only. Braces, declaration separators and other injection forms are refused.
Do the dark values pass contrast?
They are your chosen values. Check each foreground/background pair separately.
What does the CSS fallback support?
var(--token, fallback) supplies a value when the property is missing in a browser that supports CSS custom properties. For older browsers, add a separate literal declaration before the var() declaration.