CSS Variable Theme Builder

How to Use the CSS Theme Builder

1. Edit variables — use the color pickers or type hex values directly in the Edit tab. The mock dashboard updates instantly.
2. Check the preview — the mock dashboard shows a simulated navigation bar, sidebar, cards, badge, and input field all driven by your custom properties.
3. Export your theme — switch to the Export tab to copy or download the :root CSS block. Paste it into your project's stylesheet.

Understanding CSS Custom Properties

CSS custom properties (informally called CSS variables) are one of the most powerful modern CSS features. They let you define reusable values in one place and reference them throughout your stylesheet using the var() function. Unlike preprocessor variables in SASS or Less, CSS custom properties are dynamic — they live in the DOM, respond to cascade and inheritance, and can be changed at runtime with JavaScript.

Scope and Cascade

Custom properties follow the same cascade rules as regular CSS properties. Variables defined in :root are globally available. Variables defined in a component class override the global value for that component's subtree. This means you can define a global --primary and override it locally with .danger { --primary: #ef4444; } to theme a dangerous section differently without changing the global palette.

Dark Mode with CSS Variables

CSS variables are the standard approach to implementing dark mode. Define light values in :root, then override only the color tokens inside @media (prefers-color-scheme: dark) { :root { ... } } or on a [data-theme="dark"] attribute. Your layout, spacing, and typography don't need to change — only the semantic color tokens. This approach scales to large design systems without duplication. For an example, see how ThisDevTool's own theme toggle switches between light and dark palettes using this exact pattern.

Naming Conventions

The most maintainable naming convention separates semantic names from literal color names. Rather than --blue, use --color-primary. Rather than --gray-100, use --color-bg. Semantic names decouple your components from specific hues — if you rebrand from blue to green, you change one value in one place, not hundreds of references. Common token categories: color (background, surface, border, text, primary, secondary, accent, error, success), spacing (space-xs through space-2xl), and typography (font-size, font-weight, line-height).

JavaScript Integration

CSS variables can be read and written via JavaScript: getComputedStyle(document.documentElement).getPropertyValue('--primary') reads the current value, and document.documentElement.style.setProperty('--primary', '#3b82f6') overrides it at runtime. This enables dynamic theming (user color pickers), animation (incrementing a variable with requestAnimationFrame), and conditional styling based on data.