let toggleButton; let icon; function load() { "use strict"; toggleButton = document.createElement("button"); toggleButton.setAttribute("title", "Toggle dark mode"); toggleButton.classList.add("dark-mode-toggle"); icon = document.createElement("i"); icon.classList.add("fa", darkModeState ? "fa-sun-o" : "fa-moon-o"); toggleButton.appendChild(icon); document.body.prepend(toggleButton); // Listen for changes in the OS settings // addListener is used because older versions of Safari don't support addEventListener // prefersDarkQuery set in if (prefersDarkQuery) { prefersDarkQuery.addListener(function (evt) { toggleDarkMode(evt.matches); }); } // Initial setting depending on the prefers-color-mode or localstorage // darkModeState should be set in the document to prevent flash if (darkModeState == undefined) darkModeState = false; toggleDarkMode(darkModeState); // Toggles the "dark-mode" class on click and sets localStorage state toggleButton.addEventListener("click", () => { darkModeState = !darkModeState; toggleDarkMode(darkModeState); localStorage.setItem("dark-mode", darkModeState); }); } function toggleDarkMode(state) { document.documentElement.classList.toggle("dark-mode", state); document.documentElement.classList.toggle("light-mode", !state); icon.classList.remove("fa-sun-o"); icon.classList.remove("fa-moon-o"); icon.classList.add(state ? "fa-sun-o" : "fa-moon-o"); darkModeState = state; } document.addEventListener("DOMContentLoaded", load);