Improve layout/behavior and accessibility

hdyc-svelte/src/routes/+layout.svelte

@@ -32,23 +32,6 @@
     dark: PaletteTheme;
   };
 
-  const paletteVariableKeys: PaletteVar[] = [
-    'bg',
-    'bg-elevated',
-    'sidebar-bg',
-    'card-bg',
-    'input-bg',
-    'hover-bg',
-    'border',
-    'text',
-    'text-muted',
-    'accent',
-    'accent-dark',
-    'accent-glow',
-    'accent-gradient',
-    'header-bg',
-  ];
-
   const palettes: Palette[] = [
     {
       slug: 'classic',
@@ -272,21 +255,21 @@
   let theme: ThemeMode = 'dark';
   let selectedPaletteIndex = 0;
 
-  const updatePaletteStyles = (index: number, mode: ThemeMode) => {
+  const applyPalette = (index: number, persist = false) => {
+    const normalizedIndex = Math.max(0, Math.min(index, palettes.length - 1));
+    selectedPaletteIndex = normalizedIndex;
     if (!browser) return;
-    const palette = palettes[index];
-    const colors = palette[mode];
-    paletteVariableKeys.forEach(key => {
-      document.documentElement.style.setProperty(`--${key}`, colors[key]);
-    });
-    document.documentElement.dataset.palette = palette.slug;
+    const slug = palettes[normalizedIndex].slug;
+    document.documentElement.dataset.palette = slug;
+    if (persist) {
+      window.localStorage.setItem('palette', slug);
+    }
   };
 
   const updateTheme = (value: ThemeMode, persist = false) => {
     theme = value;
     if (!browser) return;
     document.documentElement.dataset.theme = value;
-    updatePaletteStyles(selectedPaletteIndex, value);
     if (persist) {
       window.localStorage.setItem('theme', value);
     }
@@ -298,10 +281,7 @@
   };
 
   const setPalette = (index: number) => {
-    selectedPaletteIndex = index;
-    if (!browser) return;
-    window.localStorage.setItem('palette', palettes[index].slug);
-    updatePaletteStyles(index, theme);
+    applyPalette(index, true);
   };
 
   onMount(() => {
@@ -310,10 +290,11 @@
     const savedTheme = window.localStorage.getItem('theme') as ThemeMode | null;
     const savedPalette = window.localStorage.getItem('palette');
     const paletteIndex = palettes.findIndex(palette => palette.slug === savedPalette);
-    selectedPaletteIndex = paletteIndex >= 0 ? paletteIndex : 0;
+    const initialPaletteIndex = paletteIndex >= 0 ? paletteIndex : 0;
+    applyPalette(initialPaletteIndex, Boolean(savedPalette));
 
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const initialTheme: ThemeMode = savedTheme ?? 'dark';
+    const initialTheme: ThemeMode = savedTheme ?? (mediaQuery.matches ? 'dark' : 'light');
     updateTheme(initialTheme, Boolean(savedTheme));
 
     const handlePreferenceChange = (event: MediaQueryListEvent) => {