8 ms·
Worth noting is that "prefers-color-scheme" works in all major OSes at this point, mobile and desktop. If your site already has a dark theme, there is no reason
by _bxg1 7y ago
Worth noting is that "prefers-color-scheme" works in all major OSes at this point, mobile and desktop. If your site already has a dark theme, there is no reason at all not to be integrating it this way.
Even if you don't have a dark theme already, it's a huge value-add..... (@dang?)
- gwern 7y agoYes, it's such an obscure feature that many of the people who enable it don't even realize it... Ever since I added dark mode to gwern.net, I've been getting or seeing complaints about how my website is broken or 'defaults to black-on-white' (it doesn't). :(
- _bxg1 7y agoHuh... It's weird to me that someone who has that enabled on their OS (even if they didn't realize it) would be upset about it on a website.
- 2038AD 7y agoThat's silly of them. The only problem I've noticed is that images are inverted when they shouldn't be (e.g. on hover or the enlarged view).
- saagarjha 7y agoI enjoy the prefers-color-scheme support!
- chrfrasco 7y agoLooks like we need prefers-prefers-color-scheme
- gwern 7y agoBut then what happens when they forget opting into the opting in?!
- gwern 7y agoIn all seriousness, because people keep not realizing or forgetting, we're adding a 'theme switcher' little widget. I dislike the need, but lots of people genuinely like dark mode, and this seems to be the best compromise.
- arc-in-space 7y agohey gwern, I personally really appreciate the dark mode support.
- Cthulhu_ 7y agoI've had a similar thing where people were complaining our app was in English (it was for a Dutch company), apparently people get confused about the preferences they themselves have set.
- stronglikedan 7y agoIt's funny to me that dark themes seem to be the preferred theme type in online discussions, because in practice, most people I know prefer a light theme on a monitor set to high contrast and relatively low brightness in a well lit setting. I too prefer that, as it seems to reduce (eliminate?) my eyestrain after hours on the computer.
- _bxg1 7y agoI think it depends a lot on age and level of eyesight. I've never once felt eye strain from looking at a dark theme, and if a room is even somewhat dark then a blindingly white screen gives me a headache. I can always fiddle with my brightness as needed for different situations, at least on my phone, but that's kind of a pain. On a desktop monitor it's usually a significantly bigger pain.
- bobthepanda 7y agoI've always heard that you should use an off-white or off-black, and that CSS like #000 or #FFF for backgrounds is a no-no.
- zzo38computer 7y agoIf you do not need coloured text on your web page (due to coloured diagrams, colour coding, etc) then please do not specify colours at all. (If you do need colours, then ensure that all of the colours are specified.)
- imtringued 7y agoI hate it when the font color is set but not the input background. On computers with dark themes this can result in black on black text. There are workarounds in Firefox and I use them but this cost me more time than necessary.
- XelNika 7y agoThere's no real consensus. Try this site: https://contrastrebellion.com/ https://contrastrebellion.com/
- unlinked_dll 7y agoIt's also completely broken when using GTK themes with Firefox installed with snap.
- AnIdiotOnTheNet 7y agoFascinating, they're still Win95's ability to customize color schemes.
- dredmorbius 7y agoI think you a word.
- AnIdiotOnTheNet 7y agoIndeed. For the record, that word was 'behind'.
- noisem4ker 7y agoEven Windows 3 and possibly earlier editions allowed way more theme customization than a simple choice between light or dark.
- worble 7y agoI'm sure someone will call me a slowpoke on this, but one really cool thing that I didn't know about until recently was that you can also use this in images with srcset's, to display a darker image. For example, if you want to put the "Made with Bulma"[0] tag on your website, they offer a light and dark version, which you could use like this: <picture> <source srcset="made-with-bulma__dark.png" media="(prefers-color-scheme: dark)"> <img alt="Made with bulma" src="made-with-bulma" width="128" height="24"> </picture> This will automatically replace with the image src when the srcset criteria is met, but keep all the other tags! [0]https://bulma.io/made-with-bulma/ https://bulma.io/made-with-bulma/
- badrchoubai 7y agoI hadn’t known exactly what srcset did until reading this, thank you!