3 ms·

Can someone share a guide or how to for detecting the device’s preference and honouring that? That sounds optimal.

Zak 2y ago
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
ss64 2y ago
It is built into the CSS standard /* Dark mode */ @media (prefers-color-scheme: dark) { ... } The issue with both dark and light modes is so many designers seem to have jumped onto the idea that colour schemes have to be either bright white or darkest black. I'd much rather see colours that are 'slightly darker' at night and 'slightly lighter' in the daytime. For one thing there are still so many websites with no colour schemes setup at all so if you avoid going to extremes it minimises the contrast difference.
- bee_rider 2y ago
  The dark mode background should be actually black so our OLED screens can turn their pixels off completely.
  - ss64 2y ago
    OLED displays can still save energy even when they are not displaying absolute black https://news.ycombinator.com/item?id=34069781 https://news.ycombinator.com/item?id=34069781
    - bee_rider 2y ago
      But it is pretty linear, so blacker is better, and the darker the black is the darker the white can go while still maintaining contrast, right?
- Springtime 2y ago
  The other issue is many sites don't use that CSS media query at the minimum for auto setting the theme. They instead use a Javascript approach that often involves local storage/cookies even if no choice is made, which doesn't work if those are blocked and/or Javascript disabled. In such cases the default theme is forced. The optimal approach is applying the appropriate `prefers-color-scheme` using CSS alone, while additionally allowing a theme override using JS/storage. Fewer do this though, even though it wouldn't require any cookies and thus no consent dialog. The worst are sites that only have theme switching gated behind registration.
duncan-donuts 2y ago
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
bee_rider 2y ago
Firefox has a default color for text and background. I wonder, if you just don’t set a color, is that what gets used?
Theodores 2y ago
The truth is that you need to do device detection, so the @prefers CSS stuff, then you need to have a toggle to over-ride things. Then you need some javascript to store the preference in local storage. On page load you get your javascript to check the mode and check the override to add a class to the whole page. It is this class that implements the desired light or dark theme. Fighting against you is what the browser is doing. You can put a meta tag in to force it to respect one theme or the other so it does not go freestyling. People that have a page permanently set to light mode (or dark mode) have put in the meta tag but they haven't done the extra work to implement some meaningful choice. In summary, there is auto, where the browser does its best, one mode enforced with a meta tag, then a full solution where there is a pretty button on the page and some javascript to honour the preference, keeping the preference in local storage. Bonus points for adding an event observer to detect the change in preferences from outside the browser or in dev tools. More bonus points for having no FOUC. Extra, extra bonus points, is to implement not just a 'dark mode', but a DARK mode. In light mode everything is kittens and rainbows, whereas in dark mode the content is kind of gruesome and 'dark'. Any subject can be treated this way, a page on say, watermelons could be full of tasty recipe ideas in light mode, but, in dark mode, it could be about dropping them off tall buildings with busy streets below...

Zak 2y ago

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

ss64 2y ago

It is built into the CSS standard /* Dark mode */ @media (prefers-color-scheme: dark) { ... } The issue with both dark and light modes is so many designers seem to have jumped onto the idea that colour schemes have to be either bright white or darkest black. I'd much rather see colours that are 'slightly darker' at night and 'slightly lighter' in the daytime. For one thing there are still so many websites with no colour schemes setup at all so if you avoid going to extremes it minimises the contrast difference.

bee_rider 2y ago
The dark mode background should be actually black so our OLED screens can turn their pixels off completely.
- ss64 2y ago
  OLED displays can still save energy even when they are not displaying absolute black https://news.ycombinator.com/item?id=34069781 https://news.ycombinator.com/item?id=34069781
  - bee_rider 2y ago
    But it is pretty linear, so blacker is better, and the darker the black is the darker the white can go while still maintaining contrast, right?
Springtime 2y ago
The other issue is many sites don't use that CSS media query at the minimum for auto setting the theme. They instead use a Javascript approach that often involves local storage/cookies even if no choice is made, which doesn't work if those are blocked and/or Javascript disabled. In such cases the default theme is forced. The optimal approach is applying the appropriate `prefers-color-scheme` using CSS alone, while additionally allowing a theme override using JS/storage. Fewer do this though, even though it wouldn't require any cookies and thus no consent dialog. The worst are sites that only have theme switching gated behind registration.

duncan-donuts 2y ago

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

bee_rider 2y ago

Firefox has a default color for text and background. I wonder, if you just don’t set a color, is that what gets used?

Theodores 2y ago

The truth is that you need to do device detection, so the @prefers CSS stuff, then you need to have a toggle to over-ride things. Then you need some javascript to store the preference in local storage. On page load you get your javascript to check the mode and check the override to add a class to the whole page. It is this class that implements the desired light or dark theme. Fighting against you is what the browser is doing. You can put a meta tag in to force it to respect one theme or the other so it does not go freestyling. People that have a page permanently set to light mode (or dark mode) have put in the meta tag but they haven't done the extra work to implement some meaningful choice. In summary, there is auto, where the browser does its best, one mode enforced with a meta tag, then a full solution where there is a pretty button on the page and some javascript to honour the preference, keeping the preference in local storage. Bonus points for adding an event observer to detect the change in preferences from outside the browser or in dev tools. More bonus points for having no FOUC. Extra, extra bonus points, is to implement not just a 'dark mode', but a DARK mode. In light mode everything is kittens and rainbows, whereas in dark mode the content is kind of gruesome and 'dark'. Any subject can be treated this way, a page on say, watermelons could be full of tasty recipe ideas in light mode, but, in dark mode, it could be about dropping them off tall buildings with busy streets below...