update logos

templates/partials/header.html

@@ -6,14 +6,9 @@
         <div class="relative z-50">
         <div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
           <a href="{{ get_url(path='/') }}" class="flex">
-            <img 
-            id="site-logo" 
-            class="w-36 h-auto" 
-            style="max-width: none;" 
-            data-light="{{ get_url(path=section.extra.logoPathLight) }}" 
-            data-dark="{{ get_url(path=section.extra.logoPathDark) }}"
-            src="{{ get_url(path=section.extra.logoPathLight) }}" 
-            alt="ThreeFold Logo" />
+
+            <img id="lightLogo" src="{{ get_url(path=section.extra.logoPathLight) }}" alt="Light Logo" class="logo light w-36 h-auto" style="max-width: none;">
+            <img id="darkLogo" src="{{ get_url(path=section.extra.logoPathDark) }}" alt="Dark Logo" class="logo dark w-36 h-auto" style="max-width: none;">
           </a>
           {# <a href="{{ get_url(path='/') }}" class="flex">
             <img 
@@ -241,6 +236,24 @@
   color: #c7c7c7 !important;
 }
 
+.light {
+  
+  display: block; /* Show dark logo by default */
+}
+.dark {
+   
+  display: none; /* Hide light logo by default */
+}
+
+.light-mode .light {
+  
+  display: none; /* Hide dark logo in light mode */
+}
+.light-mode .dark {
+
+  display: block;/* Show light logo in light mode */
+}
+
 .theme-toggle {
   border: none !important;
   box-shadow: none !important;