chore: bump version to 1.7.22 and update CHANGELOG, tests and docs

client/src/ui/theme.js

@@ -4,24 +4,43 @@ import { getTheme, saveTheme } from '../utils/storage.js';
 
 // Apply saved theme immediately on load
 (function applyTheme() {
-  const theme = getTheme();
-  if (theme) {
-    document.documentElement.setAttribute('data-theme', theme);
-  }
+  const theme = getTheme() || 'light';
+  document.documentElement.setAttribute('data-theme', theme);
 })();
 
 export function initThemeSwitcher() {
-  const themeToggle = document.getElementById('theme-toggle');
-  if (!themeToggle) return;
+  const themeButtons = document.querySelectorAll('.theme-btn');
+  const currentTheme = getTheme() || 'light';
   
-  themeToggle.addEventListener('click', () => {
-    const currentTheme = getTheme();
-    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-    setTheme(newTheme);
+  // Set initial active state on buttons
+  themeButtons.forEach(btn => {
+    if (btn.getAttribute('data-theme') === currentTheme) {
+      btn.classList.add('active');
+    } else {
+      btn.classList.remove('active');
+    }
+    
+    btn.addEventListener('click', () => {
+      const theme = btn.getAttribute('data-theme');
+      if (theme) {
+        setTheme(theme);
+      }
+    });
   });
 }
 
 export function setTheme(theme) {
   document.documentElement.setAttribute('data-theme', theme);
   saveTheme(theme);
+  
+  // Sync button active classes if elements are present on the page
+  const themeButtons = document.querySelectorAll('.theme-btn');
+  themeButtons.forEach(btn => {
+    if (btn.getAttribute('data-theme') === theme) {
+      btn.classList.add('active');
+    } else {
+      btn.classList.remove('active');
+    }
+  });
 }
+