sjns19/index.js

## index.js
// Get the button that is used to toggle the dark mode
const themeBtn = document.getElementById("dark-mode-btn");
// Get the <html> element
const docEl = document.documentElement;

// Handling the click event
themeBtn.addEventListener("click", () => {
  // Toggle the dark-theme class inside of the html element
  docEl.classList.toggle("dark-theme");
  // Set the dark theme value in user's browser.
  // This time, we are going to have a boolean value
  // stored so that we can add the dark-theme class to the body
  // element by checking the value of this boolean
  localStorage.setItem("dark-theme-toggled", docEl.classList.contains("dark-theme")); // This returns true/false
});

// Load the storage item and check for its value
window.addEventListener("DOMContentLoaded", () => {
  let theme = localStorage.getItem("dark-theme-toggled");

  // If the local storage value is not null (means there is something stored)
  // and if it's true (apparently it's stored as string so comparing to real boolean won't help)
  // toggle the dark-theme again
  if (theme !== null && theme === "true") {
    docEl.classList.toggle("dark-theme");
  }
});
	// Get the button that is used to toggle the dark mode
	const themeBtn = document.getElementById("dark-mode-btn");
	// Get the <html> element
	const docEl = document.documentElement;

	// Handling the click event
	themeBtn.addEventListener("click", () => {
	// Toggle the dark-theme class inside of the html element
	docEl.classList.toggle("dark-theme");
	// Set the dark theme value in user's browser.
	// This time, we are going to have a boolean value
	// stored so that we can add the dark-theme class to the body
	// element by checking the value of this boolean
	localStorage.setItem("dark-theme-toggled", docEl.classList.contains("dark-theme")); // This returns true/false
	});

	// Load the storage item and check for its value
	window.addEventListener("DOMContentLoaded", () => {
	let theme = localStorage.getItem("dark-theme-toggled");

	// If the local storage value is not null (means there is something stored)
	// and if it's true (apparently it's stored as string so comparing to real boolean won't help)
	// toggle the dark-theme again
	if (theme !== null && theme === "true") {
	docEl.classList.toggle("dark-theme");
	}
	});