From 2496db965db4fa48197cb31c7750b2a16523ed32 Mon Sep 17 00:00:00 2001 From: triethyl Date: Mon, 13 Oct 2025 12:00:03 -0400 Subject: renamed theme and added content --- site/themes/hugo-starter/static/js/switch-theme.js | 88 ---------------------- 1 file changed, 88 deletions(-) delete mode 100644 site/themes/hugo-starter/static/js/switch-theme.js (limited to 'site/themes/hugo-starter/static/js/switch-theme.js') 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; // , not -// 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; -}); - -- cgit v1.2.3