From 084aa94c3b4451a07848aabb9910e7b60f78e8c1 Mon Sep 17 00:00:00 2001
From: Arya Kiran <arya@projectsegfau.lt>
Date: Wed, 17 Jul 2024 17:56:14 +0530
Subject: [PATCH] add dark mode toggle (closes #38)

---
 public/css/style.css | 109 +++++++++++++------------------------------
 views/header.html    |  59 +++++++++++++++++++++--
 2 files changed, 88 insertions(+), 80 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index f70d54e..966174c 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,28 +1,6 @@
 /*General theming*/
 
-.dark-mode {
-  --bg-color: #222;
-  --fg-color: #f8f9fa;
-  --button-fg: #010000;
-  --textarea-focus-border: #e5ebff;
-  --textarea-bg: var(--bg-color);
-  --select-border: #ccc;
-  --select-bg: #2f2f2f;
-  --select-fg: #b2b2b2;
-}
-
-.light-mode {
-  --bg-color: #ffedd5;
-  --fg-color: #000000;
-  --button-fg: #fbe9e7;
-  --textarea-focus-border: #261f1e;
-  --textarea-bg: #fff4e6;
-  --select-border: #888888;
-  --select-bg: #fff;
-  --select-fg: #2f2f2f;
-}
-
-body {
+:root, :root.dark {
   /* Global Values */
   --main-border-color: #b2b2b2;
   --accent-color: #f57c00;
@@ -39,13 +17,40 @@ body {
   --select-border: #ccc;
   --select-bg: #2f2f2f;
   --select-fg: #b2b2b2;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg-color: #ffedd5;
+    --fg-color: #000000;
+    --button-fg: #fbe9e7;
+    --textarea-focus-border: #261f1e;
+    --textarea-bg: #fff4e6;
+    --select-border: #888888;
+    --select-bg: #fff;
+    --select-fg: #2f2f2f;
+  }
+}
+
+:root.light {
+  --bg-color: #ffedd5;
+  --fg-color: #000000;
+  --button-fg: #fbe9e7;
+  --textarea-focus-border: #261f1e;
+  --textarea-bg: #fff4e6;
+  --select-border: #888888;
+  --select-bg: #fff;
+  --select-fg: #2f2f2f;
+}
+
+body {
   font-family: sans-serif;
   margin: 20px auto;
   line-height: 1.5em;
   max-width: 1000px;
   font-size: 1rem;
-  background-color: #222;
-  color: #f8f9fa;
+  background-color: var(--bg-color);
+  color: var(--fg-color);
   padding: 0 10px;
   hyphens: auto;
 }
@@ -144,6 +149,7 @@ button {
   border: none;
   border-radius: 4px;
   background: var(--accent-color);
+  color: var(--button-fg);
 }
 
 button:hover {
@@ -249,6 +255,8 @@ button:hover {
   border-left: 2px solid var(--accent-color);
   /* The rgba is the same value as above, but with a 0.25 opacity */
   box-shadow: 2px 2px 0px 0px var(--select-shadow);
+  background-color: var(--select-bg);
+  color: var(--select-fg);
 }
 
 .center-area {
@@ -314,54 +322,3 @@ div.definitions {
 div.translations {
   grid-area: translations;
 }
-
-@media (prefers-color-scheme: light) {
-  body {
-    --bg-color: #ffedd5;
-    --fg-color: #000000;
-    --button-fg: #fbe9e7;
-    --textarea-focus-border: #261f1e;
-    --textarea-bg: #fff4e6;
-    --select-border: #888888;
-    --select-bg: #fff;
-    --select-fg: #2f2f2f;
-    background-color: var(--bg-color);
-    color: var(--fg-color);
-  }
-
-  .options {
-    background-color: var(--bg-color);
-    box-shadow: 0 2px 4px var(--engine-options-shadow);
-    border: 1px solid var(--select-border);
-  }
-
-  .selected-option {
-    border: 1px solid var(--select-border);
-    color: var(--fg-color);
-  }
-
-  /* Theming for buttons and text areas*/
-  textarea {
-    border: 2px solid var(--textarea-border);
-    background-color: var(--textarea-bg);
-    color: var(--fg-color);
-  }
-
-  textarea:focus {
-    border-color: var(--textarea-focus-border);
-    outline: 1px solid var(--textarea-focus-border);
-  }
-
-  select,
-  .nice-select .nice-select-dropdown,
-  .nice-select,
-  .nice-select-search {
-    background-color: var(--select-bg);
-    color: var(--select-fg);
-  }
-
-  button,
-  #url {
-    color: var(--button-fg);
-  }
-}
diff --git a/views/header.html b/views/header.html
index d01dfd6..dac63c4 100644
--- a/views/header.html
+++ b/views/header.html
@@ -14,18 +14,69 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta charset="UTF-8" />
     <meta name="referrer" content="no-referrer" />
-	<script src="/js/nice-select2.js"></script>
-	<link rel="stylesheet" href="/css/nice-select2.css">
+    <script src="/js/nice-select2.js"></script>
+    <link rel="stylesheet" href="/css/nice-select2.css" />
     <link rel="stylesheet" href="/css/style.css" />
-	<link rel="manifest" href="/manifest.json">
+    <link rel="manifest" href="/manifest.json" />
   </head>
 
   <body>
     <header>
-      <a href="/"><img src="/assets/mozhi.png" alt="Mozhi Logo" class="navlogo" /></a>
+      <a href="/"
+        ><img src="/assets/mozhi.png" alt="Mozhi Logo" class="navlogo"
+      /></a>
       <nav>
         <a href="/about">About</a>
         <a href="/api/swagger">API</a>
+        <button onclick="toggleDarkMode()">
+          <svg
+            width="20px"
+            height="20px"
+            viewBox="0 0 24 24"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+          >
+            <g
+              id="🔍-Product-Icons"
+              stroke="none"
+              stroke-width="1"
+              fill="none"
+              fill-rule="evenodd"
+            >
+              <g
+                id="ic_fluent_dark_theme_24_regular"
+                fill="#212121"
+                fill-rule="nonzero"
+              >
+                <path
+                  d="M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,20.5 L12,3.5 C16.6944204,3.5 20.5,7.30557963 20.5,12 C20.5,16.6944204 16.6944204,20.5 12,20.5 Z"
+                  id="🎨-Color"
+                ></path>
+              </g>
+            </g>
+          </svg>
+        </button>
       </nav>
     </header>
+    <script>
+      function toggleDarkMode() {
+        if (document.documentElement.classList.contains("light")) {
+          document.documentElement.classList.remove("light");
+          document.documentElement.classList.add("dark");
+        } else if (document.documentElement.classList.contains("dark")) {
+          document.documentElement.classList.remove("dark");
+          document.documentElement.classList.add("light");
+        } else {
+          if (
+            window.matchMedia &&
+            window.matchMedia("(prefers-color-scheme: light)").matches
+          ) {
+            document.documentElement.classList.add("dark");
+          } else {
+            document.documentElement.classList.add("light");
+          }
+        }
+      }
+    </script>
     <br />