update dark and light mode

templates/partials/header_custom.html

@@ -30,7 +30,7 @@
                 </button>
             </div>
             <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
-            <nav class="flex space-x-10">
+            <nav class="flex space-x-10 items-center">
 
 {% for header_item in header_items %}
 {% if not loop.first %}
@@ -56,10 +56,15 @@
             <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
         </button>
         </div>
-
     {% endif %}  
 {% endif %}
 {% endfor %}
+
+  <!-- Dark/Light mode toggle button -->
+         <button id="theme-toggle" aria-label="Toggle dark mode" class="ml-4 p-2 rounded focus:outline-none border border-white bg-gray-800 text-yellow-300 hover:bg-gray-700 transition duration-150 ease-in-out">
+            <span id="theme-toggle-icon">🌙</span>
+        </button>
+        
 </nav>