From 7d62fccefa146172831dd619c9fa4cdfa4cb1fb3 Mon Sep 17 00:00:00 2001
From: Soham Nayak <sohamnayak04@gmail.com>
Date: Tue, 11 Feb 2025 03:39:16 +0530
Subject: [PATCH] added dark mode

---
 index.html |  5 +++++
 index.js   | 12 ++++++++++++
 style.css  | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 50 insertions(+)

diff --git a/index.html b/index.html
index bea9390..14f9da2 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,11 @@
 <div class="before"></div>
 <div class="content">
 
+  <div id="dark-mode-toggle">
+    <button id="toggle-dark-mode">Toggle Theme</button>
+    <span id="dark-mode-status">Light Mode</span>
+  </div>
+
 <div id="toggle-wrapper">
   <a id="toggle" class="neutral" href="" title="Switch between HTTP and HTTPS.">
     <span class="http">HTTP</span>
diff --git a/index.js b/index.js
index 674692e..63a58ab 100644
--- a/index.js
+++ b/index.js
@@ -4,6 +4,18 @@
 
 window.addEventListener("load", function() {
 
+  const toggleDarkModeButton = document.getElementById('toggle-dark-mode');
+  const darkModeStatus = document.getElementById('dark-mode-status');
+
+  toggleDarkModeButton.addEventListener('click', function() {
+    document.body.classList.toggle('dark-mode');
+    if (document.body.classList.contains('dark-mode')) {
+      darkModeStatus.textContent = 'Dark Mode';
+    } else {
+      darkModeStatus.textContent = 'Light Mode';
+    }
+  });
+
   var toggle = document.querySelector("#toggle");
   toggle.classList.add("instant");
   if (window.location.protocol == "https:") {
diff --git a/style.css b/style.css
index 443f469..6037a2b 100644
--- a/style.css
+++ b/style.css
@@ -213,3 +213,36 @@ permission {
   display: block;
   z-index: 99999; /* github-fork-ribbon-wrapper uses 9999 */
 }
+
+
+/* Dark Mode Styles */
+body.dark-mode {
+  background: #333;
+  color: #FFF;
+}
+
+body.dark-mode button {
+  background: #444;
+  color: #FFF;
+}
+
+body.dark-mode .content {
+  background: #444;
+}
+
+body.dark-mode .permission-status > span,
+body.dark-mode .access-status > span {
+  color: #FFF;
+}
+
+/* Dark Mode Toggle Button Styles */
+#dark-mode-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1em;
+}
+
+#toggle-dark-mode {
+  margin-right: 1em;
+}
\ No newline at end of file