theme selection works

layouts/_default/baseof.html

@@ -236,6 +236,11 @@
         .theme-swatch.active {
             outline: 2px solid #111;
             outline-offset: 3px;
+            box-shadow:
+                inset 0 0 0 2px rgba(255,255,255,0.35),
+                0 3px 0 rgba(0,0,0,0.25),
+                0 0 18px color-mix(in srgb, var(--theme-primary) 70%, white 30%),
+                0 0 36px color-mix(in srgb, var(--theme-primary) 55%, white 45%);
         }
 
         .theme-actions {
@@ -325,6 +330,11 @@
               context = modalName;
               activeIndex = 0;
               modals[modalName].classList.add('open');
+              if (modalName === 'options') {
+                  const currentTheme = getCurrentTheme();
+                  updateThemeSwatches(currentTheme);
+                  syncThemeFocus(currentTheme);
+              }
               updateCursor();
               setupMouseListeners(); // Re-bind for new modal elements
           }
@@ -381,6 +391,36 @@
 
           const themes = ['theme-red', 'theme-green', 'theme-blue'];
 
+          function getCurrentTheme() {
+              return themes.find((theme) => document.documentElement.classList.contains(theme)) || 'theme-red';
+          }
+
+          function syncThemeFocus(themeName) {
+              if (context !== 'options') return;
+              const links = getActiveLinks();
+              let nextIndex = 0;
+              links.forEach((link, index) => {
+                  if (link.getAttribute('data-payload') === themeName) {
+                      nextIndex = index;
+                  }
+              });
+              activeIndex = nextIndex;
+              updateCursor();
+          }
+
+          function updateThemeSwatches(themeName) {
+              const optionsModal = modals.options;
+              if (!optionsModal) return;
+              const swatches = optionsModal.querySelectorAll('.theme-swatch');
+              swatches.forEach((swatch) => {
+                  if (swatch.getAttribute('data-payload') === themeName) {
+                      swatch.classList.add('active');
+                  } else {
+                      swatch.classList.remove('active');
+                  }
+              });
+          }
+
           function applyTheme(themeName) {
               themes.forEach((theme) => {
                   document.documentElement.classList.remove(theme);
@@ -388,6 +428,8 @@
               });
               document.documentElement.classList.add(themeName);
               document.body.classList.add(themeName);
+              updateThemeSwatches(themeName);
+              syncThemeFocus(themeName);
           }
 
           function setTheme(themeName) {
@@ -398,9 +440,7 @@
 
           // --- Init ---
           const savedTheme = localStorage.getItem('pkmn_theme');
-          if (savedTheme) {
+          applyTheme(savedTheme || 'theme-red');
-              applyTheme(savedTheme);
-          }
           
           updateCursor();
           setupMouseListeners();

public/index.html

@@ -237,6 +237,11 @@
         .theme-swatch.active {
             outline: 2px solid #111;
             outline-offset: 3px;
+            box-shadow:
+                inset 0 0 0 2px rgba(255,255,255,0.35),
+                0 3px 0 rgba(0,0,0,0.25),
+                0 0 18px color-mix(in srgb, var(--theme-primary) 70%, white 30%),
+                0 0 36px color-mix(in srgb, var(--theme-primary) 55%, white 45%);
         }
 
         .theme-actions {
@@ -528,6 +533,11 @@
               context = modalName;
               activeIndex = 0;
               modals[modalName].classList.add('open');
+              if (modalName === 'options') {
+                  const currentTheme = getCurrentTheme();
+                  updateThemeSwatches(currentTheme);
+                  syncThemeFocus(currentTheme);
+              }
               updateCursor();
               setupMouseListeners(); 
           }
@@ -584,6 +594,36 @@
 
           const themes = ['theme-red', 'theme-green', 'theme-blue'];
 
+          function getCurrentTheme() {
+              return themes.find((theme) => document.documentElement.classList.contains(theme)) || 'theme-red';
+          }
+
+          function syncThemeFocus(themeName) {
+              if (context !== 'options') return;
+              const links = getActiveLinks();
+              let nextIndex = 0;
+              links.forEach((link, index) => {
+                  if (link.getAttribute('data-payload') === themeName) {
+                      nextIndex = index;
+                  }
+              });
+              activeIndex = nextIndex;
+              updateCursor();
+          }
+
+          function updateThemeSwatches(themeName) {
+              const optionsModal = modals.options;
+              if (!optionsModal) return;
+              const swatches = optionsModal.querySelectorAll('.theme-swatch');
+              swatches.forEach((swatch) => {
+                  if (swatch.getAttribute('data-payload') === themeName) {
+                      swatch.classList.add('active');
+                  } else {
+                      swatch.classList.remove('active');
+                  }
+              });
+          }
+
           function applyTheme(themeName) {
               themes.forEach((theme) => {
                   document.documentElement.classList.remove(theme);
@@ -591,6 +631,8 @@
               });
               document.documentElement.classList.add(themeName);
               document.body.classList.add(themeName);
+              updateThemeSwatches(themeName);
+              syncThemeFocus(themeName);
           }
 
           function setTheme(themeName) {
@@ -601,9 +643,7 @@
 
           
           const savedTheme = localStorage.getItem('pkmn_theme');
-          if (savedTheme) {
+          applyTheme(savedTheme || 'theme-red');
-              applyTheme(savedTheme);
-          }
           
           updateCursor();
           setupMouseListeners();