feat(ui): add dark/light mode toggle button

Author: Mujojo03

_includes/header.html

@@ -3,18 +3,25 @@
     <div class="Header-logo">
       <a href="{{ site.github.url }}/">{{ site.data.settings.title }}</a>
     </div>
+
     <nav class="Header-nav">
       {% for item in site.data.settings.menu %}
         {% if item.external %}
-        <a href="{{ item.url }}" target="_blank" rel="noopener nofollow">
+          <a href="{{ item.url }}" target="_blank" rel="noopener nofollow">
             {{ item.name }}
-        </a>
+          </a>
         {% else %}
           <a href="{{ site.github.url }}{{ item.url }}">{{ item.name }}</a>
         {% endif %}
       {% endfor %}
+
+      <!-- 🌙☀️ Theme Toggle Button -->
+      <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
+        🌙
+      </button>
     </nav>
   </div>
+
   <div class="Header-border">
     ==============================================================================================================================================================
   </div>

_layouts/default.html

@@ -13,8 +13,11 @@
 
     {% include footer.html %}
 
-  <div>
+  </div>
+
+  <!-- ✅ Load theme toggle script -->
+  <script src="{{ '/assets/js/script.js' | relative_url }}"></script>
 
 </body>
 
-</html>
+</html>

assets/css/_global.scss

@@ -1,10 +1,21 @@
+$background-light: #ffffff;
+$font-light: #000000;
+$primary-color-light: #ff7f00;
+
+$background-dark: #000000;
+$font-dark: #ffffff;
+$primary-color-dark: #ff7f00;
+
+
 html, body {
   font-family: $body-font;
   font-size: 16px;
   line-height: 1.5;
   background-color: $background-color;
   color: $font-color;
 
+  transition: background-color 0.4s ease, color 0.4s ease;
+
   @media (max-width: $large-screen) {
     font-size: 14px;
   }
@@ -18,21 +29,41 @@ html, body {
   }
 }
 
-.Site {
-  max-width: 880px;
-  margin: 0 auto;
-  padding: 2rem;
+
+body {
+  background-color: $background-light;
+  color: $font-light;
 }
 
 a {
-  color: $primary-color;
+  color: $primary-color-light;
   text-decoration: none;
+  transition: color 0.3s ease;
 
   &:hover {
-    color: rgba($primary-color, 0.8);
+    color: lighten($primary-color-light, 10%);
   }
 }
 
+body.dark-mode {
+  background-color: $background-dark;
+  color: $font-dark;
+}
+
+body.dark-mode a {
+  color: $primary-color-dark;
+
+  &:hover {
+    color: lighten($primary-color-dark, 10%);
+  }
+}
+
+.Site {
+  max-width: 880px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
 p {
   margin-bottom: 1rem;
 }
@@ -67,4 +98,4 @@ h4 {
   font-size: 1.2rem;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
-}
+}

assets/css/_header.scss

@@ -6,25 +6,43 @@
     margin-top: 0.4rem;
     overflow: hidden;
     user-select: none;
-    color: $font-color; // makes the divider white-ish
+    color: $font-color; 
   }
 
   &-inner {
-    display: flex;
+    display: flex;  
     justify-content: space-between;
     align-items: center;
     padding: 1rem 0;
   }
 
   &-logo {
     font-size: 2.2rem;
-    color: $font-color; // Make sure logo is visible too
+    color: $font-color; 
 
     @media (max-width: $small-screen) {
       font-size: 1.8rem;
     }
   }
 
+  .theme-toggle {
+  background: none;
+  border: 1px solid $primary-color-dark;
+  color: $primary-color-dark;
+  border-radius: 8px;
+  padding: 0.4rem 0.8rem;
+  cursor: pointer;
+  margin-left: 1.5rem;
+  font-size: 1.1rem;
+  transition: background 0.2s ease, color 0.2s ease;
+
+  &:hover {
+    background: $primary-color-dark;
+    color: #000;
+  }
+}
+
+
   &-nav {
     display: flex;
     font-size: 1.3rem;
@@ -34,8 +52,8 @@
     }
 
     a {
-      color: $primary-color;     // bright orange
-      opacity: 1;                // fully visible
+      color: $primary-color; 
+      opacity: 1;
       margin-left: 1.5rem;
       text-decoration: none;
       font-weight: 500;

assets/js/script.js

@@ -1 +1,21 @@
-// Place JS here
+// script.js
+document.addEventListener("DOMContentLoaded", () => {
+  const toggleButton = document.getElementById("theme-toggle");
+  const body = document.body;
+
+  const savedTheme = localStorage.getItem("theme");
+  if (savedTheme === "dark") {
+    body.classList.add("dark-mode");
+    toggleButton.textContent = "☀️"; // show sun icon for dark mode
+  } else {
+    body.classList.remove("dark-mode");
+    toggleButton.textContent = "🌙"; // show moon icon for light mode
+  }
+
+  // Toggle between light and dark mode
+  toggleButton.addEventListener("click", () => {
+    const isDarkMode = body.classList.toggle("dark-mode");
+    localStorage.setItem("theme", isDarkMode ? "dark" : "light");
+    toggleButton.textContent = isDarkMode ? "☀️" : "🌙";
+  });
+});