Updates galore. Improved folder structure, componentized, and notifications upon completion.

static/js/modules/theme.js

@@ -0,0 +1,46 @@
+/**
+ * theme.js
+ * --------
+ * Dark / light theme management.
+ *
+ * Reads the user's saved preference from localStorage and falls back to the
+ * OS-level prefers-color-scheme media query.  Writes back on every change
+ * so the choice persists across page loads.
+ *
+ * Exports
+ * -------
+ *   initTheme()   — call once at startup; reads saved pref and applies it
+ *   applyTheme()  — apply a specific theme string ('dark' | 'light')
+ */
+
+import { els } from './state.js';
+
+/**
+ * Apply *theme* to the document and persist the choice.
+ * @param {'dark'|'light'} theme
+ */
+export function applyTheme(theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  els.themeIcon.textContent = theme === 'dark' ? '☀' : '◑';
+  els.themeToggle.setAttribute(
+    'aria-label',
+    `Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`,
+  );
+  localStorage.setItem('vp-theme', theme);
+}
+
+/**
+ * Read the saved theme preference (or detect from OS) and apply it.
+ * Attaches the toggle button's click listener.
+ * Call once during app initialisation.
+ */
+export function initTheme() {
+  const saved       = localStorage.getItem('vp-theme');
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  applyTheme(saved || (prefersDark ? 'dark' : 'light'));
+
+  els.themeToggle.addEventListener('click', () => {
+    const current = document.documentElement.getAttribute('data-theme');
+    applyTheme(current === 'dark' ? 'light' : 'dark');
+  });
+}