September 26, 2023

Create an Elementor Switcher for a Light & Dark Theme without Extra Plugins

Play Video
Tutorial Walkthrough
This video tutorial provides an in-depth walkthrough, and we recommend following along with the video to grasp the concept fully. Below, you'll find a summary of the tutorial, but please note that it may leave out some detailed steps, so watching the video will give you the most comprehensive understanding.

The ability to toggle between light and dark themes on websites not only provides a personalized experience but also helps reduce eye strain for users browsing at night. If you’re using Elementor, you’re in luck! Here’s how you can add a light/dark theme toggle to your website without any additional plugins.

Setting Up the Toggle Button

  1. Positioning the Toggle
    Decide where you want the toggle button. For this tutorial, the toggle button is placed in the header.
  2. Using the Icon Widget
    Use the Elementor icon widget to create the toggle icons. For this example, a sun icon represents the light mode and a moon icon represents the dark mode.
  3. Assigning Unique IDs
    • For the main container holding the two icons, assign the CSS ID darktoggle.
    • For the sun icon, assign the CSS ID darkModeImg.
    • For the moon icon, assign the CSS ID lightModeImg.

Implementing the JavaScript

  1. Positioning the Script
    Ensure the JavaScript code is placed below the toggle icons in the Elementor structure with the help of an HTML widget:

    let darkToggle = document.querySelector('#darkToggle');
    let isDarkMode = localStorage.getItem('darkMode');
    // Check if dark mode was previously enabled and set the initial state
    if (isDarkMode === 'true') {
      document.querySelector('#lightModeImg').style.display = 'none';
      document.querySelector('#darkModeImg').style.display = 'block';
    darkToggle.addEventListener('click', () => {
      if (document.body.classList.contains('dark')) {
        document.querySelector('#lightModeImg').style.display = 'block';
        document.querySelector('#darkModeImg').style.display = 'none';
        localStorage.setItem('darkMode', 'false'); // Store the dark mode state
      } else {
        document.querySelector('#lightModeImg').style.display = 'none';
        document.querySelector('#darkModeImg').style.display = 'block';
        localStorage.setItem('darkMode', 'true'); // Store the dark mode state

    Source: WickyDesign

Tip: To check if local storage is working, use the browser’s inspect tool. Under the ‘Application’ tab, you should see a key named darkMode that toggles between true (dark mode) and false (light mode) as you click the theme switcher.

Styling with CSS

  1. Default Styling
    By default, set everything to a dark color using the dark class. This ensures that any unstyled element will default to the dark theme:

    #darkModeImg {display: none;}
    #darkToggle {cursor: pointer;}
    .dark {color: #ffffff;background: #333333;}
    body.dark .headerbg {background-color: #5D9CC7;}
    .wickylogo {fill:#333333;}
    body.dark .wickylogo {fill:#ffffff;}
    body.dark h1,h2,h3,h4{color:#ffffff;}
    body.dark {
      --e-global-color-primary: #fff;
      --e-global-color-secondary: #fff;
      --e-global-color-text: #fff;
      --e-global-color-accent: #fff;
    body.dark .elementor-button{background-color:#F9C059;}
    body.dark .elementor-button:hover{background-color:#F9C059;}
    body.dark .elementor-field{background-color:#fff;}
    body.dark .bottomfooter {background-color: #5D9CC7!important;}
    body.dark .footerright div{background-color: #333333!important;}
    body.dark i{color:#ffffff;}

    Source: WickyDesign

  2. Targeting Specific Elements
    You can target specific elements to style them differently in dark mode. For instance, if you want the header to have a blue background in dark mode, you can target it using the dark class and the header’s class or ID.
  3. Using SVG for Logos
    If you want your logo to change colors between light and dark modes, use an SVG format for your logo. This allows you to change the logo’s color using CSS. Ensure that the SVG paths have the correct class names that match your CSS.


Adding a light/dark theme switcher to your website enhances user experience and is a feature appreciated by many. With Elementor and a bit of coding, you can easily implement this without the need for extra plugins. Happy designing!

Required Resources

Elementor Logo
Free Options
Credit to Wicky Design
Immerse yourself in the world of web design with Barbara and Mark, a talented husband and wife duo based in Philadelphia, PA. Their channel focuses on everything from web design and Elementor to WordPress and growing an online business. With their unique blend of experience and expertise, they offer invaluable tips, tutorials, and insights for both beginners and experts.
Create an Elementor Switcher for a Light & Dark Theme without Extra Plugins
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.