Elementor Light/Dark Theme Toggle

September 25, 2023

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.

Purchase the 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

JavaScript Code

				
					<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>


				
			

CSS Code

				
					#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;}
				
			

*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!

Share this post:

Facebook
Reddit
Twitter
Pinterest
LinkedIn
Email

More Free Resources