CSS Variables Generator

In short CSS custom properties are real variables that live in the cascade, which is what makes them different from a preprocessor's. A Sass variable is gone by the time the browser sees the file; a CSS variable can be read at runtime, changed by a media query, overridden on one component, and edited from JavaScript. That last property is what makes theming work. The pattern to follow is two layers. Define your raw values once — the actual colours and sizes — then define semantic names that point at them: `--surface`, `--text-muted`, `--border`. Components only ever reference the semantic names, so a dark theme is a short block that reassigns those names rather than a second copy of your stylesheet. Put the light values on `:root` and the dark ones under both `prefers-color-scheme: dark` and a `[data-theme="dark"]` selector, so the system preference works and an explicit toggle can still override it. Two gotchas. A variable defined on `:root` is inherited, but one defined on a component is only available to that component and its children, which is usually what you want. And the fallback syntax `var(--x, 16px)` is a genuine safety net worth using on anything a consumer might not define.