5 ms·
Six Levels of Dark Mode (2024)
- sambellll 6mo agoWould've been cool if the levels came into effect while you scrolled down the page
- jagged-chisel 6mo agoOr were selectable by the reader at each appropriate position in the page.
- andrehacker 6mo agoObligatory ? https://xkcd.com/3227/ https://xkcd.com/3227/
- mrexroad 6mo agoAh, the unofficial sequel to The Last Question.
- NooneAtAll3 6mo agoso sad that he disabled this ability to propagate to other pages :( it was the first time my eyes got comfortable reading his comics
- everybodyknows 6mo ago2024
- gwern 6mo agoGlad OP got the tri-state toggle right!
- apparent 6mo agoI 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.
- layer8 6mo agoThe 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 6mo agoThis 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.
- f33d5173 6mo agoIt's just n x 2 for light and dark themes.
- hakfoo 6mo agoI 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 6mo agoThe 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.
- stevage 6mo agoIt's 8 levels though?
- zamalek 6mo agoIs there still no way to prevent the flash bang while waiting for initial content from the server?
- pocksuppet 6mo agoDecrease screen brightness. Turn off dark mode. No flashbang. Bonus: Battery lasts longer.
- silverwind 6mo agoUse `background-color` in Firefox's `userContent.css`.
- zamalek 6mo agoI love the idea of ending it for myself, but my users are still screwed?
- akersten 6mo agohow 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 6mo agoI 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 6mo agoThat flashbang happens during the initial latency (DNS, RTT, any server slowness).
- MitPitt 6mo ago
- yyy888sss 6mo agoLevel 9 (or 0): Turn off the computer and go to sleep.
- deleted 6mo ago[deleted]
- chrismorgan 6mo 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.
- lokthedev 6mo ago[dead]
- akersten 6mo agokind 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.
- ChrisMarshallNY 6mo agoLike the xkcd one? https://xkcd.com 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.
- 2ndbigbang 6mo agohttps://xkcd.com/3227/ https://xkcd.com/3227/
- ChrisMarshallNY 6mo agoYup. Thanks!
- WorldMaker 6mo agoThe 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.) It can be an interesting discussion to follow: https://github.com/w3c/csswg-drafts/issues/9660 https://github.com/w3c/csswg-drafts/issues/9660
- Zak 6mo agoIt breaks the zero one infinity rule by supporting an arbitrarily limited number of themes: exactly two. https://en.wikipedia.org/wiki/Zero_one_infinity_rule https://en.wikipedia.org/wiki/Zero_one_infinity_rule
- intronic 6mo agoWhat 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?
- omer_balyali 6mo agoTheming 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.