Fix dark mode flash by inlining critical script

- Move dark mode detection to inline script in HTML head - Prevents white flash in Firefox by applying theme before render - Clean up redundant code in dark-mode.js - Apply fix to all HTML pages for consistent behavior 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
WIP: Dark mode implementation in progress
2025-06-14 04:09:18 +02:00 · 2025-06-14 04:02:10 +02:00
10 changed files with 166 additions and 24 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@ -52,3 +52,10 @@ The `index.html` file serves as the main navigation page listing all available t

 ## Styling
 All HTML pages use the unified `styles.css` file for consistent styling. Keep styling in this CSS file as much as reasonably possible - avoid inline styles in HTML files. It's perfectly fine to add new classes to `styles.css` for future tests and functionality. This approach keeps the test code much more readable and maintainable.
+
+## Dark Mode
+The site includes a simple dark mode toggle available on all pages:
+- Toggle button (🌙/☀️) appears in the top-right corner of every page
+- Uses CSS variables for easy theme switching
+- User preference is saved in localStorage and persists across all pages
+- Implementation uses `dark-mode.js` for reusable functionality across all HTML files
--- a/account.html
+++ b/account.html
@ -5,8 +5,15 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Account Information</title>
    <link rel="stylesheet" href="styles.css">
+    <script>
+        // Apply dark mode immediately to prevent flash
+        if (localStorage.getItem('theme') === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+        }
+    </script>
 </head>
 <body>
+    <button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
    <h1>Account Information</h1>
    <p>Your authenticated user information:</p>
    
@ -73,5 +80,6 @@
        // Load user info when page loads
        document.addEventListener('DOMContentLoaded', loadUserInfo);
    </script>
+    <script src="dark-mode.js"></script>
 </body>
 </html>
--- a/ajax.html
+++ b/ajax.html
@ -5,8 +5,15 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Demo</title>
    <link rel="stylesheet" href="styles.css">
+    <script>
+        // Apply dark mode immediately to prevent flash
+        if (localStorage.getItem('theme') === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+        }
+    </script>
 </head>
 <body>
+    <button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
    <h1>AJAX Demo</h1>
    <p>This page demonstrates asynchronous loading. The UI loads immediately, then makes a slow API call in the background.</p>

@ -79,5 +86,6 @@
            loadSlowResponse();
        });
    </script>
+    <script src="dark-mode.js"></script>
 </body>
 </html>
--- a/dark-mode.js
+++ b/dark-mode.js
@ -0,0 +1,27 @@
+// Dark mode toggle functionality
+function toggleDarkMode() {
+    const html = document.documentElement;
+    const button = document.querySelector('.dark-mode-toggle');
+    
+    if (html.getAttribute('data-theme') === 'dark') {
+        html.removeAttribute('data-theme');
+        button.textContent = '🌙';
+        localStorage.setItem('theme', 'light');
+    } else {
+        html.setAttribute('data-theme', 'dark');
+        button.textContent = '☀️';
+        localStorage.setItem('theme', 'dark');
+    }
+}
+
+// Load saved theme on page load
+document.addEventListener('DOMContentLoaded', function() {
+    const savedTheme = localStorage.getItem('theme');
+    const button = document.querySelector('.dark-mode-toggle');
+    
+    if (savedTheme === 'dark') {
+        button.textContent = '☀️';
+    } else {
+        button.textContent = '🌙';
+    }
+});
--- a/echo-test.html
+++ b/echo-test.html
@ -5,8 +5,15 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Echo Test</title>
    <link rel="stylesheet" href="styles.css">
+    <script>
+        // Apply dark mode immediately to prevent flash
+        if (localStorage.getItem('theme') === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+        }
+    </script>
 </head>
 <body>
+    <button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
    <h1>Echo Test</h1>
    <p>Enter some text and click submit to test the echo API endpoint.</p>

@ -78,5 +85,6 @@
            document.getElementById('textInput').value = '';
        }
    </script>
+    <script src="dark-mode.js"></script>
 </body>
 </html>
