Elementor Light/Dark Theme Toggle – No Plugins!

In this Elementor Pro tutorial I will show you how to add a light/dark theme toggle to your website. The good news this will require no additional plugins. I will be using JavaScript and CSS to pull this off.

Note: It’s important to have a good understanding of CSS if you want to use this feature on your website.

JavaScript & CSS Code:

Elementor Light/Dark Theme Toggle

Elementor Global Style Guide:

Elementor Global Style Guide

Timestamps:
0:00 Light/Dark Toggle Demo
1:37 Add Light/Dark Toggle Buttons
3:34 Add JavaScript Code
4:57 Local Storage and Body Class Test
6:45 Add CSS Code
13:09 Change Logo Color on Toggle

Our Recommended Tools
Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

WE NOW HAVE MERCH:
https://wickydesign.myspreadshop.com/

WORDPRESS PLUGINS:
✔️ Elementor: https://wickydesign.com/get-elementor
✔️ Crocoblock: https://crocoblock.com/?ref=2562
✔️ Ultimate Add Ons: https://ultimateelementor.com/pricing/?campaign=UE&bsf=8362
✔️ Elementor Custom Skin: https://gumroad.com/a/545789043
✔️ All In One SEO: https://www.shareasale.com/r.cfm?b=1491200&u=2081667&m=94778

BUSINESS TOOLS:
✔️ Dubsado: https://www.dubsado.com/?c=wickydesign
✔️ MailerLite: https://www.mailerlite.com/a/jrdqblbizo
✔️ Wave: https://waveapps.com/

GRAPHICS:
✔️ Adobe: http://clkuk.tradedoubler.com/click?p=264355&a=3228525

WEBSITE HOSTING:
✔️ KnownHost: https://www.knownhost.com/?aid=71319c26

——
For more information regarding our web design and branding services, please visit https://wickydesign.com