Greetings All,

This question has been asked quite a bit in the Elementor Facebook group so I decided to see how hard it would be to implement it in one of test sites.

My first attempt was using jQuery and a button that would swap in and out certain classes on click targeting paragraphs and headings. It work great except you had to apply again if you switch pages there was no way to have it remember what the visitor had selected previously.

So I went back to fishing through the web and I found something that looked promising.

DarkMode.js

This javascript plugin was a gem to find. Create by Sandoche Adittane this plugin did everything I needed it to do from a developers stand point. This library uses the CSS mix-blend-mode to bring Dark Mode to your website. You can also use it without the widget programmatically. The plugin is lightweight, built-in Vanilla. It also uses local storage by default, so your last setting will be remembered!

You can find Darkmode.js here.

Awesomeness!!!

And to top it off there is even a WordPress version for those who are not so tech savvy. The options are limited but you get the same effect with having to do any serious work. You can find the WordPress version here Blackout.

I personally prefer to implement the plugin via javascript it gives me more control.

For those who want to implement this plugin the javascript way a user did a video with step by step instructions.

My Test Site Results

For my test I simply import a template from Envato elements and activated the plugin you can see my result below.

Let me know in the comments what you think.

😀