JavaScript wrangler.
Check out my books!
Web API Cookbook:
https://www.amazon.com/Web-API-Cookbook-JavaScript-Applications/dp/1098150694
Modern CSS:
https://www.amazon.com/dp/148426293X
Thanks for pointing this out. I'm not sure why i left it out but you achieve that with this snippet.
document.addEventListener("DOMContentLoaded", () => {
const theme = document.querySelector(".theme");
const button = document.querySelector(".theme-switcher");
const mode = document.querySelector(".theme-switcher__current-mode");
button.addEventListener("click", () => toggleTheme(mode.innerText == "dark"));
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
// check for browser support
if (darkModeMediaQuery) {
darkModeMediaQuery.addListener((e) => {
const darkModeOn = e.matches;
toggleTheme(darkModeOn);
});
}
You can also use the
prefers-color-scheme
media query and automatically set the theme based on the OS settings!Thanks for pointing this out. I'm not sure why i left it out but you achieve that with this snippet.
document.addEventListener("DOMContentLoaded", () => {
const theme = document.querySelector(".theme");
const button = document.querySelector(".theme-switcher");
const mode = document.querySelector(".theme-switcher__current-mode");
button.addEventListener("click", () => toggleTheme(mode.innerText == "dark"));
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
// check for browser support
if (darkModeMediaQuery) {
darkModeMediaQuery.addListener((e) => {
const darkModeOn = e.matches;
toggleTheme(darkModeOn);
});
}
function toggleTheme(isDarkTheme) {
theme.classList.remove("theme_dark", "themelight");
if (isDarkTheme) {
theme.classList.add("themedark");
mode.innerText = "light";
} else {
theme.classList.add("theme_light");
mode.innerText = "dark";
}
}
});