CSS Variable Theme Generator

Create CSS custom property themes: colors, spacing, typography, borders. Light/dark mode switch. Copy :root variables.

Theme Preset

Colors

--color-primary

--color-secondary

--color-accent

--color-success

--color-warning

--color-danger

Light / Dark Mode

--bg-light

--text-light

--bg-dark

--text-dark

Typography

--font-family

--font-size-base

Spacing & Borders

--spacing-unit

--border-radius

--border-color

Preview

CSS Variables Code

More Design Tools tools at toool.cc