Added simple navbar background, Will modify later.

public/404.html

@@ -1,13 +1,6 @@
 <script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script><main>
     <div class="about">
-      <div>
-        <div style="background: #ed9458; border-radius: 25px;
-        font-size: 20px; 
-        padding: 10px; 
-        border: 1px solid #FFFFFF; 
-        margin: 10px;
-        text-align: center;
-        vertical-align: middle;">
+      <div class="bgbox">
         <p>404</p>
         <p>Page not found, Meaning it either does not exist or is broken.</p>
         <div>

public/assets/css/style.css

@@ -161,7 +161,7 @@ body.dark-mode a:hover {
 }
 .navbar-no-bg {
   padding-top: 10px;
-  background: none;
+  background-color: rgba(68, 68, 68, 0.8); /* Black background with 80% opacity */
 }
 
 ul.navbar-nav {

public/projects/index.html

@@ -13,6 +13,7 @@
     <title></title>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="/assets/js/dark-mode.js"></script>
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
     <link
       rel="stylesheet"
@@ -51,15 +52,6 @@
             />
             <script src="/assets/js/lanyard.js"></script>
           </a>
-          <a
-            style="margin-left: 59px; margin-top: 7px; display: inline-block"
-            href="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml"
-          >
-            <img
-              src="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml/badge.svg?branch=main"
-              alt="Deploy Hugo site to Pages"
-            />
-          </a>
           <link rel="home" href="/" />
         </div>
         <div class="collapse navbar-collapse" id="top-navbar-1">
@@ -70,6 +62,7 @@
             <li><a class="btn btn-link-3" href="/discord">Discord</a></li>
             <li><a class="btn btn-link-3" href="/pages">Pages</a></li>
             <li><a class="btn btn-link-3" href="/credits">Credits</a></li>
+            <li><a class="btn btn-link-3" id="toggle-dark-mode" onclick="toggleDarkMode()">🌙</a></li>
           </ul>
         </div>
       </div>
@@ -93,7 +86,7 @@
 
     <footer>
       <div class="container">
-        <div class="bgbox">
+        <div class="bgboxfooter">
           <div class="row">
             &copy;
             <b

public/radio/index.html

@@ -13,6 +13,7 @@
     <title></title>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="/assets/js/dark-mode.js"></script>
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
     <link
       rel="stylesheet"
@@ -51,15 +52,6 @@
             />
             <script src="/assets/js/lanyard.js"></script>
           </a>
-          <a
-            style="margin-left: 59px; margin-top: 7px; display: inline-block"
-            href="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml"
-          >
-            <img
-              src="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml/badge.svg?branch=main"
-              alt="Deploy Hugo site to Pages"
-            />
-          </a>
           <link rel="home" href="/" />
         </div>
         <div class="collapse navbar-collapse" id="top-navbar-1">
@@ -70,6 +62,7 @@
             <li><a class="btn btn-link-3" href="/discord">Discord</a></li>
             <li><a class="btn btn-link-3" href="/pages">Pages</a></li>
             <li><a class="btn btn-link-3" href="/credits">Credits</a></li>
+            <li><a class="btn btn-link-3" id="toggle-dark-mode" onclick="toggleDarkMode()">🌙</a></li>
           </ul>
         </div>
       </div>
@@ -97,7 +90,7 @@
 
     <footer>
       <div class="container">
-        <div class="bgbox">
+        <div class="bgboxfooter">
           <div class="row">
             &copy;
             <b

public/salad/index.html

@@ -13,6 +13,7 @@
     <title></title>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="/assets/js/dark-mode.js"></script>
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
     <link
       rel="stylesheet"
@@ -51,15 +52,6 @@
             />
             <script src="/assets/js/lanyard.js"></script>
           </a>
-          <a
-            style="margin-left: 59px; margin-top: 7px; display: inline-block"
-            href="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml"
-          >
-            <img
-              src="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml/badge.svg?branch=main"
-              alt="Deploy Hugo site to Pages"
-            />
-          </a>
           <link rel="home" href="/" />
         </div>
         <div class="collapse navbar-collapse" id="top-navbar-1">
@@ -70,6 +62,7 @@
             <li><a class="btn btn-link-3" href="/discord">Discord</a></li>
             <li><a class="btn btn-link-3" href="/pages">Pages</a></li>
             <li><a class="btn btn-link-3" href="/credits">Credits</a></li>
+            <li><a class="btn btn-link-3" id="toggle-dark-mode" onclick="toggleDarkMode()">🌙</a></li>
           </ul>
         </div>
       </div>
@@ -103,7 +96,7 @@ <h2>
 
     <footer>
       <div class="container">
-        <div class="bgbox">
+        <div class="bgboxfooter">
           <div class="row">
             &copy;
             <b

static/assets/css/style.css

@@ -161,7 +161,7 @@ body.dark-mode a:hover {
 }
 .navbar-no-bg {
   padding-top: 10px;
-  background: none;
+  background-color: rgba(68, 68, 68, 0.8); /* Black background with 80% opacity */
 }
 
 ul.navbar-nav {

static/assets/js/dark-mode.js

@@ -9,7 +9,9 @@ function toggleDarkMode() {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
-  if (localStorage.getItem("dark-mode") === "enabled") {
+  const darkModeSetting = localStorage.getItem("dark-mode");
+
+  if (darkModeSetting === "enabled" || darkModeSetting === null) {
     document.body.classList.add("dark-mode");
   } else {
     document.body.classList.remove("dark-mode");