Dark mode has been there for a while now. From apps to websites, its influence on the people has been really great. It's no wonder why everyone wou...
For further actions, you may consider blocking this person and/or reporting abuse
Yeah I know. The other CSS file is basically a copy of the first one with a few things changed. And my main intention was to show the switch of files on a click. Anyways, at the end it still falls down to the dev preference on how to lay things out. And yeah, thanks for pointing things out.π
I like this solution for one reason: it clicked in my head that tags are part of the DOM just like any other element and you can manipulate it with JS. Thanks! π </p>
Glad it helped you in someway!π
Won't this give you a flash of the light theme until the script has loaded on every page?
Ben is mostly correct. The page has to first "disconnect" the current CSS file and then load the second. This will cause a temporary moment when the page doesn't have a CSS file bound to it at all. It will be unnoticeable if the CSS files are small or if all CSS files have been cached locally, but you'll definitely see it if your CSS file is large, if you have multiple CSS files, or if your user's have higher latency.
There may be ways around this including possibly preloading the dark mode CSS.
Yes that is true. For larger files, it'll take a while to fully load the other sheet but there might be a work around. As soon as I figure it out, I'll pen that one too. Btw, thanks for the point!
No it doesn't. I even tried setting a transition, but it still worked smooth and fine.
If using Javascript, why not simply add a class to the body, e.g. "dark-mode" and apply some basic styling overrides in your existing style sheet? No flashes, no new load#/HTTP requests, simply manageable if using a SCSS preprocessor
Yeah we can do that too. But few elements will be left out and will need multiple classes to get dark.
Cool Hack.
Yeah thanks!π
Cool, but there's a typo instead of
the function swapSheet(), it should be switchSheet() as described in the codeThanks. I didn't notice it. Earlier I used a function with that name for same purpose. So I mistyped it here.π
An ever easier way is darkmode.js . Try it out
Sure.π
second this, css variables can help reduce a lot of duplication and should therefore scale better.
Same, its to the point either IE needs to put in the necessary work to be more compatible with the rest of the world or just deprecated itself altogether. Its been a thorn in every web devs heel for decades now to deal with IE compatibility. Safari has done whats necessary to make things easier, why can't Microsoft. Edge was their answer to this and it made nothing any easier.
Devs just need to stop supporting IE altogether. Its ridiculous requirement in 2020 that someone needs IE.
Just let it die.
Cool! One of my favorite methods is to set a main.css file, light-vars.css and dark-vars.css . Then use the same way you mentioned above to switch the variables sheet.
Great!!!
Thank you!π
Too bad you still need a fallback for IE11.
Even bootstrap 5 is dropping support for IE11. It is time to move on. There is no meaning doing extra work to support an old browser.
Yes, please. But commercially this is not (yet) an option in the real business world.
That is were progressive enhancement comes handy. You need not always try to figure out a way for fitting a new feature in an old browser. If the browser dont support it, and if it doesnt add any functional and business value, dont bother providing the same for an old browser. Show website without dark mode in IE.
Totally agree, that is to use sense, and careful choose what you are gonna support or not, not being a religious in every decision
Yeah it's cool. Well done!
Good stuff man!
Thank you so much!πβ€οΈ
Wow !!
Yeah sure. It just depends on the user's preference.π
It's really useful.
wont work in react, or precompiled static sites like gatsby. This is definitely NOT the best way.
Wow! I have bookmarked your site and I wonder how you styled such a nice looking dark mode!
The title should be "Another way to Dark Mode your Website." or "In my opinion, the best way to Dark Mode your Website.".