Farbod Saraf

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
David V. Kimball
You're doing the Lord's work, Sandoche.
Sandoche
@davidvkimball Thanks a lot David !
Fullstack news & jobs

I added it in 15 minutes in Nav of https://fullstackjob.com 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

Mildred Alex
Nothing to say it's too good.
Paschalis Tsolakidis
I love how easy it was to enable dark mode in my websites using this. Good job!
Sandoche
Tepes Ovidiu
I'd love to have this on my website but I just can't make it work. https://cessabit.crevasse.co T_T
Anna Filou
@ovidiutepes that's weird... Did you copy-paste the entirety of both scripts just above your tag?
Tepes Ovidiu
I copy-pasted the one from the first picture @anna_0x
Sandoche
@anna_0x @ovidiutepes I'll have a look and contact you don't worry
Kevin Xie
Great!But it works in index page only T_T wordpress website
Sandoche
@new_user_cca5c9dab6 Thanks, you need to have the script in everypage. There are probably Wordpress extensions to inject code in every pages.
Kevin Xie
@sandochee thanks,I will try it :)
Anna Filou
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.
Sandoche
@anna_0x 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: https://darkmodejs.learn.uno/#ov.... So yeah even though I say it enables dark mode in a few seconds, sometimes it takes a few minutes more :)
Anna Filou
@sandochee 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!
Sandoche
@anna_0x Maybe try using "mix-blend-mode: difference;" if the z-index don't work.
Anna Filou
@sandochee thank you I will try it and let you know how it went
Craig Weebler
This needs to be more popular!
Leandro Dinômade
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.
Titus Decali
Adding dark mode to new Vue projects takes time. This is instant. Great idea!