- add dark/light-mode toggle

TobiasMue91 · TobiasMue91 · commit 69deb976d670 · 2025-03-07T14:39:06.000+01:00
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
     <title>GPTGames: Collection of AI-Generated HTML Games and Utilities</title>
     <style>
         :root {
-            --primary:#0276a8; --primary-hover: #015f87; --secondary:#d97e0c; --secondary-hover:#b56908;
+            --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); --radius:8px; --transition:all 0.2s ease;
         }
@@ -137,7 +137,7 @@
         }
 
         @media (prefers-color-scheme: dark) {
-            :root { --primary:#029CDF; --primary-hover: #0276a8; --secondary: #f5a849; --secondary-hover: #ffbe59; --bg: #121212; --card: #1e1e1e; --dark: #d4d5d6; --gray: #2d2d2d; --text: #e4e6eb; --border: #333333; --shadow: 0 2px 6px rgba(0,0,0,0.2); }
+            :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); }
             body { background-color: var(--bg); color: var(--text); background-image: url('img/crossword_pattern.png'); background-blend-mode: soft-light; opacity: 1; }
             header, .filter-bar, footer { background-color: var(--card); border-color: var(--border); }
             .card, .stat-card, .filter-dropdown { background-color: var(--card); box-shadow: var(--shadow); }
@@ -165,11 +165,15 @@
             .skeleton-stat-card { background-color: var(--card); }
         }
 
-        .svg-inline--fa {
-            display: inline-block;
-            vertical-align: -0.125em;
-            overflow: visible;
-        }
+        .svg-inline--fa {display: inline-block;vertical-align: -0.125em;overflow: visible;}
+        #themeToggleBtn:focus-visible {outline: 2px solid var(--primary);}
+        .theme-icon-light, .theme-icon-dark {pointer-events: none;}
+        .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); }
+        .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); }
+        .light-mode .theme-icon-light { display: none; }
+        .light-mode .theme-icon-dark { display: inline-block !important; }
+        .dark-mode .theme-icon-dark { display: none; }
+        .dark-mode .theme-icon-light { display: inline-block !important; }
     </style>
 </head>
 <body>
@@ -197,6 +201,14 @@
                     <path d="M40 48C26.7 48 16 58.7 16 72l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24L40 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM16 232l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0z"/>
                 </svg>
             </button>
+            <button class="view-btn tooltip" id="themeToggleBtn" data-tooltip="Toggle Dark/Light Mode" aria-label="Toggle Dark/Light Mode">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa theme-icon-light" aria-hidden="true" style="display: none;">
+                    <path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/>
+                </svg>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa theme-icon-dark" aria-hidden="true" style="display: none;">
+                    <path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/>
+                </svg>
+            </button>
         </div>
     </div>
 </header>
@@ -287,6 +299,39 @@ <h3>No results found</h3>
     </svg>
 </button>
 
+<script>
+    const themeToggleBtn = document.getElementById('themeToggleBtn');
+    const THEME_STORAGE_KEY = 'gptgames-theme';
+
+    function initTheme() {
+        const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+        if (savedTheme === 'dark') {
+            document.documentElement.classList.add('dark-mode');
+            document.documentElement.classList.remove('light-mode');
+        } else if (savedTheme === 'light') {
+            document.documentElement.classList.add('light-mode');
+            document.documentElement.classList.remove('dark-mode');
+        }
+    }
+
+    themeToggleBtn.addEventListener('click', function() {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const isDarkMode = document.documentElement.classList.contains('dark-mode') ||
+            (prefersDark && !document.documentElement.classList.contains('light-mode'));
+
+        if (isDarkMode) {
+            document.documentElement.classList.remove('dark-mode');
+            document.documentElement.classList.add('light-mode');
+            localStorage.setItem(THEME_STORAGE_KEY, 'light');
+        } else {
+            document.documentElement.classList.remove('light-mode');
+            document.documentElement.classList.add('dark-mode');
+            localStorage.setItem(THEME_STORAGE_KEY, 'dark');
+        }
+    });
+
+    initTheme();
+</script>
 <script>
     document.getElementById('currentYear').textContent = new Date().getFullYear();
     const searchInput = document.getElementById('searchInput');
