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