Implement theme toggle functionality with dark mode support

src/template/preview.hbs

@@ -30,17 +30,85 @@
             height: auto;
         }
 
+        :root {
+            --bg-color: #f8f8f8;
+            --text-color: #333;
+            --text-secondary: #666;
+            --card-bg: white;
+            --card-shadow: rgba(0, 0, 0, 0.06);
+            --card-shadow-hover: rgba(0, 0, 0, 0.24);
+            --input-border: rgba(0,0,0,.1);
+            --notification-bg: #212121;
+            --notification-text: white;
+        }
+
+        [data-theme="dark"] {
+            --bg-color: #1e1e1e;
+            --text-color: #cccccc;
+            --text-secondary: #999;
+            --card-bg: #252526;
+            --card-shadow: rgba(0, 0, 0, 0.3);
+            --card-shadow-hover: rgba(255, 255, 255, 0.1);
+            --input-border: rgba(255,255,255,.1);
+            --notification-bg: #3c3c3c;
+            --notification-text: #cccccc;
+        }
+
         body {
             font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
             margin: 0;
-            padding: 10px 20px;
+            padding: 0px 20px 10px 20px;
             text-align: center;
-            background-color: #f8f8f8;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            transition: background-color 0.3s ease, color 0.3s ease;
+        }
+
+        #header {
+            position: sticky;
+            top: 0;
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            margin: 0 auto;
+            padding: 20px 64px;
+            background-color: var(--bg-color);
+            z-index: 100;
+            transition: background-color 0.3s ease;
         }
 
         h1 {
             font-weight: bold;
-            margin: 24px;
+            margin: 0;
+            color: var(--text-color);
+            white-space: nowrap;
+            flex-shrink: 0;
+        }
+
+        #theme-toggle {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            padding: 10px 20px;
+            background-color: var(--card-bg);
+            color: var(--text-color);
+            border: 1px solid var(--input-border);
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            box-shadow: 0px 0px 12px var(--card-shadow);
+            transition: all 0.3s ease;
+            flex-shrink: 0;
+            white-space: nowrap;
+        }
+
+        #theme-toggle:hover {
+            box-shadow: 0px 0px 12px var(--card-shadow-hover);
+        }
+
+        #theme-toggle:focus {
+            outline: none;
+            border-color: #18a0fb;
         }
 
         .icon {
@@ -54,23 +122,23 @@
         }
 
         .icon:hover .inner {
-            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
+            box-shadow: 0px 0px 12px var(--card-shadow-hover);
         }
 
         .icon .inner {
             display: inline-block;
             width: 100%;
             text-align: center;
-            background-color: white;
-            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.06);
+            background-color: var(--card-bg);
+            box-shadow: 0px 0px 12px var(--card-shadow);
             border-radius: 4px;
             transition: all .3s ease-in-out;
         }
 
         .icon .inner {{ tag }} {
             padding: 16px 0;
             font-size: 48px;
-            color: #333;
+            color: var(--text-color);
             overflow: hidden;
         }
 
@@ -85,7 +153,7 @@
             box-sizing: border-box;
             padding: 4px;
             font-size: 10px;
-            color: #666;
+            color: var(--text-secondary);
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -96,15 +164,15 @@
         }
 
         #search {
-            display: flex;
-            width: 100%;
+            flex: 1;
             font-size: 16px;
             padding: 12px 16px;
-            margin: 0 auto;
-            max-width: 900px;
-            margin-bottom: 24px;
-            border: 1px solid rgba(0,0,0,.1);
-            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.06);
+            border: 1px solid var(--input-border);
+            box-shadow: 0px 0px 12px var(--card-shadow);
+            background-color: var(--card-bg);
+            color: var(--text-color);
+            transition: all 0.3s ease;
+            border-radius: 4px;
         }
 
         #search:focus {
@@ -125,8 +193,8 @@
             left: 50%;
             width: auto;
             transform: translateX(-50%);
-            color: white;
-            background-color: #212121;
+            color: var(--notification-text);
+            background-color: var(--notification-bg);
             padding: 8px 24px;
             border-radius: 8px;
             opacity: 0;
@@ -148,9 +216,11 @@
 </head>
 <body>
 
-    <h1>{{ name }}</h1>
-
-    <input type="text" id="search" placeholder="Search for icon names">
+    <div id="header">
+        <h1>{{ name }}</h1>
+        <input type="text" id="search" placeholder="Search for icon names" aria-label="Search for icon names">
+        <button id="theme-toggle" aria-label="Toggle theme"><i class="codicon codicon-color-mode"></i> Dark Mode</button>
+    </div>
 
     <div id="icons">
     {{# each assets }}
@@ -166,7 +236,7 @@
     </div>
 
     <div id="notification">📋 Copied: <span id="notification-id"></span></div>
-    <input type="text" id="copier">
+    <input type="text" id="copier" aria-label="Clipboard helper">
 
 <script type="text/javascript">
     let icons = document.getElementsByClassName('icon');
@@ -508,6 +578,53 @@
 
     search.focus();
 
+    // Theme toggle functionality
+    const themeToggle = document.getElementById('theme-toggle');
+    const html = document.documentElement;
+    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+
+    // Function to get the theme: check localStorage first, then system preference
+    function getTheme() {
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            return savedTheme;
+        }
+        return prefersDarkScheme.matches ? 'dark' : 'light';
+    }
+
+    // Initialize theme
+    const currentTheme = getTheme();
+    html.setAttribute('data-theme', currentTheme);
+    updateThemeButton(currentTheme);
+
+    // Listen for system theme changes
+    prefersDarkScheme.addEventListener('change', function(e) {
+        // Only update if user hasn't manually set a preference
+        if (!localStorage.getItem('theme')) {
+            const newTheme = e.matches ? 'dark' : 'light';
+            html.setAttribute('data-theme', newTheme);
+            updateThemeButton(newTheme);
+        }
+    });
+
+    // Manual toggle
+    themeToggle.addEventListener('click', function() {
+        const currentTheme = html.getAttribute('data-theme');
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+        html.setAttribute('data-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+        updateThemeButton(newTheme);
+    });
+
+    function updateThemeButton(theme) {
+        if (theme === 'dark') {
+            themeToggle.innerHTML = '<i class="codicon codicon-color-mode"></i> Light Mode';
+        } else {
+            themeToggle.innerHTML = '<i class="codicon codicon-color-mode"></i> Dark Mode';
+        }
+    }
+
 </script>
 </body>
 </html>