5/5

How To Add Dark Mode To Your Elementor Powered Site.

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.

😀

Related Articles

How To Turn A Section Into A Carousel

Greeting All, In this tutorial I am going to show you how you can turn...

How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone, This short tutorial will shed some light on how to replicate the mobile...

How To Wrap Text In Elementor

Greetings All. This brief tutorial will touch on a subject I was asked about this...

How to Create A CSS Arrow

Greetings All, For this brief tutorial I will show you how to create a css...

Leave a Reply

Your email address will not be published. Required fields are marked *

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?

newsletter

Subscribe to get notified and receive a special invite.