The purpose of this project is to implement dark / light theme to a template website using plain JavaScript.
- Using CSS variables
background: rgb(255 255 255 / 50%)instead ofrgba(255, 255, 255, 0.5)- Smooth scroll with
html { scroll-behavior: smooth }; - Creating a toggle switch
- Setting attributes on the root element (html)
- Using
document.documentElement - Saving theme in localStorage
index.html
<div class="theme-switch-wrapper">
<!-- Text and icon -->
<span id="toggle-icon">
<span class="toggle-text">Light Mode</span>
<i class="fas fa-sun"></i>
</span>
<!-- Switcher -->
<label class="theme-switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
</div>- The text Light Mode has to change to Dark Mode when in dark mode.
- The styling of the switch is done via
sliderandroundclasses.
script.js
Add event listener to the toggle switch. We use the change event.
const toggleSwitch = document.querySelector('input[type="checkbox"]');
// Switch Theme Dynamically
//...
// Event Listener
toggleSwitch.addEventListener('change', switchTheme);We create function that dynamically changes the theme
// Switch Theme Dynamically
function switchTheme(event) {
if (event.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
toggleDarkLightMode(DARK_THEME);
} else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
toggleDarkLightMode(LIGHT_THEME);
}
}We use property target.checked to check if the switch toggle has been checked (show dark mode) or not (light mode).
- We set the
data-themeattribute at the highest level of the html document.documentElementreturns the root element -in this case<html>
We still need to change te icons, the text of the theme and the images. We create a single function toggleDarkLightMode(mode) that given a parameter, it changes the icon, text and images according to the theme choice.
I use two constants to identify the themes: DARK_THEME and LIGHT_THEME.
There is a function imageMode(mode) that's in charge of changing the source of the images in the HTML document according to the chosen mode:
function imageMode(color) {
image1.src = `img/undraw_proud_coder_${color}.svg`;
image2.src = `img/undraw_feeling_proud_${color}.svg`;
image3.src = `img/undraw_conceptual_idea_${color}.svg`;
}We use local storage to store the user theme preference so that when the user refreshes the page, the previous chosen theme remains.
-
Background from hero patterns
-
Illustrations from Undraw
-
Icons from FontAwesome