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/hugo-starter/static/js/switch-theme.js | |
| parent | b2393801585b7e152ffbffb3226f720e66454ea6 (diff) | |
renamed theme and added content
Diffstat (limited to 'site/themes/hugo-starter/static/js/switch-theme.js')
| -rw-r--r-- | site/themes/hugo-starter/static/js/switch-theme.js | 88 |
1 files changed, 0 insertions, 88 deletions
diff --git a/site/themes/hugo-starter/static/js/switch-theme.js b/site/themes/hugo-starter/static/js/switch-theme.js deleted file mode 100644 index 5052f39..0000000 --- a/site/themes/hugo-starter/static/js/switch-theme.js +++ /dev/null @@ -1,88 +0,0 @@ -// 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; -}); - |