CSS custom properties (variables) are one of the most powerful features added to CSS in the last decade. They enable dynamic theming, dark mode, design systems, and component-level styling without preprocessors. Yet most developers learn them through documentation or trial and error — no interactive tool exists for designing semantic color themes and seeing them applied to real UI components in real time.
Var Paint is a CSS custom properties theme studio. Design a complete color system with semantic variable names, preview it on live UI components (dashboard, elements, typography), toggle between dark and light modes, and export production-ready CSS. It covers base colors, UI colors, and semantic colors — everything you need for a functional design system.
Each color variable in the sidebar maps to a CSS custom property. When you change a color, the preview panel re-applies all variables instantly using setProperty() on the preview frame element. The preview components use only CSS variables for their colors, so every change propagates everywhere. The export generates clean CSS with both :root and [data-theme="light"] selectors for dark/light mode support.