Lessons · HTML and CSS · a dark theme is all new pairs
A dark theme is all new pairs
Adding a dark theme means every colour pair on the site is a new pair, and all of them need checking again.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
The extremes are safe by definition. It is the mid-greys chosen to be 'a bit quieter' that were near the line already, and secondary text is exactly where those live.
How to think about it
Define the palette as tokens and check the tokens. Two dozen pairs instead of two hundred components, and it catches the failure before anybody builds on it.
Worked example
body { background: #fff } p { color: #767676 }4.54 -- passes.body { background: #111 } p { color: #767676 }4.16 -- fails, and nothing about the CSS looks different.Your turn
Check the palette once by checking the
Write a page and watch it render
The trap
Text, borders, disabled states, focus rings and chart colours are all pairs. People check the paragraphs and forget the other five.