inglorious-ratbastard / The-Bonsall-Project

The Bonsall Project | @the-bonsall-project | Material Design concept with GSAP animation
https://inglorious-ratbastard.github.io/The-Bonsall-Project/
0 stars 1 forks source link

improve light/dark mode toggle #1

Closed inglorious-ratbastard closed 6 months ago

inglorious-ratbastard commented 11 months ago

I have implemented a color mode toggle switch (Light/Dark Mode) in the navbar. The current changes do not reflect a permanent state and can be worked on and improved in the future.

What I would like to see: Change the overall color scheme of the topic pages and how they are effected by the toggle switch. Add any new features to the toggle switch and how they change the page.

// Get prefers-color-scheme media query
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
  window.localStorage.setItem("isDarkMode", "true");
}

// When browser window loads, check dark mode
window.onload = function() {
  const isDarkMode = window.localStorage.getItem("isDarkMode") === "true";

  if (isDarkMode) {
    document.body.style.background = "#E5E4E2"; /* "#000000"; */
    document.getElementById("text").innerHTML = "Turn on the lights!";
    document.getElementById("text").style.color = "#ffffff";
    document.getElementById("checkbox").checked = false;    
  } else {
    document.body.style.background = "#ffffff"; 
    document.getElementById("text").innerHTML = "Turn off the lights!";
    document.getElementById("text").style.color = "#000000"; 
    document.getElementById("checkbox").checked = true;
  }
}

// Toggle dark mode
function toggle() {
  const isDarkMode = window.localStorage.getItem("isDarkMode") === "true";

  if (isDarkMode) {
    window.localStorage.setItem("isDarkMode", "false");
    document.body.style.background = "#B2BEB5"; /* "#ffffff"; */
    document.getElementById("text").innerHTML = "Turn off the lights!";
    document.getElementById("text").style.color = "#000000"; 
    document.getElementById("checkbox").checked = true;
  } else {
    window.localStorage.setItem("isDarkMode", "true");
    document.body.style.background = "#E5E4E2"; /* "#000000"; */
    document.getElementById("text").innerHTML = "Turn on the lights!";
    document.getElementById("text").style.color = "#ffffff";
    document.getElementById("checkbox").checked = false;  
  }
}
inglorious-ratbastard commented 6 months ago

toggle switch has been updated since and is satisfactory for the time being.