I thought this was going to be about how people prefer different levels of blackness for the background in dark mode. I've heard people say that pure black is more battery efficient for OLED displays (but don't know if this is true), and I know some folks prefer a less-inky grey.
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 do wish there was more conversation around the levels of blackness for dark modes. Black screen and white text is physically painful for me. I usually have to resort to reader mode, or open up dev tools and change colors myself, to make a page like this readable for me.
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.
It is significantly more efficient for oled displays, as off oleds don't use power. It also causes burn in on a smaller part of the display which is usually good (but this could end up being a disadvantage over time as the burn in contrast is higher).
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
A small blocking `<script>` in the `<head>` that reads the saved preference from localStorage and sets a class on `<html>` before any rendering happens is the standard approach. You can also set `<meta name="color-scheme" content="dark light">` which tells the browser to use the OS preference for the initial paint, covering the default case without any JS at all.
Came here for this. I hate it too. When I make a site with dark mode, I make sure the dark color loads by default and then changes to light if needed to address this specific issue.
> Dedicated files make sense if you do a lot of customization. The browser may ignore any CSS file that does not match the query, so there’ll be one less thing to download.
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.
kind of sad that the CSS specification wound up with this clunky `light-dark(white,black)` thing instead of literally anything more extensible like, `themed(dark(black), light(white), retro(purple))`.
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.
The proposers of `light-dark()` themselves recognized that `light-dark()` was presumably a "stepping stone" towards (and then eventually just a shorthand for) a deeper `schemed-value()` function similar to what you are asking for, once CSS also picked up a way to define custom color schemes. (Often proposed as an `@color-scheme` rule or block.)
What is the recommended way to add support for additional functional themes to support users like colour vision friendly, high contrast for poor vision, daylight mode, and night vision preserving (no blue channel) - rather than just light/dark?
Theming vocabulary is a mess. "Theme", "mode", "scheme", and "palette" are used interchangeably even though they describe completely different layers of abstraction.
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.
21 comments
[ 2.8 ms ] story [ 53.2 ms ] threadI 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.
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
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.
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.
https://xkcd.com
Not sure if it shows up for everyone, but there was a popover under the comic that did all kinds of crazy themes.
It can be an interesting discussion to follow: https://github.com/w3c/csswg-drafts/issues/9660
https://en.wikipedia.org/wiki/Zero_one_infinity_rule
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.