Captain Share
Curated directory of sharing economy resources to save money
Start new thread

Darkmode Widget - Add a dark-mode to your website in a few seconds 🌓

by•
A plugin that adds a dark-mode / night-mode to your website. Just copy paste the snippet, and that's it!

Add a comment

Replies

Best
You're doing the Lord's work, Sandoche.
Maker
Thanks a lot David !

I added it in 15 minutes in Nav of and it just works. Some minor issues are much probably related to my own style mess

Pros:

Add DM in minutes and looks just great

Cons:

Nothing to claim

Nothing to say it's too good.
I love how easy it was to enable dark mode in my websites using this. Good job!
Maker
I'd love to have this on my website but I just can't make it work. T_T
that's weird... Did you copy-paste the entirety of both scripts just above your tag?
I copy-pasted the one from the first picture
Maker
I'll have a look and contact you don't worry
Great!But it works in index page only T_T wordpress website
Maker
Thanks, you need to have the script in everypage. There are probably Wordpress extensions to inject code in every pages.
thanks，I will try it ：）
Super cool, been wanting this for ages because I can't make it myself yet. Although, I tried it on a new portfolio I'm making with Webflow and it didn't quite work. It does work for the most part but some of the normally black text does not turn white but instead dark gray, so it's almost invisible on the black background. I've no idea why that is.
Maker
Sometimes it doesn't work fully when elements uses z-index attributes. But if you have the control over your css you can use these classes and css properties to customize it: . So yeah even though I say it enables dark mode in a few seconds, sometimes it takes a few minutes more :)
Thats for the help! I noticed the z-index issue but the thing is, it doesn't work on some buttons and text that have 0 z-index... I will try the manual CSS fix once I'm done making the site! Even if it doesn't work perfectly for me, what you've made is still a really important and valuable. Even though it's relatively easy for I developer to implement it on websites/webapps, most don't!
Maker
Maybe try using "mix-blend-mode: difference;" if the z-index don't work.
thank you I will try it and let you know how it went
This needs to be more popular!
Would be a cool feature to have a hotkey for it. Like pressing N (for night) or L (for light switch on/off). abduzeedo.com does it, but in their site you can switch modes while typing in inputs, which is bad.
Adding dark mode to new Vue projects takes time. This is instant. Great idea!
First
Previous
1234
Next