julle/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

theme selection works

Browse Source
This commit is contained in:
julle
2026-02-03 05:35:36 +01:00
parent e49c9f8928
commit 8bc9e0824b
2 changed files with 86 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/_default/baseof.html
+43 -3
View File
@@ -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();
public/index.html
+43 -3
View File
@@ -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();