feat: add dark theme and improved mouse icons

Author: Robin-Kumar-rk

public/assets/mouse-left.svg

@@ -19,6 +19,9 @@
 
     <nav class="nav">
       <a href="index.html" class="active">🎨 Draw first, Commit later.</a>
+      <button id="theme-toggle" class="theme-toggle" aria-label="Toggle Dark Mode">
+        <i class="fas fa-moon"></i>
+      </button>
     </nav>
   </header>
 
@@ -38,8 +41,10 @@ <h2>💠 GitHub Pattern → pattern.json</h2>
 
       <p class="hint">
         <strong>✍🏻 Unleash Your Creativity with Every Dot:</strong><br>
-        <b> 🖱️ Left Click  → Add</b><br>
-        <b> 🖱️ Right Click → Remove</b>
+        <span class="instruction-line"><img src="assets/mouse-left.svg" class="mouse-icon" alt="Left Click"> <b>Left
+            Click → Add</b> <span class="demo-cell filled"></span></span><br>
+        <span class="instruction-line"><img src="assets/mouse-right.svg" class="mouse-icon" alt="Right Click"> <b>Right
+            Click → Remove</b> <span class="demo-cell empty"></span></span>
       </p>
 
       <!-- Month labels -->

public/assets/mouse-right.svg

@@ -55,3 +55,38 @@ document.getElementById("download").onclick = () => {
   a.download = "pattern.json";
   a.click();
 };
+/* ================= THEME TOGGLE ================= */
+const toggleBtn = document.getElementById("theme-toggle");
+const toggleIcon = toggleBtn.querySelector("i");
+const rootElement = document.documentElement;
+
+// Function to set theme
+function setTheme(theme) {
+  if (theme === "dark") {
+    rootElement.setAttribute("data-theme", "dark");
+    toggleIcon.classList.remove("fa-moon");
+    toggleIcon.classList.add("fa-sun");
+    localStorage.setItem("theme", "dark");
+  } else {
+    rootElement.removeAttribute("data-theme");
+    toggleIcon.classList.remove("fa-sun");
+    toggleIcon.classList.add("fa-moon");
+    localStorage.setItem("theme", "light");
+  }
+}
+
+// Check local storage on load
+const savedTheme = localStorage.getItem("theme");
+if (savedTheme) {
+  setTheme(savedTheme);
+} else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+  // Optional: Auto-detect system preference if no saved preference
+  setTheme("dark");
+}
+
+// Toggle event
+toggleBtn.onclick = () => {
+  const currentTheme = rootElement.getAttribute("data-theme");
+  const newTheme = currentTheme === "dark" ? "light" : "dark";
+  setTheme(newTheme);
+};