Naïvely I tried to do this by overriding a few custom properties and using filters. My site has a position: sticky nav, and filters introduce a stacking context, so things which filters apply to naturally go on top of the nav when before they went behind. A minor annoyance, but it demonstrates how introducing a dark mode isn’t as straight forward as I thought it would be.
Dark mode in a website with CSS
151–160 of 191 posts
Re: Dark mode in a website with CSS
#152I did this recently for my new personal website! It's quite easy and really satisfying. I love doing as much as possible in stateless CSS instead of JavaScript. http://www.brandonsmith.ninja/
Did this about six months ago over at my site. Was annoying to get it right but glad I did. Some people find these kinds of sites pointless these days, but I enjoy keeping one even if I rarely update it anymore. Spirit of the web and all that. https://rymc.io/
Irrelevant but I wanted to thank you for the Old Reddit extension for Safari. That makes Reddit somewhat bearable again, although it still seems to lag while it loads their stupid new UI before doing the redirect (not sure if there's any way to avoid that).
Re: Dark mode in a website with CSS
#153Now if only Hacker News would implement it!
Save this as userscript, or convert to bookmarklet. document.body.style.filter = "invert(1)"; document.body.style.backgroundColor = "#141414"; I use a fine tuned custom stylesheet with Stylus chrome extension.
That actually works amazingly well! Nice!
Re: Dark mode in a website with CSS
#154Where did this dark mode craze come from? Don't get me wrong - I quite enjoy dark mode most of the time, but why now and not earlier?
I feel like it leaked from developer software engineering culture into the mainstream.
Dark mode on text editors has been a thing for a long time,
I’m guessing a few people finally decided to do it in other places.
Re: Dark mode in a website with CSS
#155The problem is that this doesn't let the user toggle dark mode on/off. If you want the user to be able to toggle dark mode on your site without changing their Operating System preferences, then you'll need to implement your dark theme as a class (eg. body.theme-dark) since there's no way to dynamically set the media query. const darkMode = window.matchMedia('(prefers-color-scheme: dark)') if (darkMode) { document.bod…
To me it seems like now that all browsers support the prefers-color-scheme media query, it’s no longer a best practice to allow/force users to toggle between light and dark theme separately from the OS. Centralization of config is a good thing, freeing people from rote work.
I don't particularly care for dark mode in web pages, however iOS apps which allow theming should allow the themes to be set independently of iOS.
For instance, the first version of Tweetbot for iOS 13 wouldn't allow you to choose a dark theme if iOS was set to use a light theme.
This was quite frustrating because I like Safari in light mode, but I like Tweetbot, iBooks, Kindle, etc in dark mode. This always has always worked and I'd see a different behaviour as a regression. That said Tweetbot fixed the issue very quickly (in a day).
Re: Dark mode in a website with CSS
#156Earlier quoted context omitted.
Why mess with content colors? Just leave the images.
If you have a lot of images with white backgrounds, that's going to defeat the purpose of Dark Mode. Some people prefer dark mode because they suffer migraines and bright lights are a problem when they have a migraine. Or homeless people may be using it for both stealth purposes and battery conservation when they have limited opportunities to recharge. For some people, this preference is not just some minor detail. I…
What about browser addons like Dark Reader? Would that make more sense than relying on thousands of sites to have a reliable dark mode (when the vast majority won't support any kind of dark mode anyway)?
Re: Dark mode in a website with CSS
#157Earlier quoted context omitted.
If you have a lot of images with white backgrounds, that's going to defeat the purpose of Dark Mode. Some people prefer dark mode because they suffer migraines and bright lights are a problem when they have a migraine. Or homeless people may be using it for both stealth purposes and battery conservation when they have limited opportunities to recharge. For some people, this preference is not just some minor detail. I…
What about browser addons like Dark Reader? Would that make more sense than relying on thousands of sites to have a reliable dark mode (when the vast majority won't support any kind of dark mode anyway)?
I was internet acquainted for a time with someone suffering chronic migraines. She said she could not do anything with browsers most of the time and switching her phone to dark mode was a problem because it just flipped the colors for everything.
She spent her time on Twitter because it has a terrific dark mode. She couldn't get other things to work for her.
So people who are very photophobic are apparently not finding adequate accommodation for their needs. I poked around a bit after talking to her and confirmed that her criticisms were valid. The current available options don't work well for trying to surf the internet under such constraints.
I'm not advocating that anyone do anything in particular. I'm just talking about use cases I have a little knowledge of. That's it.
Re: Dark mode in a website with CSS
#158One of my (maybe unwarranted) concern with automatic dark mode, is the potential ability of the browser and apps to determine my (very) coarse location based on when the dark mode is enabled or not, as it because another potentially identifying info among others.
Does that kind of CSS allows a script to determine if the browser is displaying dark mode or not, or send back that information to ads servers?
Re: Dark mode in a website with CSS
#159Earlier quoted context omitted.
To me it seems like now that all browsers support the prefers-color-scheme media query, it’s no longer a best practice to allow/force users to toggle between light and dark theme separately from the OS. Centralization of config is a good thing, freeing people from rote work.
I don't particularly care for dark mode in web pages, however iOS apps which allow theming should allow the themes to be set independently of iOS. For instance, the first version of Tweetbot for iOS 13 wouldn't allow you to choose a dark theme if iOS was set to use a light theme. This was quite frustrating because I like Safari in light mode, but I like Tweetbot, iBooks, Kindle, etc in dark mode. This always has alwa…
Why do you like Safari in light mode, or dislike it in dark mode? Are you referring mostly to the app chrome or to the content of the sites you visit?
I would tend towards ease of configuration and consistency, and would only make exceptions for apps/sites with more theme choices than just light/dark.
Re: Dark mode in a website with CSS
#160I apologize for my ignorance, but could somebody explain the need for dark mode? I know that it's bad to have a phone glow in your face when your eyes are adjusted to the dark, but don't most phones automatically lower the brightness? That seems to work well enough for me. Perhaps a specific dark mode could do it better, if well designed, but most sites have a hard enough time doing one good color scheme.
I know some people would prefer a light-on-dark color scheme in general, even during the day. Is this entirely about what you see in the dark, or is there a component of wanting more "skins" in general?