update logos

content/footer/_index.md

@@ -4,7 +4,7 @@ description: ""
 insert_anchor_links: "left"
 template: "partials/footer.html"
 extra:
-  logoPath: "images/new_logo_tft_light.png"
+  logoPath: "images/logolight.png"
   socialLinks: { Twitter: "https://twitter.com/threefold_io", Telegram: "https://t.me/threefoldnews", Github: "https://github.com/threefoldfoundation", Github2: "https://github.com/threefoldtech"}
 ---
 

css/index.css

@@ -51,14 +51,12 @@ body.light-mode .icon {
   fill: #424242 !important;
 }
 
+
+
 .double_bg {
   background-color: rgb(100 100 100 / 0.2);
 }
 
-
-
-
-
 .dashboard:hover {
 
   background: #74ddc3 !important;

static/js/custom.js

@@ -194,34 +194,34 @@ document.getElementById("year").innerHTML = new Date().getFullYear();
 
 
 
-// Get the toggle switch and the logo element
+// Get elements
 const toggleSwitch = document.getElementById('lightModeSwitch');
-const siteLogo = document.getElementById('site-logo');
+const body = document.body;
 
 // Apply the saved theme on load
 document.addEventListener('DOMContentLoaded', () => {
-  const savedTheme = localStorage.getItem('theme');
+    const savedTheme = localStorage.getItem('theme') || 'dark'; // Default to dark mode
-  if (savedTheme === 'light') {
+
-    document.body.classList.add('light-mode');
+    if (savedTheme === 'light') {
-    toggleSwitch.checked = true;
+        body.classList.add('light-mode');
-    siteLogo.src = siteLogo.getAttribute('data-light'); // Use light mode logo
+        body.classList.remove('dark-mode');
-  } else {
+        toggleSwitch.checked = true;
-    document.body.classList.remove('light-mode');
+    } else {
-    toggleSwitch.checked = false;
+        body.classList.add('dark-mode');
-    siteLogo.src = siteLogo.getAttribute('data-dark'); // Use dark mode logo
+        body.classList.remove('light-mode');
-  }
+        toggleSwitch.checked = false;
+    }
 });
 
-// Toggle light mode
+// Toggle between light and dark mode
 toggleSwitch.addEventListener('change', () => {
-  if (toggleSwitch.checked) {
+    if (toggleSwitch.checked) {
-    document.body.classList.add('light-mode');
+        body.classList.add('light-mode');
-    localStorage.setItem('theme', 'light');
+        body.classList.remove('dark-mode');
-    siteLogo.src = siteLogo.getAttribute('data-dark'); // Switch to light mode logo
+        localStorage.setItem('theme', 'light');
-  } else {
+    } else {
-    document.body.classList.remove('light-mode');
+        body.classList.add('dark-mode');
-    localStorage.setItem('theme', 'dark');
+        body.classList.remove('light-mode');
-    siteLogo.src = siteLogo.getAttribute('data-light'); // Switch to dark mode logo
+        localStorage.setItem('theme', 'dark');
-  }
+    }
 });
-

templates/partials/footer.html

@@ -9,7 +9,9 @@
             <div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6">
                 <div class="xl:flex xl:gap-4">
                     <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
-                        <img class="w-36 h-auto" src="{{ get_url(path=logoPath)}}" alt="ThreeFold Logo" />
+                        {# <img class="w-36 h-auto" src="images/logolight.png" alt="ThreeFold Logo" /> #}
+                        <img id="lightLogo" src="images/logolight.png" alt="Light Logo" class="logo light w-36 h-auto" style="max-width: none;">
+                        <img id="darkLogo" src="images/logodark.png" alt="Dark Logo" class="logo dark w-36 h-auto" style="max-width: none;">
                         <p class="text-gray-200 text-base font-light leading-6">
                             {{section.description}}
                         </p>
@@ -31,5 +33,24 @@
                 </div>
             </div>
         </footer>
+        <style>
+            .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 */
+              }
+        </style>
     </body>
 </html>

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" 
+            <img id="lightLogo" src="{{ get_url(path=section.extra.logoPathLight) }}" alt="Light Logo" class="logo light w-36 h-auto" style="max-width: none;">
-            class="w-36 h-auto" 
+            <img id="darkLogo" src="{{ get_url(path=section.extra.logoPathDark) }}" alt="Dark Logo" class="logo dark w-36 h-auto" style="max-width: none;">
-            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" />
           </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;