From 8765cfaf14d5dcde8d618798a299cf0fbacb23c6 Mon Sep 17 00:00:00 2001
From: ahfoysal <ahfoysal30@gmail.com>
Date: Mon, 6 Jul 2026 01:34:52 +0600
Subject: [PATCH] Add simple dark/light theme toggle on website

---
 _layouts/default.html | 49 ++++++++++++++++++++++++++++++++++---------
 assets/css/style.scss | 49 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 88 insertions(+), 10 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index 51e7f7b4f5..7eee80f8ca 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -54,6 +54,7 @@ <h1><a href=".">committers.top</a></h1>
         <p>A list of the most active GitHub users</p>
 
         <p class="view"><a href="https://github.com/ashkulz/committers.top.git"><img src="https://img.shields.io/github/stars/ashkulz/committers.top?style=social" /></a></p>
+        <p><button id="theme-toggle" type="button" aria-pressed="false">Switch to dark mode</button></p>
       </header>
       <section>
 
@@ -170,17 +171,45 @@ <h3 id="organizations">Organizations</h3>
     <script src="{{ '/assets/js/scale.fix.js' }}"></script>
 
     <script>
-      document.addEventListener("DOMContentLoaded", function() {
-        var hash = window.location.hash;
-        if (hash) {
-          var id = hash.substring(1);
-          var row = document.getElementById(id);
-          if (row) {
-            row.style.fontWeight = 'bold';
-            row.style.backgroundColor = '#f8f8f8';
-          }
+      (function() {
+        var storageKey = "committers-top-theme";
+        var body = document.querySelector("body");
+        var toggleButton = document.getElementById("theme-toggle");
+        var labels = {
+          dark: "Switch to dark mode",
+          light: "Switch to light mode"
+        };
+        var themes = ["light", "dark"];
+
+        function setTheme(theme) {
+          body.setAttribute("data-theme", theme);
+          toggleButton.textContent = labels[theme];
+          toggleButton.setAttribute("aria-pressed", theme === "dark" ? "true" : "false");
+          localStorage.setItem(storageKey, theme);
+        }
+
+        var savedTheme = localStorage.getItem(storageKey);
+        if (themes.indexOf(savedTheme) !== -1) {
+          setTheme(savedTheme);
         }
-      });
+
+        toggleButton.addEventListener("click", function() {
+          var current = body.getAttribute("data-theme") || "light";
+          setTheme(current === "dark" ? "light" : "dark");
+        });
+
+        document.addEventListener("DOMContentLoaded", function() {
+          var hash = window.location.hash;
+          if (hash) {
+            var id = hash.substring(1);
+            var row = document.getElementById(id);
+            if (row) {
+              row.style.fontWeight = 'bold';
+              row.style.backgroundColor = '#f8f8f8';
+            }
+          }
+        });
+      })();
     </script>
 
   <style type="text/css">
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 87fedf166e..0cda9634b8 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -97,3 +97,52 @@ ul.mode-selector {
 footer {
   width: 275px;
 }
+
+body[data-theme='dark'] {
+  --bg: #0d1117;
+  --text: #e6edf3;
+  --muted: #9ca3af;
+  --panel: #161b22;
+  --accent: #8ab4f8;
+  --table-border: #30363d;
+
+  background: var(--bg);
+  color: var(--text);
+
+  a {
+    color: var(--accent);
+  }
+
+  .wrapper {
+    background: var(--bg);
+  }
+
+  code,
+  pre {
+    color: #c9d1d9;
+  }
+
+  th,
+  td {
+    border-color: var(--table-border);
+  }
+
+  ul.mode-selector li.active {
+    background: #21262d;
+  }
+
+  table.organizations-list,
+  table.users-list {
+    color: var(--text);
+  }
+
+  #theme-toggle {
+    background-color: #21262d;
+    border: 1px solid #30363d;
+    color: var(--text);
+  }
+}
+
+body[data-theme='dark'] .wrapper {
+  border: 1px solid #30363d;
+}