<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
<script>
  // Add dark mode classes and elements' classes
  // newDarkClass - a name of a class with dark mode attributes 
  // defaultClass - a class of an element a new class will be added to
  var darkClasses = [

    { newDarkClass: 'bodyDark', defaultClass: 'body' },
    { newDarkClass: 'h2_dark', defaultClass: 'h2' },

  ];
	
  // Listening to a switch and running a function on click
  document.getElementById("switch").addEventListener("click", darkSwitch);

  // checking if cookie exists
  var cookieState = Cookies.get('darkMode');

  // First visit - cookieState is undefined
  // If cookie exists we are parsing it to get a boolean
  if (cookieState === undefined) {
    var isDarkmodeEnabled = false;
  } else {
    var isDarkmodeEnabled = JSON.parse(cookieState)
  };

  // Cookie doesn't exist: darkMode = false 
  // Cookie exists: darkMode = true/false
  var darkMode = isDarkmodeEnabled;

  // Adding classes on page load if darkmode is enabled
  window.onload = addClassesOnLoad();

  // Changing darkMode state and adding or removing classes
  function darkSwitch() {

    // Setting darkMode to its opposite value
    darkMode = !darkMode;

    if (darkMode === true) {
      // Looping through an array and deleting classes
      darkClasses.forEach(item => {
        var element = document.querySelectorAll(`.${item.defaultClass}`)
        element.forEach(h => h.classList.add(item.newDarkClass))
      });
    } else {
      // Looping through an array and deleting classes
      darkClasses.forEach(item => {
        var element = document.querySelectorAll(`.${item.defaultClass}`)
        element.forEach(h => h.classList.remove(item.newDarkClass))
      });
    };
    // Saving darkMode state to the cookie
    Cookies.set('darkMode', darkMode);
  }

  // Adding classes on page load if darkmode is enabled
  //
  function addClassesOnLoad() {

    if (darkMode === true) {

      // Changing switch state
      document.getElementById("switch").checked = true;


      darkClasses.forEach(item => {
        var element = document.querySelectorAll(`.${item.defaultClass}`)
        element.forEach(h => h.classList.add(item.newDarkClass))
      });
    };
  }

</script>

<style>

  /* DEFINE DARK MODE CLASSES HERE */

</style>