1 files changed, 53 insertions, 63 deletions
diff --git a/site/themes/sine/static/js/switch-theme.js b/site/themes/sine/static/js/switch-theme.js
index 5052f39..8baaee5 100644
--- a/site/themes/sine/static/js/switch-theme.js
+++ b/site/themes/sine/static/js/switch-theme.js
@@ -1,88 +1,78 @@
-// 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 }) {
+// Theme switcher
+
+// Themes and icons
+
+const themes = {
+  "melatonin-dark": { icon: " ☽", name: "Melatonin Dark" },
+  "melatonin-light": { icon: " ✧", name: "Melatonin Light" },
+  // "oxocarbon-dark": { icon: " ☾", name: "Oxocarbon Dark" },
+  // "oxocarbon-light": { icon: " ✧", name: "Oxocarbon Light" },
+};
+
+const themeOrder = Object.keys(themes);
+
+// Default themes
+const defaultDarkTheme = "melatonin-dark";
+const defaultLightTheme = "melatonin-light";
+
+// checks whether there is already a theme and if not, sets it to the user's default theme.
+function calculateTheme({ localStorageTheme, systemSettingDark }) {
   if (localStorageTheme !== null) {
     return localStorageTheme;
   }
 
   if (systemSettingDark.matches) {
-    return "dark";
+    return defaultDarkTheme;
   }
 
-  return "light";
+  return defaultLightTheme;
 }
 
-/**
-* 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;
+// Get next theme in list
+function getNextTheme(current) {
+  const index = themeOrder.indexOf(current);
+  return themeOrder[(index + 1) % themeOrder.length];
 }
 
-/**
-* Utility function to update the theme setting on the html tag
-*/
-function updateThemeOnHtmlEl({ theme }) {
-  document.querySelector("html").setAttribute("data-theme", theme);
-}
+// Utility function to update the button text and aria-label.
+function updateButton(button, theme) {
+  const nextTheme = getNextTheme(theme);
 
+  button.innerText = themes[theme].icon;
+  button.setAttribute(
+    "aria-label",
+    `Switch to ${themes[nextTheme].name} theme`
+  );
+}
 
-/**
-* On page load:
-*/
+// Utility function to update the theme setting on the html tag
+function applyTheme(theme) {
+  document.documentElement.setAttribute("data-theme", theme);
+  localStorage.setItem("theme", theme);
+}
 
-/**
-* 1. Grab what we need from the DOM and system settings on page load
-*/
-const button = document.querySelector("[data-theme-toggle]");
+// 1. Grab what we need from the DOM and system settings on page load
+const button = document.querySelector("[data-theme-switcher]");
 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 });
+// 2. Work out the current site settings
+let currentTheme = calculateTheme({ localStorageTheme, systemSettingDark });
+console.log(currentTheme)
 
-/**
-* 3. Update the theme setting and button text accoridng to current settings
-*/
-updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
-updateThemeOnHtmlEl({ theme: currentThemeSetting });
+// 3. Update the theme setting and button text accoridng to current settings
+updateButton( button, currentTheme);
+applyTheme( currentTheme );
 
-/**
-* 4. Add an event listener to toggle the theme
-*/
+// 4. Add an event listener to toggle the theme
 button.addEventListener("click", (event) => {
-  const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
+  const newTheme = getNextTheme(currentTheme);
 
   localStorage.setItem("theme", newTheme);
-  updateButton({ buttonEl: button, isDark: newTheme === "dark" });
-  updateThemeOnHtmlEl({ theme: newTheme });
+  updateButton( button, newTheme);
+  applyTheme( newTheme );
 
-  currentThemeSetting = newTheme;
+  currentTheme = newTheme;
+  console.log(currentTheme)
 });