diff options
| author | triethyl <triethylammonium@pm.me> | 2025-10-13 12:00:03 -0400 |
|---|---|---|
| committer | triethyl <triethylammonium@pm.me> | 2025-10-13 12:00:03 -0400 |
| commit | 2496db965db4fa48197cb31c7750b2a16523ed32 (patch) | |
| tree | ce174f1f94426c8727a31680e0c8e415e998ba66 /site/themes/sine/static/js/switch-theme.js | |
| parent | b2393801585b7e152ffbffb3226f720e66454ea6 (diff) | |
renamed theme and added content
Diffstat (limited to 'site/themes/sine/static/js/switch-theme.js')
| -rw-r--r-- | site/themes/sine/static/js/switch-theme.js | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/site/themes/sine/static/js/switch-theme.js b/site/themes/sine/static/js/switch-theme.js new file mode 100644 index 0000000..5052f39 --- /dev/null +++ b/site/themes/sine/static/js/switch-theme.js @@ -0,0 +1,88 @@ +// const root = document.documentElement; // <html>, not <body> +// const btn = document.getElementById("toggleTheme"); +// +// const savedTheme = localStorage.getItem("theme") || "light"; +// root.className = savedTheme; +// btn.innerHTML = savedTheme === "dark" ? "✧" : "☾"; +// +// btn.addEventListener("click", () => { +// const newTheme = root.classList.contains("light") ? "dark" : "light"; +// root.className = newTheme; +// localStorage.setItem("theme", newTheme); +// btn.innerHTML = newTheme === "dark" ? "✧" : "☾"; +// }); + +/** +* Utility function to calculate the current theme setting. +* Look for a local storage value. +* Fall back to system setting. +* Fall back to light mode. +*/ +function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) { + if (localStorageTheme !== null) { + return localStorageTheme; + } + + if (systemSettingDark.matches) { + return "dark"; + } + + return "light"; +} + +/** +* Utility function to update the button text and aria-label. +*/ +function updateButton({ buttonEl, isDark }) { + const newCta = isDark ? "Change to light theme" : "Change to dark theme"; + + const newInnerText = isDark ? "✧" : "☾"; + // use an aria-label if you are omitting text on the button + // and using a sun/moon icon, for example + buttonEl.setAttribute("aria-label", newCta); + buttonEl.innerText = newInnerText; +} + +/** +* Utility function to update the theme setting on the html tag +*/ +function updateThemeOnHtmlEl({ theme }) { + document.querySelector("html").setAttribute("data-theme", theme); +} + + +/** +* On page load: +*/ + +/** +* 1. Grab what we need from the DOM and system settings on page load +*/ +const button = document.querySelector("[data-theme-toggle]"); +const localStorageTheme = localStorage.getItem("theme"); +const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)"); + +/** +* 2. Work out the current site settings +*/ +let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }); + +/** +* 3. Update the theme setting and button text accoridng to current settings +*/ +updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" }); +updateThemeOnHtmlEl({ theme: currentThemeSetting }); + +/** +* 4. Add an event listener to toggle the theme +*/ +button.addEventListener("click", (event) => { + const newTheme = currentThemeSetting === "dark" ? "light" : "dark"; + + localStorage.setItem("theme", newTheme); + updateButton({ buttonEl: button, isDark: newTheme === "dark" }); + updateThemeOnHtmlEl({ theme: newTheme }); + + currentThemeSetting = newTheme; +}); + |