+
Nebula
✓
-
Nebula
✓
+
Crescent
✓
-
Crescent
✓
+
Event Horizon
✓
-
Event Horizon
✓
+
Merchantman
✓
-
Merchantman
✓
+
Julia & Jin
✓
-
Julia & Jin
✓
+
SC Sunset
✓
-
SC Sunset
✓
+
HUD
✓
-
HUD
✓
+
Energy
✓
-
Energy
✓
+
Satisfactory
✓
-
Satisfactory
✓
+
Avorion
✓
-
Avorion
✓
+
Stealth
✓
diff --git a/src/js/settings.js b/src/js/settings.js
index bd8594f..edc511f 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -199,15 +199,25 @@ function bindSettingsEvents() {
});
// Theme-Picker (Cards im Theme-Modal)
- document.querySelectorAll('.theme-card').forEach(card => {
- card.addEventListener('click', async () => {
- const name = card.dataset.value;
- if (!name || name === settings.theme) return;
- settings.theme = name;
- settings.bgUrl = '';
- document.getElementById('bgUrlInput').value = '';
- switchTheme(name);
- await saveSettings();
+ const themeCards = document.querySelectorAll('.theme-card');
+ function selectThemeCard(card) {
+ const name = card.dataset.value;
+ if (!name || name === settings.theme) return Promise.resolve();
+ settings.theme = name;
+ settings.bgUrl = '';
+ document.getElementById('bgUrlInput').value = '';
+ // aria-pressed synchron halten — applyTheme/switchTheme pflegt nur die .active-Klasse, nicht ARIA
+ themeCards.forEach(c => c.setAttribute('aria-pressed', c === card ? 'true' : 'false'));
+ switchTheme(name); // WICHTIG: switchTheme aus Phase 4 (View-Transition-Wrapper), NICHT applyTheme direkt — sonst geht der Theme-Fade verloren
+ return saveSettings();
+ }
+ themeCards.forEach(card => {
+ card.addEventListener('click', () => selectThemeCard(card));
+ card.addEventListener('keydown', e => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ selectThemeCard(card);
+ }
});
});
Stealth
✓
diff --git a/src/js/settings.js b/src/js/settings.js
index bd8594f..edc511f 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -199,15 +199,25 @@ function bindSettingsEvents() {
});
// Theme-Picker (Cards im Theme-Modal)
- document.querySelectorAll('.theme-card').forEach(card => {
- card.addEventListener('click', async () => {
- const name = card.dataset.value;
- if (!name || name === settings.theme) return;
- settings.theme = name;
- settings.bgUrl = '';
- document.getElementById('bgUrlInput').value = '';
- switchTheme(name);
- await saveSettings();
+ const themeCards = document.querySelectorAll('.theme-card');
+ function selectThemeCard(card) {
+ const name = card.dataset.value;
+ if (!name || name === settings.theme) return Promise.resolve();
+ settings.theme = name;
+ settings.bgUrl = '';
+ document.getElementById('bgUrlInput').value = '';
+ // aria-pressed synchron halten — applyTheme/switchTheme pflegt nur die .active-Klasse, nicht ARIA
+ themeCards.forEach(c => c.setAttribute('aria-pressed', c === card ? 'true' : 'false'));
+ switchTheme(name); // WICHTIG: switchTheme aus Phase 4 (View-Transition-Wrapper), NICHT applyTheme direkt — sonst geht der Theme-Fade verloren
+ return saveSettings();
+ }
+ themeCards.forEach(card => {
+ card.addEventListener('click', () => selectThemeCard(card));
+ card.addEventListener('keydown', e => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ selectThemeCard(card);
+ }
});
});