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;
}
}
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.