Subscribe
Sign in
Captain Share
p/captain-shareCurated directory of sharing economy resources to save money
Start new thread
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
Sandoche
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!
Sandoche
Maker
@rrhoover @aaronoleary It would be an honor if you do so :)
Patricia Mayo

I was beta tester and added it to my website https://what.toeat.in 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

Sandoche
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 ;)
Farshad Sadri
@patricia_mayo1 Cool plugin. However it's weird to see you complementing on one of your own sites as a beta tester!
charlie
A few people have already mentioned, but I'll reiterate that this would be amazing to have working in Wordpress. Great work.
Sandoche
Maker
@justcharlie Thanks, yes I'll keep in mind :)
Sandoche
Maker
@justcharlie Hi, I just got mentionned on twitter by @BarisUnver_EN he built a Wordpress plugin using the darkmode-wiget: https://wordpress.org/plugins/da...
Niklas Pivic
@justcharlie @barisunver_en @envisionwithj @ayush_chandra @mahmudulalam @new_user_cca5c9dab6 @jose_sotelo @sandochee 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.
Farbod Saraf
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.

Sandoche
Maker
Actually you have options coming with the library so you can easily change the color!
Simo Elalj
Cool addon! I'm wondering how you'd make images (logo, illustrations) in dark mode as well?
Sandoche
Maker
@simoelalj 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.
Kshitij Choudhary
This is amazing. I don't mind paying for this <3
Sandoche
Maker
@kshitij_choudhary 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 !
Mahmudul Alam Mithun
Any solution for WordPress based websites?
Sandoche
Maker
@mahmudulalam Hi! Not yet, maybe I can make it. Otherwise you can just add this code in all your page and it will work !
Carlos Bernabeu
As always, great product @sandochee & 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!
Sandoche
Maker
@carlos_bernabeu Thanks a lot Carlos, I hope you will use it in your next projects!
Vera Lekutanaj
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!!!!
Sandoche
Maker
@vera Thanks Vera, please share your website once added, I'll share it on my Readme website!
Farbod Saraf
Hunter
Dark themes are becoming more and more popular. Even new Apple iOS is coming with the dark mode. I'll use this to darkify two of my websites right away.
Sandoche
Maker
@farbodsaraf Thanks for hunting Farbod! Darkify ! That's a cool name, maybe I should have named my product like this!
Andr Nevar
Nice add-on.
Sandoche
Maker
@async1983 Thanks Andr !
Etienne
Again a very good idea. I was actually looking for something similar since some time and you just made it, perfect for me then :) It is very easy to integrate, I will definitely use it. Thanks for the great work.
Sandoche
Maker
@etienne0790 Thanks Etienne, please share your project I'll add it to the Readme as a showcase !
Ivan Camus
Great widget and very easy to use!
Sandoche
Maker
@ivan_camus Thanks Ivan
Roberto Courech
Great, useful and easy, thanks!
Sandoche
Maker
@roberto_courech Thanks Roberto!
Nate Davis
Well done 👏🏻 been waiting for something like this. Perfect timing to create something like as well!
Sandoche
Maker
@nate_davis Thanks a lot, yes I also was selling an in app "dark-theme" in my app gitnews it works pretty good https://gitnews.learn.uno
Hoss
Very cool, how does it determine what to change the text colors to? Or will they all simply become white colors?
Sandoche
Maker
@modeling It's based on the difference between two colors you can see the description here: https://dev.to/wgao19/night-mode... You can always then customize your css to put particular colors for the elements you don't like!
Rohit Kaul
Nice add-on and neatly packaged using the widget so that people who aren't natural coders (yours truly) can also use it.
Sandoche
Maker
@seekingn0rth Thanks a lot Rohit.
Nitesh Shewani
Can we use this in Shopify ?
Sandoche
Maker
@nitesh_shewani Yes but you need to either update your theme / templates or find an extension to inject code before the
Irene
Thanks so much cor developing this!😍😍
Sandoche
Maker
@irenemarquetg Thanks Irene!