enhancement: theme toggle

Author: semanticdata

src/js/toggle.js

@@ -40,29 +40,42 @@ function handleSystemThemeChange(e) {
   }
 }
 
-/* On page load: */
-const button = document.querySelector("[data-theme-toggle]");
-const localStorageTheme = localStorage.getItem("theme");
-const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
-
-let currentThemeSetting = calculateSettingAsThemeString({
-  localStorageTheme,
-  systemSettingDark,
-});
-
-// Initialize the button and theme
-updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
-updateThemeOnHtmlEl({ theme: currentThemeSetting });
-
-// Add event listeners
-systemSettingDark.addListener(handleSystemThemeChange);
-
-button.addEventListener("click", (event) => {
+// Handle theme toggle button click
+function handleThemeToggleClick() {
   const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
 
   localStorage.setItem("theme", newTheme);
   updateButton({ buttonEl: button, isDark: newTheme === "dark" });
   updateThemeOnHtmlEl({ theme: newTheme });
 
   currentThemeSetting = newTheme;
-});
+}
+
+// Initialize theme functionality
+function initTheme() {
+  // Get DOM elements and system preferences
+  const button = document.querySelector("[data-theme-toggle]");
+  const localStorageTheme = localStorage.getItem("theme");
+  const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
+
+  // Determine initial theme
+  let currentThemeSetting = calculateSettingAsThemeString({
+    localStorageTheme,
+    systemSettingDark,
+  });
+
+  // Initialize the button and theme
+  updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
+  updateThemeOnHtmlEl({ theme: currentThemeSetting });
+
+  // Add event listeners
+  systemSettingDark.addListener(handleSystemThemeChange);
+  button.addEventListener("click", handleThemeToggleClick);
+
+  // Make these available to event handlers
+  window.button = button;
+  window.currentThemeSetting = currentThemeSetting;
+}
+
+// Execute initialization when DOM is ready
+document.addEventListener('DOMContentLoaded', initTheme);

src/newtab.html

@@ -8,6 +8,22 @@
   <meta name="description"
     content="NoteKeeper is a Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.">
   <link rel="icon" type="image/png" sizes="48x48" href="icons/icon48.png" />
+  <!-- Prevent flash of incorrect theme -->
+  <script>
+    (function () {
+      const localStorageTheme = localStorage.getItem("theme");
+      const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+      let theme = "light";
+      if (localStorageTheme) {
+        theme = localStorageTheme;
+      } else if (systemSettingDark) {
+        theme = "dark";
+      }
+
+      document.documentElement.setAttribute("data-theme", theme);
+    })();
+  </script>
   <link rel="stylesheet" href="styles.css" />
 </head>
 

src/sidebar/panel.html

@@ -8,6 +8,22 @@
   <meta name="description"
     content="NoteKeeper is a Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.">
   <link rel="icon" type="image/png" sizes="48x48" href="../icons/icon48.png" />
+  <!-- Prevent flash of incorrect theme -->
+  <script>
+    (function () {
+      const localStorageTheme = localStorage.getItem("theme");
+      const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+      let theme = "light";
+      if (localStorageTheme) {
+        theme = localStorageTheme;
+      } else if (systemSettingDark) {
+        theme = "dark";
+      }
+
+      document.documentElement.setAttribute("data-theme", theme);
+    })();
+  </script>
   <link rel="stylesheet" href="../styles.css" />
 </head>