From 8bc9e0824b46c200c4a65c6c91c64c718a1dff86 Mon Sep 17 00:00:00 2001
From: julle <git@juhlin.io>
Date: Tue, 3 Feb 2026 05:35:36 +0100
Subject: [PATCH] theme selection works

---
 layouts/_default/baseof.html | 46 +++++++++++++++++++++++++++++++++---
 public/index.html            | 46 +++++++++++++++++++++++++++++++++---
 2 files changed, 86 insertions(+), 6 deletions(-)

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 3287997..7b63548 100644
--- a/layouts/_default/baseof.html
+++ b/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);
-          }
+          applyTheme(savedTheme || 'theme-red');
           
           updateCursor();
           setupMouseListeners();
diff --git a/public/index.html b/public/index.html
index d45fff9..315ab7d 100644
--- a/public/index.html
+++ b/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);
-          }
+          applyTheme(savedTheme || 'theme-red');
           
           updateCursor();
           setupMouseListeners();