Six Levels of Dark Mode (2024)(cssence.com) |
Six Levels of Dark Mode (2024)(cssence.com) |
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
I've been spending some time creating a Visual Studio theme using this palette and the way that IDE uses colors is... less than great. Trying to find the right token to change is an exercise in madness, and many things that are visually the same in importance/hierarchy use very slightly different shades for some unknown reason.
Actually - there are to a very small extent. But they are near useless, defining only the colours of uncoloured elements.
There's no reason a webpage shouldn't be as themable as, say, a GTK or Qt based desktop application.
We should be trying to snatch back styling power from the designers and putting it back on the user-agent's side. Let the page look brutalist until the user has chosen an appropriate theme for their needs rather than railroading them into what someone in Marketing decided looked good.
on Gnome i've got system-wide dark mode turned on and idk, my Firefox is dark gray until it gets any content. so users have the power and should exercise it to tailor their experience as they wish