darkMode.mjs

TLDR

This file contains a function named darkModeControl that controls the dark mode behavior of a web page.

Methods

darkModeControl

The darkModeControl function controls the dark mode behavior of a web page. It is responsible for toggling the dark mode class on the body element based on the state of a checkbox. If the checkbox is checked, the dark class is added to the body element, and the value 'dark' is stored in the local storage. If the checkbox is unchecked, the dark class is removed from the body element, and the value 'dark' is removed from the local storage. This function also sets the initial state of the checkbox and the body class based on the value stored in the local storage.

Classes

There are no classes in this file.

const darkModeControl = () => {
  const darkCheck = document.getElementById('night-light-checkbox');

  darkCheck.addEventListener('click', () => {
    if (darkCheck.checked) {
      document.body.classList.add('dark');
      localStorage.setItem('animate-css', 'dark');
    } else {
      document.body.classList.remove('dark');
      localStorage.removeItem('animate-css');
    }
  })

  if (localStorage.getItem('animate-css')) {
    document.body.className = 'dark';
    darkCheck.checked = true;
  }
}

export default darkModeControl;