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.
Like the xkcd one? 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.
Six Levels of Dark Mode (2024)
41–50 of 56 posts
Re: Six Levels of Dark Mode (2024)
#42I 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 com…
I'm the opposite. Anything other than pure white on pure black for dark themes gives me eye strain. If you use the dark reader web extension you can adjust the brightness and contrast to your liking.
Re: Six Levels of Dark Mode (2024)
#43What 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?
Re: Six Levels of Dark Mode (2024)
#44Re: Six Levels of Dark Mode (2024)
#45Earlier quoted context omitted.
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 com…
I'm the opposite. Anything other than pure white on pure black for dark themes gives me eye strain. If you use the dark reader web extension you can adjust the brightness and contrast to your liking.
As it should be - the browser is termed a "user agent" for a reason. There should be browser settings for preferred dark (and light) colour schemes.
Actually - there are to a very small extent. But they are near useless, defining only the colours of uncoloured elements.
Re: Six Levels of Dark Mode (2024)
#46Theming 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.
Re: Six Levels of Dark Mode (2024)
#47I 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 com…
I don't like white text on a pure black background either, but for me the solution is to dim the text, not brighten the background. I can't stand the push away from allowing pure black for OLED devices based primarily on Google's design strategy. Though personally I don't want to force my specific preferences on everyone and instead think people should be able to configure it how it suits them best. That's all I want for myself.
Re: Six Levels of Dark Mode (2024)
#48I 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.
The more universal solution would be to standardize Reader Mode compatibility, and for browsers to let users configure how they want Reader Mode to look. 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 us…
But wait - Reader Mode messes with our branding, nudges, and calls to action, and breaks my sleek, modern animations and scroll effects.
Re: Six Levels of Dark Mode (2024)
#49I 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 com…
there's a firefox (maybe chrome too) extension called dark reader
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
Re: Six Levels of Dark Mode (2024)
#50I 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 com…
Seems like "Reader Mode" ought to be the default for a user agent.