Neon DistrictISSUE #29 of 50

forms · accent-color · color-scheme

PrismaVSJank the Janitor

Prisma saysaccent-color themes native checkboxes, radios, and ranges; color-scheme themes built-in UI.

accent-color: #b388ff recolors the checked/active state of checkboxes, radios, range sliders, and progress bars — one line, no custom widget. color-scheme: dark tells the browser to render native controls in dark mode. Both let native UI match your brand cheaply.

Power-ups you unlock

accent-color themes checkboxes/radios/ranges
color-scheme themes native controls & scrollbars
One line vs rebuilding custom widgets
Keeps native accessibility intact

Jank the Janitor attacks — common mistakes

Rebuilding checkboxes when accent-color suffices
Forgetting color-scheme so date pickers clash
Accent color with poor contrast

Boss battleSet accent-color on checkboxes and a range, then add color-scheme:dark.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>:root{color-scheme:dark}body{accent-color:#b388ff;background:#06040d;color:#e6e0ff;padding:20px}</style></head><body><label><input type="checkbox" checked> themed</label><br><br><input type="range"></body></html>

▶ Open the interactive comic issue

‹ Forms · Styling Inputs · Select · Textarea Counters · Counter-Reset · Counter-Increment ›