Skip to content

A webpage that includes a πŸ’… theme switcher: light 🌞 & dark 🌜). Built with HTML5, CSS3 & JavaScript.

Notifications You must be signed in to change notification settings

elemarmar/light-dark-mode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

12 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Light & Dark Mode

cover

The purpose of this project is to implement dark / light theme to a template website using plain JavaScript.




Learning Outcome


  1. Using CSS variables
  2. background: rgb(255 255 255 / 50%) instead of rgba(255, 255, 255, 0.5)
  3. Smooth scroll with html { scroll-behavior: smooth };
  4. Creating a toggle switch
  5. Setting attributes on the root element (html)
  6. Using document.documentElement
  7. Saving theme in localStorage


Process


Creating the toggle switch


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 slider and round classes.

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

  1. We set the data-theme attribute at the highest level of the html
  2. document.documentElement returns 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`;
}

LocalStorage


We use local storage to store the user theme preference so that when the user refreshes the page, the previous chosen theme remains.



About

A webpage that includes a πŸ’… theme switcher: light 🌞 & dark 🌜). Built with HTML5, CSS3 & JavaScript.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published