UI: Padding for theme-switch button

pages/base.html

@@ -27,8 +27,8 @@
           <li><a href="/about" class="nav-link px-2 text-white">About</a></li>
         </ul>
 
-        <div class="text-end">
-          <button id="theme-switch-btn" class="btn btn-secondary">
+        <div class="text-end p-3">
+          <button id="theme-switch-btn" class="btn btn-secondary" onclick="toggleTheme();">
             <img id="theme-svg" src="/static/images/brightness-high.svg" alt="Change theme">
           </button>
         </div>
@@ -38,6 +38,7 @@
         </div>
         </div>
       </div>
+    </div>
   </header>
   
   <!-- Content -->
@@ -49,7 +50,30 @@
 <script src="/scripts/auth.js"></script>
 <script src="/scripts/api.js"></script>
 <script>
+function toggleTheme() {
+  if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
+      document.documentElement.setAttribute('data-bs-theme','light');
+      localStorage.setItem("theme", "light");
+      document.getElementById("theme-svg").src = "/static/images/brightness-high.svg";
+  } else {
+      document.documentElement.setAttribute('data-bs-theme','dark');
+      localStorage.setItem("theme", "dark");
+      document.getElementById("theme-svg").src = "/static/images/moon-stars.svg";
+  }
+}
+
 document.addEventListener('DOMContentLoaded', async function() {
+  // Theme
+  let theme = localStorage.getItem("theme");
+  if (theme) {
+    document.documentElement.setAttribute('data-bs-theme', theme);
+    if (theme == "dark") {
+        document.getElementById("theme-svg").src = "/static/images/moon-stars.svg";
+    } else {
+        document.getElementById("theme-svg").src = "/static/images/brightness-high.svg";
+    }
+  }
+
   // Check if auth info is valid
   try {
     let response = await getUser();
@@ -67,24 +91,6 @@
     return;
   }
 
-      // Theme
-      let theme = localStorage.getItem("theme");
-      if (theme) {
-        document.documentElement.setAttribute('data-bs-theme', theme);
-      }
-
-      document.getElementById('theme-switch-btn').addEventListener('click', () => {
-          if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
-              document.documentElement.setAttribute('data-bs-theme','light');
-              localStorage.setItem("theme", "light");
-              document.getElementById("theme-svg").src = "/static/images/brightness-high.svg";
-          } else {
-              document.documentElement.setAttribute('data-bs-theme','dark');
-              localStorage.setItem("theme", "dark");
-              document.getElementById("theme-svg").src = "/static/images/moon-stars.svg";
-          }
-      })
-
 }, false)
 </script>
 

scripts/api.js

@@ -34,9 +34,6 @@ async function get(url) {
     return fetch(url, {
         method: "GET",
         credentials: "include",
-        headers: {
-            "Content-Type": "application/json",
-        },
     })
 }