--- a/index.html
+++ b/index.html
@ -5,8 +5,15 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Playground - Feature Showcase</title>
    <link rel="stylesheet" href="styles.css">
+    <script>
+        // Apply dark mode immediately to prevent flash
+        if (localStorage.getItem('theme') === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+        }
+    </script>
 </head>
 <body>
+    <button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
    <h1>Playground - Feature Showcase</h1>
    <p>Welcome to the development playground! Click on any feature below to test it:</p>
    
@ -36,5 +43,7 @@
            <div class="description">Background resource production demo - displays live-calculated mining values with automatic database updates every minute.</div>
        </li>
    </ul>
+
+    <script src="dark-mode.js"></script>
 </body>
 </html>
--- a/items.html
+++ b/items.html
@ -5,8 +5,15 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Items Management - Test</title>
    <link rel="stylesheet" href="styles.css">
+    <script>
+        // Apply dark mode immediately to prevent flash
+        if (localStorage.getItem('theme') === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+        }
+    </script>
 </head>
 <body>
+    <button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
    <div class="container">
        <h1>Items Management Test</h1>
        
@ -145,5 +152,6 @@
            return div.innerHTML;
        }
    </script>
+    <script src="dark-mode.js"></script>
 </body>
 </html>
--- a/mining.html
+++ b/mining.html
@ -5,8 +5,15 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mining Resources - Playground</title>
    <link rel="stylesheet" href="styles.css">
+    <script>
+        // Apply dark mode immediately to prevent flash
+        if (localStorage.getItem('theme') === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+        }
+    </script>
 </head>
 <body>
+    <button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
    <h1>Mining Resources</h1>
    
    <div class="section">
@ -96,5 +103,6 @@
        // Fetch fresh data from server every 30 seconds
        setInterval(fetchMiningData, 30000);
    </script>
+    <script src="dark-mode.js"></script>
 </body>
 </html>
--- a/random.html
+++ b/random.html
@ -5,8 +5,15 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Number Generator</title>
    <link rel="stylesheet" href="styles.css">
+    <script>
+        // Apply dark mode immediately to prevent flash
+        if (localStorage.getItem('theme') === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+        }
+    </script>
 </head>
 <body class="text-center">
+    <button class="dark-mode-toggle" onclick="toggleDarkMode()">🌙</button>
    <h1>Random Number Generator</h1>
    <div id="randomNumber" class="display-large">Loading...</div>
    <button class="btn-large" onclick="getNewNumber()">Get New Random Number</button>
@ -30,5 +37,6 @@
        // Load initial number when page opens
        getNewNumber();
    </script>
+    <script src="dark-mode.js"></script>
 </body>
 </html>
