Theme Builder demo
Theme builder
Theme name
Base look
Bootstrap
Material
Tailwind
Start from a preset
Bootstrap
Material
Tailwind
Load preset
Light mode colors
Primary
Buttons, links, active tabs, the current page, calendar events.
Primary, hovered
Hovered and pressed buttons, hovered links.
Text on primary
Text and icons on the primary color.
Background
Page background.
Text
Body text.
Muted text
Help texts, captions, placeholders.
Surface
Grid header, upload area, toolbars.
Border
Dividers and decorative borders.
Field border
Borders of form fields (3:1).
Error
Error messages and invalid fields.
Dark mode colors
Primary
Buttons, links, active tabs, the current page, calendar events.
Primary, hovered
Hovered and pressed buttons, hovered links.
Text on primary
Text and icons on the primary color.
Background
Page background.
Text
Body text.
Muted text
Help texts, captions, placeholders.
Surface
Grid header, upload area, toolbars.
Border
Dividers and decorative borders.
Field border
Borders of form fields (3:1).
Error
Error messages and invalid fields.
Shape
Corner radius (rem)
0.375
Font
Family names and generic families, e.g. "Inter, system-ui, sans-serif". Leave it empty to keep the base look's font.
Container shadow
Base look default
None
Subtle
Elevated
Outlined
Contrast (WCAG 2.2 AA)
Every pair meets its minimum.
Pass
Light · Body text: 15.42:1 (needs 4.5:1)
Pass
Light · Muted text (help, captions): 6.72:1 (needs 4.5:1)
Pass
Light · Text on surfaces (grid header, upload area): 14.63:1 (needs 4.5:1)
Pass
Light · Muted text on surfaces: 6.38:1 (needs 4.5:1)
Pass
Light · Links and outline buttons: 4.50:1 (needs 4.5:1)
Pass
Light · Hovered links: 6.43:1 (needs 4.5:1)
Pass
Light · Primary button label: 4.50:1 (needs 4.5:1)
Pass
Light · Hovered primary button label: 6.43:1 (needs 4.5:1)
Pass
Light · Error messages: 4.52:1 (needs 4.5:1)
Pass
Light · Form field borders: 4.68:1 (needs 3:1)
Pass
Dark · Body text: 11.84:1 (needs 4.5:1)
Pass
Dark · Muted text (help, captions): 7.43:1 (needs 4.5:1)
Pass
Dark · Text on surfaces (grid header, upload area): 10.22:1 (needs 4.5:1)
Pass
Dark · Muted text on surfaces: 6.41:1 (needs 4.5:1)
Pass
Dark · Links and outline buttons: 6.38:1 (needs 4.5:1)
Pass
Dark · Hovered links: 8.72:1 (needs 4.5:1)
Pass
Dark · Primary button label: 8.69:1 (needs 4.5:1)
Pass
Dark · Hovered primary button label: 11.87:1 (needs 4.5:1)
Pass
Dark · Error messages: 6.10:1 (needs 4.5:1)
Pass
Dark · Form field borders: 5.07:1 (needs 3:1)
Undo
Reset
Download CSS
Download JSON
Copy PHP
Import JSON
Preview
Preview mode
Light
Dark
Name
*
E-mail
*
This e-mail is already registered.
We never share your e-mail.
I accept the terms
Create account
Users
Name
E-mail
Ada Lovelace
ada@example.com
Alan Turing
alan@example.com
Grace Hopper
grace@example.com