You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
28 lines
944 B
28 lines
944 B
function load() {
|
|
const button = document.querySelector(".btn");
|
|
|
|
// MediaQueryList object
|
|
const useDark = window.matchMedia("(prefers-color-scheme: dark)");
|
|
|
|
// Toggles the "dark-mode" class based on if the media query matches
|
|
function toggleDarkMode(state) {
|
|
// Older browser don't support the second parameter in the
|
|
// classList.toggle method so you'd need to handle this manually
|
|
// if you need to support older browsers.
|
|
document.documentElement.classList.toggle("dark-mode", state);
|
|
}
|
|
|
|
// Initial setting
|
|
toggleDarkMode(useDark.matches);
|
|
|
|
// Listen for changes in the OS settings
|
|
useDark.addListener((evt) => toggleDarkMode(evt.matches));
|
|
|
|
// Toggles the "dark-mode" class on click
|
|
button.addEventListener("click", () => {
|
|
document.documentElement.classList.toggle("dark-mode");
|
|
});
|
|
}
|
|
|
|
window.addEventListener("DOMContentLoaded", load);
|
|
|