My mental model is as follows:
- Palette: All primitive color values.
- Luminance mode: light and dark modes (what CSS and operating systems call "color scheme").
- Contrast mode: Default and high-contrast modes.
- Color Theme: The named aesthetic identity like "espresso", "summer"... expressed as palette values mapped to semantic roles (surface, primary, text…), defined for each luminance × contrast combination.
For example, a website might have:
- 3 color themes: "monochrome", "espresso", "summer".
- Each color theme might support luminance modes, like "espresso-light" and "espresso-dark".
- Each luminance mode might support contrast modes as well, "espresso-dark-default" and "espresso-dark-high-contrast".
- Palette is all the values that "espresso" color theme consists of including luminance and contrast mode values.
The combinatorial complexity might look scary but most products only need a slice of it: two luminance modes, no contrast modes, one color theme.
I was wondering how there could be six levels though; I'd think 3 or 4 would be the most anyone could notice or care about.
I appreciate how hard it can be to make a good dark mode; I've spent months building a custom dark theme I term "mid-contrast". It's still WCAG compliant, but easy on my eyes, and I've stuck with the (maybe silly?) requirement of 16 colors only, like Solarized.
not only it wil dark-ify pages that don't support dark mode, it will alter the tone of dark mode pages to a more enjoyable (i like to add some pastel colors)
for dark mode pages that are already perfect, you can disable it on a per page basis
only trouble i had so far is that disabling or enabling happens per-site. so I can't have dark mode on google, disabling it on google maps
And just curious, why would using "only" 16 colors be silly?
In other words, instead of an n x m solution where every web site has to cater to each different user preference, there should be a simplified content view that every web site only has to support in a singular way, and that allows browsers to cater to the various user preferences.
It's also more efficient for led matrix backlights.
Edit: sorry, realized this is misleading: my testing was with light vs dark, not something like dark grey vs 00 black
No.
https://www.xda-developers.com/amoled-black-vs-gray-dark-mod...
Going from dark gray to pure black isn't going to halve your monitor expectancy, if it makes a difference at all. Due to how human perception works something that's merely dark gray is actually orders of magnitude brighter than pure white, or even 50% gray. Therefore most of your burn-in is going to be driven by bright content like photos or white text, not whether you're using 5% gray vs pure black.
Then you'd be able to have a cool theme dropdown like sites used to have, fully CSS-driven with essentially no JS required, in a compatible and modern way.
It can be an interesting discussion to follow: https://github.com/w3c/csswg-drafts/issues/9660
Not sure if it shows up for everyone, but there was a popover under the comic that did all kinds of crazy themes.
That’s not how it actually works: in practice, browsers download them all. They may prioritise them differently, but they’ll still download them all in the end.
it was the first time my eyes got comfortable reading his comics
