Does not seem to work in Firefox for Android.
Looking forward to this being implemented. Since my phone is my only OLED display, it's also the only screen where dark mode really makes a big difference in total light emitted.
Dark mode in a website with CSS
91–100 of 191 posts
Re: Dark mode in a website with CSS
#92Earlier quoted context omitted.
The problem is very simple: if you have diagrams with black lines on transparent background it doesn't work with dark background. Many colour choices we do make less sense for dark backgrounds than for light ones. The comment above properly describes the breadth of real problems you might face.
The easy option is to just put a white background behind the diagrams. It might not be as pretty as having the image designed right for a black background but its better than that hack.
that can be like a lighthouse in a dark night. flux can help of course, but if you are serious about supporting dark mode then you should eliminate as much white space as managable.
Re: Dark mode in a website with CSS
#93The problem with all these dark modes is that I end up with 50 shades of grey and things are harder to distinguish because there's no consistency on where to apply the various shades.
It's a testament to how primitive the web is as a platform that it can't do something like apply a universal theme like Windows 3 did.
Re: Dark mode in a website with CSS
#94Earlier quoted context omitted.
And those browser set styles were disgusting so people decided to just style everything themselves
To be fair, the styles they chose were almost never any better than the defaults until the early 2000s or so (and even then it was hit-or-miss) by which time the dream of the web as hyperlinked documents the user could view as they pleased was falling out of fashion in favor of making it flashy brochureware and, soon after, a tightly specified app distribution platform.
I still remember how amazing Pepsi.com was in the mid-90s. They were doing tricks with images and tables even back then.
Re: Dark mode in a website with CSS
#95I love dark mode as a user, but as a developer it terrifies me how much complexity is involved in programming in 2019. At a stroke, it doubles the number of possible combinations of: - 2 device sizes: desktop vs mobile (e.g. responsive) - 3 platforms: web vs iOS vs Android, or web vs Windows vs macOS vs Linux (not even counting cross-browser or OS version quirks), or god forbid all of the above - 2 input methods: hov…
That's a nice way of breaking down the various designs one has to support, 48 is actually quite a lot.
Some teams will start with 'visual' design at the beginning of the process and, in that case, will do the ~48 mockups before any code is written (it's more because there aren't just 2 different screen sizes). It's a more satisfying (and perhaps cheaper) process to develop in stages:
- content hierarchy (what's important on one platform will rarely change between other platforms, despite the developer guessing otherwise)
- interactivity (the platform can most of the time cater to the differences in input if you lean on the platform capabilities)
- style
- Iterate and Perfect on the 48 versions
Re: Dark mode in a website with CSS
#96> Photographs also looked harsh. It turns out that many people prefer images, too, to be desaturated in dark mode This is an interesting choice. While it might be easier on the eyes, personally it feels kind of icky to change colors on images…
Yeah that seems bad. If you choose low contrast fonts, reduce the contrast of photographs to the background by making them darker, etc, it's just like turning down the brightness and contrast of your whole site. If the user thinks the content of your site is still too bright with dark mode on, maybe they should turn down the brightness of their device?
By making everything on your site dark and low-contrast, the implication is that the user wants to see other things on the screen in higher contrast alongside your site, like the UI chrome. That seems unlikely - your site is the most important content that they have on the screen at that time and it should probably have the highest brightness or contrast of anything on the screen, not the lowest.
Re: Dark mode in a website with CSS
#97Earlier quoted context omitted.
If you just want chrome to be dark, you can install a dark theme such as: https://chrome.google.com/webstore/detail/just-black/aghfnjk...
I think you misread > UI chrome Versus > Chrome UI
"UI chrome" refers to the browser UI itself -- everything that is not the web content. what are you referring to?
Re: Dark mode in a website with CSS
#98The 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…
Is there anything which allows user choice (i.e. state) that doesn't involve JS?
Re: Dark mode in a website with CSS
#99The 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…
Is there anything which allows user choice (i.e. state) that doesn't involve JS?
You can use checkbox inputs (the reason why HTML&CSS is turing complete)
Re: Dark mode in a website with CSS
#100The 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…
Is there anything which allows user choice (i.e. state) that doesn't involve JS?
Yes, although doing things without JS is old school web. I think you'd be hard pressed to find any clients that don't support JS in this era.
Anyway, to accomplish this you would split your styles into seperate CSS files and then have a drop-down that does an HTTP POST/GET to a server side script that will then set a cookie on your browser with your preferred choice.
Each time a request comes in from the client you just check that cookie for which style they want and then change the HTML that's sent to include a different stylesheet.