update build

build.sh

@@ -26,7 +26,7 @@ elif [[ "$(uname -m)" == "arm64"* ]]; then
     ASSET="$ASSET-arm64"
 fi
 
-curl -sLO "https://github.com/tailwindlabs/tailwindcss/releases/latest/download/${ASSET}"
+curl -sLO "https://github.com/tailwindlabs/tailwindcss/releases/download/v3.4.17/${ASSET}"
 chmod +x $ASSET
 mv $ASSET tailwindcss
 

css/index.css

@@ -55,6 +55,10 @@ body.light-mode .icon {
   background-color: rgb(100 100 100 / 0.2);
 }
 
+
+
+
+
 .dashboard:hover {
 
   background: #74ddc3 !important;

static/js/custom.js

@@ -214,7 +214,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
 // Toggle light mode
 toggleSwitch.addEventListener('change', () => {
+  console.log('Hellon');
   if (toggleSwitch.checked) {
+    
     document.body.classList.add('light-mode');
     localStorage.setItem('theme', 'light');
     siteLogo.src = siteLogo.getAttribute('data-dark'); // Switch to light mode logo

templates/partials/header.html

@@ -5,24 +5,24 @@
     <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 ">
-          {# <a href="{{ get_url(path='/') }}" class="flex">
-            <img 
-            id="site-logo" 
-            class="w-36 h-auto" 
-            style="max-width: none;" 
-            src="{{ get_url(path=section.extra.logoPathLight) }}" 
-            data-light="{{ get_url(path=section.extra.logoPathLight) }}" 
-            data-dark="{{ get_url(path=section.extra.logoPathDark) }}" 
-            alt="ThreeFold Logo" />
-          </a> #}
           <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) }}" />
+            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 
+            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) }}" />
+          </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">
@@ -122,8 +122,12 @@
                     </li> 
                   </ul>  -->
                   <button class="theme-toggle px-2 mx-2">
-                    <label for="lightModeSwitch">Dark Mode:</label>
+                    <label for="lightModeSwitch" class="switch">
+                      <i class="fa-solid fa-sun" id="lightIcon"></i>
                       <input type="checkbox" id="lightModeSwitch">
+                      <span class="slider"></span>
+                      <i class="fas fa-moon" id="darkIcon"></i>
+                    </label>
                   </button>
                   
                 
@@ -244,4 +248,68 @@
   color: #c7c7c7 !important;
 }
 
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: .4s;
+  border-radius: 34px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  border-radius: 50%;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:checked + .slider:before {
+  transform: translateX(26px);
+}
+
+/* Icons */
+#lightIcon, #darkIcon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 16px;
+  color: white;
+}
+
+#lightIcon {
+  left: 10px;
+  display: none; /* Hide by default */
+}
+
+#darkIcon {
+  right: 10px;
+}
+
 </style>