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();