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

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:

   <script>
   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.body.classList.add('dark');
     document.querySelector('#lightModeImg').style.display = 'none';
     document.querySelector('#darkModeImg').style.display = 'block';
   }
   
   darkToggle.addEventListener('click', () => {
     if (document.body.classList.contains('dark')) {
       document.body.classList.remove('dark');
       document.querySelector('#lightModeImg').style.display = 'block';
       document.querySelector('#darkModeImg').style.display = 'none';
       localStorage.setItem('darkMode', 'false'); // Store the dark mode state
     } else {
       document.body.classList.add('dark');
       document.querySelector('#lightModeImg').style.display = 'none';
       document.querySelector('#darkModeImg').style.display = 'block';
       localStorage.setItem('darkMode', 'true'); // Store the dark mode state
     }
   });
   </script>

   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.

Conclusion

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!