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.
apparent 18 hours ago [-]
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.
Tallain 11 hours ago [-]
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.
2ndbigbang 7 hours ago [-]
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.
dotancohen 6 hours ago [-]
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.
duskdozer 5 hours ago [-]
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.
nextaccountic 5 hours ago [-]
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
wffurr 4 hours ago [-]
Seems like "Reader Mode" ought to be the default for a user agent.
bryanhogan 8 hours ago [-]
Pure black background with pure white elements is a common accessibility issue.
And just curious, why would using "only" 16 colors be silly?
Tallain 58 minutes ago [-]
Maybe silly is the wrong word. But sometimes I think I would make things easier on myself if I allowed some shade variants. It's good for me to keep the constraint though.
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.
layer8 16 hours ago [-]
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 user preferences.
apparent 14 hours ago [-]
This likely would have happened already if it weren't for Google's hostility to Reader Mode. It's hilarious to see the Reader Mode that they offer, where it's a resizable 2-column view, to ensure that ads are loaded and kept in sight. We get it, Google: you don't want to endanger your ad revenue.
duskdozer 5 hours ago [-]
But wait - Reader Mode messes with our branding, nudges, and calls to action, and breaks my sleek, modern animations and scroll effects.
a96 10 hours ago [-]
Shh, don't tell web designers about reader mode! They'll try to break it!
f33d5173 14 hours ago [-]
It's just n x 2 for light and dark themes.
hakfoo 12 hours ago [-]
I feel like we could go beyond that, especially for more app-like experiences. Maybe we want themes that do things like "add specific trim to make editable fields more identifiable." or adding "high contrast" versions of the themes for low-quality screens or low-vision users.
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.
layer8 10 hours ago [-]
The comment I was responding to was suggesting n x 6. And there are also aspects beyond brightness and contrast, like font styles and sizes, line height and margins, justification and hyperlink style, and so on. The things you can or want to configure in an e-book reader.
literalAardvark 10 hours ago [-]
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
gruez 14 hours ago [-]
>I've heard people say that pure black is more battery efficient for OLED displays (but don't know if this is true)
Did you even read before pasting?
Yes technically it is, which would indeed be in line with "levels of dark mode".
mudkipdev 13 hours ago [-]
Grayish dark themes are underrated
t-writescode 15 hours ago [-]
for OLEDs, I tend to prefer pure black because it doesn't burn-in. Since they have a limited lifetime, any "on" time is costing me usage in the long-long-long run and I'd rather have my monitor last 5+ years than ... 2 or 3.
gruez 14 hours ago [-]
>any "on" time is costing me usage in the long-long-long run and I'd rather have my monitor last 5+ years than ... 2 or 3.
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.
akersten 11 hours ago [-]
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.
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?
zamalek 17 hours ago [-]
Is there still no way to prevent the flash bang while waiting for initial content from the server?
ethan_smith 9 hours ago [-]
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.
Izkata 3 hours ago [-]
That's still after the server's response arrives, they're talking about the blank browser page before anything comes back in the response.
silverwind 16 hours ago [-]
Use `background-color` in Firefox's `userContent.css`.
zamalek 15 hours ago [-]
I love the idea of ending it for myself, but my users are still screwed?
akersten 11 hours ago [-]
how your users' browsers choose to render `about:blank` while waiting on your page to be delivered is outside of both your control and concern
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
jagged-chisel 14 hours ago [-]
I don't know if I misunderstand the problem, but what about a style tag at the earliest part of the page indicating the background color to use?
zamalek 14 hours ago [-]
That flashbang happens during the initial latency (DNS, RTT, any server slowness).
MitPitt 14 hours ago [-]
make dark mode the default, then it's a flash of dark in either case
NSPG911 14 hours ago [-]
send a blank black page then load from there?
pocksuppet 17 hours ago [-]
Decrease screen brightness. Turn off dark mode. No flashbang. Bonus: Battery lasts longer.
yyy888sss 17 hours ago [-]
Level 9 (or 0): Turn off the computer and go to sleep.
gwern 18 hours ago [-]
Glad OP got the tri-state toggle right!
chrismorgan 15 hours ago [-]
> 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.
sambellll 18 hours ago [-]
Would've been cool if the levels came into effect while you scrolled down the page
jagged-chisel 14 hours ago [-]
Or were selectable by the reader at each appropriate position in the page.
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.
Actually - there are to a very small extent. But they are near useless, defining only the colours of uncoloured elements.
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?
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.
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.
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.
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.
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.
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
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