Add dark mode toggle

static/src/js/darkmode.js

@@ -1,9 +1,13 @@
 const DARK_MODE_CLASS = "dark-mode";
+const STORAGE_KEY = "dark-mode";
+
 const body = document.getElementsByTagName("body")[0];
+const darkModeToggle = document.getElementById("dark-mode-toggle");
 
 const matchesDarkMode = window.matchMedia("(prefers-color-scheme: dark)");
 
 function handleDarkMode(darkMode) {
+  window.localStorage.setItem(STORAGE_KEY, darkMode.toString());
   if (darkMode) {
     body.classList.add(DARK_MODE_CLASS);
   } else {
@@ -11,8 +15,19 @@ function handleDarkMode(darkMode) {
   }
 }
 
-matchesDarkMode.addEventListener("change", (event) =>
-  handleDarkMode(event.matches)
-);
+if (window.localStorage.getItem(STORAGE_KEY) === null) {
+  window.localStorage.setItem(STORAGE_KEY, matchesDarkMode.matches);
+  handleDarkMode(matchesDarkMode.matches);
+} else {
+  handleDarkMode(window.localStorage.getItem(STORAGE_KEY) === "true");
+}
 
-handleDarkMode(matchesDarkMode.matches);
+window.addEventListener("load", () => {
+  matchesDarkMode.addEventListener("change", (event) =>
+    handleDarkMode(event.matches)
+  );
+
+  darkModeToggle.addEventListener("click", () => {
+    handleDarkMode(window.localStorage.getItem(STORAGE_KEY) !== "true");
+  });
+});

static/src/scss/_navbar.scss

@@ -6,3 +6,11 @@
     color: $white;
   }
 }
+
+#dark-mode-toggle i {
+  transition: transform 0.3s;
+
+  @include dark-mode {
+    transform: rotate(180deg);
+  }
+}

website/common/templates/common/navbar.html

@@ -22,14 +22,19 @@
       {% endfor %}
     </div>
 
-    {% if search_page %}
-      <div class="navbar-end is-hidden-touch mr-2">
+    <div class="navbar-end is-hidden-touch mr-2">
+      <a class="navbar-item navbar-icon is-link" id="dark-mode-toggle">
+        <span class="icon">
+          <i class="fa-solid fa-circle-half-stroke" aria-hidden="true"></i>
+        </span>
+      </a>
+      {% if search_page %}
         <a class="navbar-item navbar-icon" href="{% pageurl search_page %}">
           <span class="icon">
             <i class="fas fa-search" aria-hidden="true"></i>
           </span>
         </a>
-      </div>
-    {% endif %}
+      {% endif %}
+    </div>
   </div>
 </nav>