Update README.md

README.md

@@ -11,12 +11,6 @@
     transition: background-color 0.3s ease, color 0.3s ease;
   }
 
-  /* Light mode (default) */
-  .message-box {
-    background-color: #f0f0f0;
-    color: #222;
-  }
-
   .message-box strong {
     color: #0077cc;
   }
@@ -29,23 +23,94 @@
     color: #d6336c;
   }
 
+  /* Light mode (default) */
+  body.light-mode .message-box {
+    background-color: #f0f0f0;
+    color: #222;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  }
+  body.light-mode .message-box strong {
+    color: #0077cc;
+  }
+  body.light-mode .message-box code {
+    background-color: #ddd;
+    color: #d6336c;
+  }
+
   /* Dark mode */
-  @media (prefers-color-scheme: dark) {
-    .message-box {
-      background-color: #1e1e1e;
-      color: #eee;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.7);
-    }
-    .message-box strong {
-      color: #66aaff;
-    }
-    .message-box code {
-      background-color: #333;
-      color: #ff7fa1;
-    }
+  body.dark-mode .message-box {
+    background-color: #1e1e1e;
+    color: #eee;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.7);
+  }
+  body.dark-mode .message-box strong {
+    color: #66aaff;
+  }
+  body.dark-mode .message-box code {
+    background-color: #333;
+    color: #ff7fa1;
+  }
+
+  /* Toggle button */
+  .toggle-btn {
+    display: block;
+    margin: 0.5rem auto 2rem;
+    padding: 0.5rem 1.2rem;
+    font-size: 1rem;
+    font-weight: 600;
+    background-color: #0077cc;
+    border: none;
+    border-radius: 6px;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.25s ease;
+    user-select: none;
+  }
+  .toggle-btn:hover {
+    background-color: #005fa3;
   }
 </style>
 
+<button class="toggle-btn" aria-label="Toggle light/dark mode">Switch to Dark Mode</button>
+
 <div class="message-box">
   Open a discussion in the <strong>Community</strong> tab to request a <code>GGUF</code> model.
 </div>
+
+<script>
+  const toggleBtn = document.querySelector('.toggle-btn');
+  const body = document.body;
+
+  // Load saved mode or use system preference
+  const savedMode = localStorage.getItem('colorMode');
+  if (savedMode) {
+    body.classList.add(savedMode);
+  } else {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    body.classList.add(prefersDark ? 'dark-mode' : 'light-mode');
+  }
+
+  // Update button text based on mode
+  function updateButtonText() {
+    if (body.classList.contains('dark-mode')) {
+      toggleBtn.textContent = 'Switch to Light Mode';
+    } else {
+      toggleBtn.textContent = 'Switch to Dark Mode';
+    }
+  }
+  updateButtonText();
+
+  // Toggle mode on button click
+  toggleBtn.addEventListener('click', () => {
+    if (body.classList.contains('dark-mode')) {
+      body.classList.remove('dark-mode');
+      body.classList.add('light-mode');
+      localStorage.setItem('colorMode', 'light-mode');
+    } else {
+      body.classList.remove('light-mode');
+      body.classList.add('dark-mode');
+      localStorage.setItem('colorMode', 'dark-mode');
+    }
+    updateButtonText();
+  });
+</script>