Skip to content

Commit a2d2d96

Browse files
TobiasMue91TobiasMue91
committed
- fix dark-/light-mode toggle
1 parent 65f31b7 commit a2d2d96

File tree

1 file changed

+46
-51
lines changed

1 file changed

+46
-51
lines changed

‎index.html‎

Lines changed: 46 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,6 @@
113113
.skeleton { position: relative; background-color: var(--card); border-radius: var(--radius); overflow: hidden; }
114114
.skeleton::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); animation: skeleton-shimmer 1.5s infinite; }
115115
@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }
116-
@media (prefers-color-scheme: dark) { .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); } }
117116
.skeleton-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
118117
.skeleton-img { width: 100%; aspect-ratio: 16/10; }
119118
.skeleton-title { height: 20px; width: 80%; margin: 1rem 1rem 0.5rem 1rem; }
@@ -136,40 +135,37 @@
136135
.stat-card {min-width:100px;}
137136
}
138137

139-
@media (prefers-color-scheme: dark) {
140-
:root { --primary:#029CDF; --primary-hover: #0276a8; --secondary: #bf6b0b; --secondary-hover: #9c5b06; --bg: #121212; --card: #1e1e1e; --dark: #d4d5d6; --gray: #2d2d2d; --text: #e4e6eb; --border: #333333; --shadow: 0 2px 6px rgba(0,0,0,0.2); }
141-
body { background-color: var(--bg); color: var(--text); background-image: url('img/crossword_pattern.png'); background-blend-mode: soft-light; opacity: 1; }
142-
header, .filter-bar, footer { background-color: var(--card); border-color: var(--border); }
143-
.card, .stat-card, .filter-dropdown { background-color: var(--card); box-shadow: var(--shadow); }
144-
.search-bar input, .sort-select, .category-select { background-color: var(--bg); color: var(--text); border-color: var(--border); }
145-
.search-bar input::placeholder { color: #909090; }
146-
.filter-btn { background-color: transparent; color: var(--text); border-color: var(--border); }
147-
.filter-btn:hover:not(.active):not(.random-btn) { border-color: var(--primary); }
148-
.filter-btn.active { background-color: var(--primary); color: white; }
149-
.filter-btn.random-btn { background-color: var(--secondary); color: white; }
150-
.section-title, .card-title { color: var(--dark); }
151-
.card-desc { color: #b0b3b8; }
152-
.card-btn.game { background-color: var(--primary); color: white; }
153-
.card-btn.tool { background-color: var(--secondary); color: white; }
154-
.view-btn { color: var(--primary); }
155-
.view-btn:hover, .view-btn.active { color: var(--secondary); }
156-
.footer-link { color: #b0b3b8; }
157-
.footer-link:hover { color: var(--primary); }
158-
.empty-state { color: #b0b3b8; }
159-
.empty-state svg { color: var(--border); }
160-
.back-to-top { background-color: var(--primary); color: white; }
161-
.pill.game { background: rgba(77, 132, 163, 0.3); color: var(--primary); }
162-
.pill.tool { background: rgba(245, 168, 73, 0.3); color: var(--secondary); }
163-
.skeleton { background: linear-gradient(90deg, var(--card) 0%, var(--gray) 50%, var(--card) 100%); }
164-
.skeleton-card { background-color: var(--card); }
165-
.skeleton-stat-card { background-color: var(--card); }
166-
}
167-
168138
.svg-inline--fa {display: inline-block;vertical-align: -0.125em;overflow: visible;}
169139
#themeToggleBtn:focus-visible {outline: 2px solid var(--primary);}
170140
.theme-icon-light, .theme-icon-dark {pointer-events: none;}
171141
.light-mode { --primary: #0276a8; --primary-hover: #015f87; --secondary: #bf6b0b; --secondary-hover: #9c5b06; --bg: #f8f9fa; --card: #fff; --dark: #1e272e; --gray: #e2e6ea; --text: #1e272e; --border: #dee2e6; --shadow: 0 2px 6px rgba(0,0,0,0.08); }
142+
.light-mode body { background-color: var(--bg); color: var(--text); background-image: url('img/crossword_pattern.png'); }
172143
.dark-mode { --primary: #029CDF; --primary-hover: #0276a8; --secondary: #bf6b0b; --secondary-hover: #9c5b06; --bg: #121212; --card: #1e1e1e; --dark: #d4d5d6; --gray: #2d2d2d; --text: #e4e6eb; --border: #333333; --shadow: 0 2px 6px rgba(0,0,0,0.2); }
144+
.dark-mode body { background-color: var(--bg); color: var(--text); background-image: url('img/crossword_pattern.png'); background-blend-mode: soft-light; opacity: 1; }
145+
.dark-mode header, .dark-mode .filter-bar, .dark-mode footer { background-color: var(--card); border-color: var(--border); }
146+
.dark-mode .card, .dark-mode .stat-card, .dark-mode .filter-dropdown { background-color: var(--card); box-shadow: var(--shadow); }
147+
.dark-mode .search-bar input, .dark-mode .sort-select, .dark-mode .category-select { background-color: var(--bg); color: var(--text); border-color: var(--border); }
148+
.dark-mode .search-bar input::placeholder { color: #909090; }
149+
.dark-mode .filter-btn { background-color: transparent; color: var(--text); border-color: var(--border); }
150+
.dark-mode .filter-btn:hover:not(.active):not(.random-btn) { border-color: var(--primary); }
151+
.dark-mode .filter-btn.active { background-color: var(--primary); color: white; }
152+
.dark-mode .filter-btn.random-btn { background-color: var(--secondary); color: white; }
153+
.dark-mode .section-title, .dark-mode .card-title { color: var(--dark); }
154+
.dark-mode .card-desc { color: #b0b3b8; }
155+
.dark-mode .card-btn.game { background-color: var(--primary); color: white; }
156+
.dark-mode .card-btn.tool { background-color: var(--secondary); color: white; }
157+
.dark-mode .view-btn { color: var(--primary); }
158+
.dark-mode .view-btn:hover, .dark-mode .view-btn.active { color: var(--secondary); }
159+
.dark-mode .footer-link { color: #b0b3b8; }
160+
.dark-mode .footer-link:hover { color: var(--primary); }
161+
.dark-mode .empty-state { color: #b0b3b8; }
162+
.dark-mode .empty-state svg { color: var(--border); }
163+
.dark-mode .back-to-top { background-color: var(--primary); color: white; }
164+
.dark-mode .pill.game { background: rgba(77, 132, 163, 0.3); color: var(--primary); }
165+
.dark-mode .pill.tool { background: rgba(245, 168, 73, 0.3); color: var(--secondary); }
166+
.dark-mode .skeleton { background: linear-gradient(90deg, var(--card) 0%, var(--gray) 50%, var(--card) 100%); }
167+
.dark-mode .skeleton-card { background-color: var(--card); }
168+
.dark-mode .skeleton-stat-card { background-color: var(--card); }
173169
.light-mode .theme-icon-light { display: none; }
174170
.light-mode .theme-icon-dark { display: inline-block !important; }
175171
.dark-mode .theme-icon-dark { display: none; }
@@ -302,34 +298,34 @@ <h3>No results found</h3>
302298
<script>
303299
const themeToggleBtn = document.getElementById('themeToggleBtn');
304300
const THEME_STORAGE_KEY = 'gptgames-theme';
305-
306-
function initTheme() {
307-
const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
308-
if (savedTheme === 'dark') {
309-
document.documentElement.classList.add('dark-mode');
310-
document.documentElement.classList.remove('light-mode');
311-
} else if (savedTheme === 'light') {
312-
document.documentElement.classList.add('light-mode');
313-
document.documentElement.classList.remove('dark-mode');
301+
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
302+
303+
function setTheme(theme, save) {
304+
const isDark = theme === 'dark';
305+
document.documentElement.classList.toggle('dark-mode', isDark);
306+
document.documentElement.classList.toggle('light-mode', !isDark);
307+
if (save) {
308+
localStorage.setItem(THEME_STORAGE_KEY, theme);
314309
}
315310
}
316311

317-
themeToggleBtn.addEventListener('click', function() {
312+
function initTheme() {
318313
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
319-
const isDarkMode = document.documentElement.classList.contains('dark-mode') ||
320-
(prefersDark && !document.documentElement.classList.contains('light-mode'));
314+
const preferredTheme = localStorage.getItem(THEME_STORAGE_KEY) || (prefersDark ? 'dark' : 'light');
315+
setTheme(preferredTheme, false);
316+
}
321317

322-
if (isDarkMode) {
323-
document.documentElement.classList.remove('dark-mode');
324-
document.documentElement.classList.add('light-mode');
325-
localStorage.setItem(THEME_STORAGE_KEY, 'light');
326-
} else {
327-
document.documentElement.classList.remove('light-mode');
328-
document.documentElement.classList.add('dark-mode');
329-
localStorage.setItem(THEME_STORAGE_KEY, 'dark');
318+
darkModeMediaQuery.addEventListener('change', (e) => {
319+
if (!localStorage.getItem(THEME_STORAGE_KEY)) {
320+
setTheme(e.matches ? 'dark' : 'light', false);
330321
}
331322
});
332323

324+
themeToggleBtn.addEventListener('click', function() {
325+
const isDarkMode = document.documentElement.classList.contains('dark-mode');
326+
setTheme(isDarkMode ? 'light' : 'dark', true);
327+
});
328+
333329
initTheme();
334330
</script>
335331
<script>
@@ -821,7 +817,6 @@ <h3 class="card-title" title="${item.title}">${item.title}</h3>
821817
window.scrollTo({top: 0, behavior: 'smooth'});
822818
});
823819

824-
// Initialize
825820
fetchData();
826821
</script>
827822
<script src="timeline.js"></script>

0 commit comments

Comments
 (0)