From 2a7a895e1105775d69f381a8c0b8985e252ee9cd Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Sun, 19 Jan 2025 14:48:34 +0200
Subject: [PATCH] update dark

---
 content/footer/_index.md          |  2 +-
 css/index.css                     | 12 +++++++--
 static/js/custom.js               | 44 +++++++++++++++++++------------
 templates/partials/header.html    | 27 ++++++++++++++-----
 templates/partials/home/hero.html |  2 +-
 5 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/content/footer/_index.md b/content/footer/_index.md
index 5712cbc2a..1d46061db 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.png"
+  logoPath: "images/new_logo_tft_light.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 f6442d24a..3ac2d4596 100644
--- a/css/index.css
+++ b/css/index.css
@@ -18,12 +18,20 @@ body {
   color: #000000;
 }
 
+body .semigray {
+  color: #424242 !important;
+}
+
 /* Dark Mode */
 body.dark-mode {
   background-color: #121212;
   color: #ffffff;
 }
 
+body.dark-mode .semigray {
+  color: #bbbbbb !important;
+}
+
 
 .dashboard:hover {
 
@@ -109,10 +117,10 @@ img[src*="#absolute"] {
   top: 0;
 }
 
-a img:hover{
+/* a img:hover{
   opacity: 0.5 !important;
   cursor: pointer;
-}
+} */
 
 /* new theme */
 
diff --git a/static/js/custom.js b/static/js/custom.js
index 40627ccb9..481a7d2b7 100644
--- a/static/js/custom.js
+++ b/static/js/custom.js
@@ -194,26 +194,36 @@ document.getElementById("year").innerHTML = new Date().getFullYear();
 
 
 
-// Get the toggle switch
-const toggleSwitch = document.getElementById('darkModeSwitch');
-
-// Apply the saved theme on load
 document.addEventListener('DOMContentLoaded', () => {
+  const toggleSwitch = document.getElementById('darkModeSwitch');
+  const logo = document.getElementById('logo');
+
+  // Log the current state for debugging
+  console.log('Light logo:', logo.getAttribute('data-light-logo'));
+  console.log('Dark logo:', logo.getAttribute('data-dark-logo'));
+
   const savedTheme = localStorage.getItem('theme');
   if (savedTheme === 'dark') {
-    document.body.classList.add('dark-mode');
-    toggleSwitch.checked = true;
-  }
-});
-
-// Toggle dark mode
-toggleSwitch.addEventListener('change', () => {
-  if (toggleSwitch.checked) {
-    document.body.classList.add('dark-mode');
-    localStorage.setItem('theme', 'dark');
+      document.body.classList.add('dark-mode');
+      toggleSwitch.checked = true;
+      logo.src = logo.getAttribute('data-dark-logo');
+      console.log('Loaded dark mode with dark logo.');
   } else {
-    document.body.classList.remove('dark-mode');
-    localStorage.setItem('theme', 'light');
+      logo.src = logo.getAttribute('data-light-logo');
+      console.log('Loaded light mode with light logo.');
   }
-});
 
+  toggleSwitch.addEventListener('change', () => {
+      if (toggleSwitch.checked) {
+          document.body.classList.add('dark-mode');
+          localStorage.setItem('theme', 'dark');
+          logo.src = logo.getAttribute('data-dark-logo');
+          console.log('Switched to dark mode. Updated logo to dark.');
+      } else {
+          document.body.classList.remove('dark-mode');
+          localStorage.setItem('theme', 'light');
+          logo.src = logo.getAttribute('data-light-logo');
+          console.log('Switched to light mode. Updated logo to light.');
+      }
+  });
+});
diff --git a/templates/partials/header.html b/templates/partials/header.html
index 039df8676..2dced2bcf 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -5,11 +5,23 @@
     <div class="z-20 fixed top-0 left-0 right-0 bg-black lg:bg-transparent lg:absolute w-full">
         <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 ">
-            <div>
-                <a href="{{get_url(path='/')}}" class="flex">
-                    <img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
-                </a>
-            </div>
+          <a href="{{ get_url(path='/') }}" class="flex">
+            <img
+                id="logo"
+                class="w-36 h-auto"
+                style="max-width: none;"
+                src="{{ get_url(path=section.extra.logoPathLight) }}"
+                data-light-logo="{{ get_url(path=section.extra.logoPathLight) }}"
+                data-dark-logo="{{ get_url(path=section.extra.logoPathDark) }}"
+                alt="ThreeFold Logo"
+            />
+        </a>
+        
+        </a>
+        
+      
+      
+        </a>
             <div class="-mr-2 -my-2 lg:hidden">
                 <button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400  focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
                     <!-- Heroicon name: menu -->
@@ -108,9 +120,10 @@
                     </li> 
                   </ul>  -->
                   <button class="theme-toggle px-2 mx-2">
-                    <label clas="" for="darkModeSwitch">Dark Mode:</label>
+                    <label class="" for="darkModeSwitch">Dark Mode:</label>
                     <input type="checkbox" id="darkModeSwitch">
-                  </button>
+                </button>
+                
                   
                     <a href="/signup" target="_blank" class="blinking-effect dashboard rounded-2xl bg-white px-4 p-2 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green">Join the Web4 Revolution</a>
                 </div>
diff --git a/templates/partials/home/hero.html b/templates/partials/home/hero.html
index 7d3ae31e5..c18767bda 100644
--- a/templates/partials/home/hero.html
+++ b/templates/partials/home/hero.html
@@ -2,7 +2,7 @@
     <div class="px-6 lg:pt-32 mt-12 pt-24 lg:pb-24 pb-12 sm:px-6 lg:px-8">
       <div class="mx-auto max-w-4xl text-center">
         <h2 class="text-balance font-normal tracking-tight lg:text-6xl text-5xl fade-in">We are Building <br>a New Internet</h2>
-        <p class="mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light  fade-in">A system built to scale to a planetary level, compatible with AI, Cloud, Web2, and Web3. Capable to provide 100% uptime, it enables any machine and human to communicate over the shortest path.</p>
+        <p class="semigray mx-auto mt-8 max-w-3xl text-pretty lg:text-2xl text-xl font-light  fade-in">A system built to scale to a planetary level, compatible with AI, Cloud, Web2, and Web3. Capable to provide 100% uptime, it enables any machine and human to communicate over the shortest path.</p>
         <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-2xl text-xl font-light  fade-in">That's <span class="font-semibold">ThreeFold's</span></p>
         <br>
         <h2 class="text-balance font-normal tracking-tight  lg:text-6xl text-6xl fade-in">Web4</h2>