Theme Editor

Accessibility & Modes

WCAG mode

Enforces contrast limits; blocks failing selections and suggests fixes.

Grayscale preview

Does not change saved colors

Color System

HEX, RGB, HSL supported

Typography

Font family

Base size (px)

Line height

Heading scale

Controls H1–H6 size rhythm

Palette

Apply selected swatch to

Live Contrast Indicators

Mode: Off

Pair	Ratio	Status

Load / Save Settings (JSON)

The configuration below updates in real-time. You can copy it directly.

Design your theme

Change colors, fonts, and accessibility settings on the left. Try focusing and hovering elements to validate contrast.

Card Title

This is an example card. Learn more

Primary Action

Accessibility

WCAG AA/AAA enforcement helps ensure legible designs.

Read docs

Typography

Adjust base size, line height, and heading scale.

Try it

Links & States

Hover links, press buttons, and tab to focus.

See states

Cards & Buttons

Set tile and button colors, borders, and outlines.

Customize

Grayscale

Toggle a grayscale preview without changing saved values.

Preview