CSS Variable Generator

Two sets of variables (light + dark) combined into one CSS file. The light variables go to :root (default), the dark ones are wrapped in @media (prefers-color-scheme: dark). Browser auto-switches based on the user’s OS theme – no JavaScript needed. The most popular dark-mode pattern in 2026.

Two approaches: media query auto-follows OS theme (passive). data-attribute lets users override via a toggle button (e.g. light/dark switcher in your nav). Most sites combine both – start with media query, override with attribute when user clicks toggle. Pick the data-theme scope here for the toggle approach.

A standardized format for representing design values (colors, sizes, fonts) outside any specific framework. Tools like Style Dictionary and Figma Tokens read this JSON and emit CSS, iOS Swift, Android XML, etc. from one source. Output here uses the simple {name: {value, type}} shape Style Dictionary expects.

SCSS: compile-time. $primary is REPLACED with its value before browser sees it. Can’t change at runtime. Faster (no var() lookups). CSS custom properties: runtime. --primary is resolved by the browser; JavaScript can change it on the fly; supports cascading and inheritance. Use SCSS for build-time tokens; CSS vars for runtime theming.

getComputedStyle(document.documentElement).getPropertyValue('--primary') reads the resolved value. document.documentElement.style.setProperty('--primary', '#new-color') overrides it at runtime – the page updates instantly. Many JS theming libraries (e.g. Mode-watcher in Svelte) work exactly this way.

Yes – that’s a major advantage over SCSS. padding: calc(var(--space) * 2); works at RUNTIME (SCSS calc only works at compile-time). Lets you build dynamic spacing scales. Heads-up: math operations need explicit units (calc(var(--space) * 2) only works if –space already has units).

Kebab-case lowercase: --primary-color, --text-lg, --shadow-md. Some teams use a 2-segment prefix for organization: --color-primary, --size-md, --shadow-card. The tool auto-converts inputs to kebab-case but preserves your prefix structure.

Universal as of 2026 – Chrome 49+ (2016), Firefox 31+ (2014), Safari 9.1+ (2016). IE11 doesn’t support them, but IE11 reached end-of-life in 2022 and Microsoft removed it from Windows 11. Even legacy sites can usually drop IE11 by 2026.

Yes. Variable names, values – all stay in your browser. Nothing is uploaded.