--- a/styles.css
+++ b/styles.css
@ -1,3 +1,29 @@
+/* CSS Variables for Light/Dark Mode */
+:root {
+    --bg-color: #ffffff;
+    --text-color: #333333;
+    --section-bg: #f9f9f9;
+    --border-color: #dddddd;
+    --input-bg: #ffffff;
+    --input-border: #cccccc;
+    --muted-text: #666666;
+    --timestamp-text: #999999;
+    --description-text: #666666;
+}
+
+/* Dark mode variables */
+html[data-theme="dark"] {
+    --bg-color: #1a1a1a;
+    --text-color: #e0e0e0;
+    --section-bg: #2d2d2d;
+    --border-color: #444444;
+    --input-bg: #2d2d2d;
+    --input-border: #555555;
+    --muted-text: #aaaaaa;
+    --timestamp-text: #888888;
+    --description-text: #aaaaaa;
+}
+
 /* Base Layout */
 body {
    font-family: Arial, sans-serif;
@ -5,22 +31,24 @@ body {
    margin: 50px auto;
    padding: 20px;
    line-height: 1.6;
+    background-color: var(--bg-color);
+    color: var(--text-color);
 }

 /* Typography */
 h1 {
-    color: #333;
+    color: var(--text-color);
    text-align: center;
    margin-bottom: 30px;
 }

 h3 {
-    color: #333;
+    color: var(--text-color);
    margin-top: 0;
 }

 p {
-    color: #333;
+    color: var(--text-color);
 }

 /* Buttons */
@ -54,9 +82,9 @@ button:disabled {
 .section {
    margin: 30px 0;
    padding: 20px;
-    border: 2px solid #ddd;
+    border: 2px solid var(--border-color);
    border-radius: 8px;
-    background-color: #f9f9f9;
+    background-color: var(--section-bg);
 }

 /* Feature List (for index page) */
@ -68,9 +96,9 @@ button:disabled {
 .feature-list li {
    margin: 15px 0;
    padding: 15px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--border-color);
    border-radius: 8px;
-    background-color: #f9f9f9;
+    background-color: var(--section-bg);
 }

 .feature-list a {
@ -85,7 +113,7 @@ button:disabled {
 }

 .description {
-    color: #666;
+    color: var(--description-text);
    margin-top: 8px;
    font-size: 14px;
 }
@ -94,9 +122,10 @@ button:disabled {
 .response-field {
    min-height: 50px;
    padding: 15px;
-    border: 2px solid #ccc;
+    border: 2px solid var(--input-border);
    border-radius: 4px;
-    background-color: white;
+    background-color: var(--input-bg);
+    color: var(--text-color);
    margin: 15px 0;
    font-size: 16px;
    word-wrap: break-word;
@ -106,12 +135,12 @@ button:disabled {
 .display-large {
    font-size: 48px;
    font-weight: bold;
-    color: #333;
+    color: var(--text-color);
    margin: 30px 0;
    padding: 20px;
-    border: 2px solid #ddd;
+    border: 2px solid var(--border-color);
    border-radius: 8px;
-    background-color: #f9f9f9;
+    background-color: var(--section-bg);
    text-align: center;
 }

@ -136,15 +165,17 @@ label {
 input[type="text"] {
    width: 100%;
    padding: 10px;
-    border: 2px solid #ccc;
+    border: 2px solid var(--input-border);
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
+    background-color: var(--input-bg);
+    color: var(--text-color);
 }

 /* Status Classes */
 .loading {
-    color: #666;
+    color: var(--muted-text);
    font-style: italic;
 }

@ -168,7 +199,7 @@ input[type="text"] {
 }

 .back-link a {
-    color: #666;
+    color: var(--muted-text);
    text-decoration: none;
 }

@ -178,13 +209,13 @@ input[type="text"] {

 /* Utility Classes */
 .info {
-    color: #666;
+    color: var(--muted-text);
    font-size: 14px;
    margin-top: 10px;
 }

 .timestamp {
-    color: #999;
+    color: var(--timestamp-text);
    font-size: 12px;
    margin-top: 5px;
 }
@ -209,19 +240,19 @@ input[type="text"] {
    justify-content: space-between;
    padding: 12px 15px;
    margin: 8px 0;
-    border: 1px solid #ddd;
+    border: 1px solid var(--border-color);
    border-radius: 6px;
-    background-color: white;
+    background-color: var(--input-bg);
 }

 .item-name {
    flex-grow: 1;
    font-size: 16px;
-    color: #333;
+    color: var(--text-color);
 }

 .item-id {
-    color: #666;
+    color: var(--muted-text);
    font-size: 14px;
    margin-right: 15px;
 }
@ -249,18 +280,38 @@ input[type="text"] {
 }

 .empty {
-    color: #666;
+    color: var(--muted-text);
    font-style: italic;
    text-align: center;
    padding: 20px;
 }

 .back-button {
-    color: #666;
+    color: var(--muted-text);
    text-decoration: none;
    font-size: 16px;
 }

+/* Dark Mode Toggle */
+.dark-mode-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background-color: var(--section-bg);
+    border: 2px solid var(--border-color);
+    border-radius: 25px;
+    padding: 8px 16px;
+    cursor: pointer;
+    font-size: 16px;
+    color: var(--text-color);
+    transition: all 0.3s ease;
+    z-index: 1000;
+}
+
+.dark-mode-toggle:hover {
+    background-color: var(--border-color);
+}
+
 .back-button:hover {
    text-decoration: underline;
 }