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
Maker
Hi Product Hunt 👋, I am Sandoche, a maker, designer and developer. I recently wanted to add a dark-mode to Kanbanote, one of my website, and then I thought, why not to do it for all my websites at once? that is why I decided to build this plugin that makes dark-mode easily available to any project. Just copy paste the snippet and you will get a widget to turn on and off the dark-mode. You can also use it without the widget programmatically. The plugin is lightweight, built in VanillaJS and open source ! I hope you will like it!
can we
Maker
It would be an honor if you do so :)

I was beta tester and added it to my website It worked like a charm, I like getting things done fast 😁

Pros:

Easy, fast and effective, it does what it promises. Very good for amoled screens

Cons:

Need extra css to customize the default colors

Maker
Hi Patricia thanks for trying it in beta! Yes if you want to have perfect colors you do need to add a bit of CSS, it will take a few seconds more ;)
Cool plugin. However it's weird to see you complementing on one of your own sites as a beta tester!
I am not sure I understand. I did a review because I have used the plugin myself.
A few people have already mentioned, but I'll reiterate that this would be amazing to have working in Wordpress. Great work.
Maker
Thanks, yes I'll keep in mind :)
Maker
Hi, I just got mentionned on twitter by he built a Wordpress plugin using the darkmode-wiget:
Maker
Maker
I dig blackout. I've very few coding skills where WordPress is concerned; I just installed the plugin. It works and has good customisation options installed.
Hunter

It's an open source and easy-to-use tool which most website should use nowadays as the dark theme is becoming more and more popular.

Pros:

Managed to darkify two of my website easily.

Cons:

None so far. Maybe having more colors in the future would be cool, although to me the dark one would suffice.

Maker
Actually you have options coming with the library so you can easily change the color!
Cool addon! I'm wondering how you'd make images (logo, illustrations) in dark mode as well?
Maker
Thanks! Actually this library uses the CSS proprety `mix-blend-mode: difference;` to activate the darkmode, and by adding `isolation: isolate;` to all the images it will isolate them from the mix-blend-mode.
This is amazing. I don't mind paying for this <3
Maker
Thanks a lot, I opened a Patreon while for the release of Darkmode so feel free to donate, I will also release other open source projects very soon !
Any solution for WordPress based websites?
Maker
Hi! Not yet, maybe I can make it. Otherwise you can just add this code in all your page and it will work !
A WordPress plugin would be amazing!!
As always, great product & team! Works perfectly out of the box, and enables a feature completely new for users. They perceive the added value of being able to browse my sites without destroying their eyes. Great thinking team! Continue the great work!
Maker
Thanks a lot Carlos, I hope you will use it in your next projects!
I love it. I was looking for something like that long time ago. Thank you for making it. I will definitely use it. Keep on the great work!!!!
Maker
Thanks Vera, please share your website once added, I'll share it on my Readme website!
1234
Next
Last