Added color switching, moved scripts into dedicated files

static/js/toggles.js

@@ -0,0 +1,51 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const root = document.documentElement;
+
+  // Theme toggle
+  const toggleBtn = document.getElementById('theme-toggle');
+
+  function getCurrentTheme() {
+    const attr = root.getAttribute('data-theme');
+    if (attr) return attr;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  function updateIcon() {
+    toggleBtn.textContent = getCurrentTheme() === 'dark' ? '☀' : '☾';
+  }
+  updateIcon();
+  toggleBtn.addEventListener('click', function () {
+    const next = getCurrentTheme() === 'dark' ? 'light' : 'dark';
+    root.setAttribute('data-theme', next);
+    localStorage.setItem('theme', next);
+    updateIcon();
+    document.dispatchEvent(new CustomEvent('themechange'));
+  });
+
+  // Accent toggle
+  const accentToggleBtn = document.getElementById('accent-toggle');
+
+  function getCurrentAccent() {
+    return root.getAttribute('data-accent') === 'alt' ? 'alt' : 'default';
+  }
+
+  accentToggleBtn.addEventListener('click', function () {
+    const next = getCurrentAccent() === 'alt' ? 'default' : 'alt';
+    root.setAttribute('data-accent', next);
+    localStorage.setItem('accent', next);
+    document.dispatchEvent(new CustomEvent('themechange'));
+  });
+
+  // Font toggle
+  const fontToggleBtn = document.getElementById('font-toggle');
+
+  function getCurrentFont() {
+    return root.getAttribute('data-font') === 'sans' ? 'sans' : 'serif';
+  }
+
+  fontToggleBtn.addEventListener('click', function () {
+    const next = getCurrentFont() === 'sans' ? 'serif' : 'sans';
+    root.setAttribute('data-font', next);
+    localStorage.setItem('font', next);
+  });
+});