From 7dcf8767e8dca06a8f2245b36cdd508444a5f4bf Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Mon, 3 Feb 2025 16:49:11 +0200
Subject: [PATCH] update logos

---
 content/footer/_index.md       |  2 +-
 css/index.css                  |  6 ++---
 static/js/custom.js            | 46 +++++++++++++++++-----------------
 templates/partials/footer.html | 23 ++++++++++++++++-
 templates/partials/header.html | 29 +++++++++++++++------
 5 files changed, 69 insertions(+), 37 deletions(-)

diff --git a/content/footer/_index.md b/content/footer/_index.md
index 765cf68b3..fc9eea0c5 100644
--- a/content/footer/_index.md
+++ b/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"}
 ---
 
diff --git a/css/index.css b/css/index.css
index e84ee21b9..bb5ba3fb6 100644
--- a/css/index.css
+++ b/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;
diff --git a/static/js/custom.js b/static/js/custom.js
index 9bc222791..f11c7adf1 100644
--- a/static/js/custom.js
+++ b/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');
-  if (savedTheme === 'light') {
-    document.body.classList.add('light-mode');
-    toggleSwitch.checked = true;
-    siteLogo.src = siteLogo.getAttribute('data-light'); // Use light mode logo
-  } else {
-    document.body.classList.remove('light-mode');
-    toggleSwitch.checked = false;
-    siteLogo.src = siteLogo.getAttribute('data-dark'); // Use dark mode logo
-  }
+    const savedTheme = localStorage.getItem('theme') || 'dark'; // Default to dark mode
+
+    if (savedTheme === 'light') {
+        body.classList.add('light-mode');
+        body.classList.remove('dark-mode');
+        toggleSwitch.checked = true;
+    } else {
+        body.classList.add('dark-mode');
+        body.classList.remove('light-mode');
+        toggleSwitch.checked = false;
+    }
 });
 
-// Toggle light mode
+// Toggle between light and dark mode
 toggleSwitch.addEventListener('change', () => {
-  if (toggleSwitch.checked) {
-    document.body.classList.add('light-mode');
-    localStorage.setItem('theme', 'light');
-    siteLogo.src = siteLogo.getAttribute('data-dark'); // Switch to light mode logo
-  } else {
-    document.body.classList.remove('light-mode');
-    localStorage.setItem('theme', 'dark');
-    siteLogo.src = siteLogo.getAttribute('data-light'); // Switch to dark mode logo
-  }
+    if (toggleSwitch.checked) {
+        body.classList.add('light-mode');
+        body.classList.remove('dark-mode');
+        localStorage.setItem('theme', 'light');
+    } else {
+        body.classList.add('dark-mode');
+        body.classList.remove('light-mode');
+        localStorage.setItem('theme', 'dark');
+    }
 });
-
diff --git a/templates/partials/footer.html b/templates/partials/footer.html
index b89586147..377a0604c 100644
--- a/templates/partials/footer.html
+++ b/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>
diff --git a/templates/partials/header.html b/templates/partials/header.html
index cee7833dd..0775e7f14 100644
--- a/templates/partials/header.html
+++ b/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;