Theme Builder
The site ships with twenty-three color themes in the header picker — this page lets you build the twenty-fourth. Pick four colors and the builder derives a complete palette (accents, secondary text, borders, glows), checks readability against WCAG contrast targets as you go, and applies it live. Your palette is saved in this browser and selected like any other theme, under “Custom” in the theme picker.
Design your palette
How it works
- Four picks, full palette. You choose the page background, card background, accent, and text color. The builder derives the rest the same way the built-in themes do: a brighter accent for hovers, a 40%-alpha glow, dimmed secondary and muted text, and a border tone mixed between surface and text.
- Contrast guardrails. Every combination that matters for reading — text on page, text on cards, button text on accent, secondary text — is checked against the WCAG AA target of 4.5:1 as you pick, with live pass/fail readouts.
- Saved on this device. The palette lives in your browser alongside your other preferences; nothing is uploaded. Pick “Custom” in any page’s theme picker to use it, or switch back to a built-in theme any time.
Illustrated reference
Readable themes and useful embeds
Make a readable theme: Color should reinforce labels rather than replace them. Choose: Select a small, consistent set of colors. Check: Use the contrast checks on real text/background pairs. Preview: Inspect both small labels and main headings.
Place a useful widget: Copy the site-provided embed for the selected widget. Pick: Choose a chord, fretboard or progression widget. Context: Add a title and explain what the reader should try. Test: Check keyboard use and narrow-screen sizing.