Define design tokens as CSS custom properties with dark mode variants and usage snippets.
Turn design-token names and values into reusable CSS custom-property declarations, optional dark-mode overrides, and var() usage snippets. This is useful for defining shared colors, spacing, radii, typography values, and similar theme choices without repeating literals throughout a stylesheet. It does not convert an existing stylesheet or decide which tokens a design system needs. The common surprise is that declaring a token such as --surface does not style anything by itself: a regular CSS property must consume it, and a dark-mode override matters only when its surrounding selector or condition matches.
Each token is represented as a CSS declaration whose property name begins with -- and whose value is CSS text. The accompanying usage form references that declaration through var(--token), allowing the current cascaded value to be substituted into another declaration. The generator does not make a value valid for every property; validity still depends on where the variable is consumed.
Supplying a dark value creates an override for the same custom-property name in the generated dark-mode block. Since both themes use one name, declarations that contain var(--token) do not need separate light and dark versions. The effective value still follows normal CSS rules, including selector matching, specificity, source order, inheritance, and declarations closer to the consuming element.
Not necessarily. Dark-mode activation depends on the selector or condition shown in the generated CSS. A prefers-color-scheme media query can respond to the user's system preference, while a class or attribute selector requires the page to apply that class or attribute. Read the generated dark-mode block and connect it to the theme behavior your site actually uses.
Only when its substituted value is valid for that property. An unregistered custom property can hold many kinds of CSS text, but var() substitution does not convert a color into a length or repair malformed syntax. Also ensure the token is defined where it is used; otherwise provide an appropriate var() fallback or expect the consuming declaration to become invalid.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.