make lightmode default

css/index.css

@@ -13,71 +13,71 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
 
 /* Defaul lightMode */
-body.light-mode {
+body {
   background-color: #ffffff;
   color: #000000;
 }
 
-body.light-mode .semigray {
-  
-  color: #424242 !important;
-}
-
-body.light-mode .semigray2 {
-  
-  color: #424242 !important;
-}
-
-body.light-mode .dropdown a{
-  @apply
-  px-0
-  text-black
-}
-
-body.light-mode .dropdown{
-  background-color: rgb(255 255 255 / 100%);
-  color: #121212;
-}
-
-body.light-mode .d_menu {
-  background-color: #e5e5e5;
-}
-
-body.light-mode .icon {
-  
-  fill: #424242 !important;
-}
-
-/* Dark Mode */
-body {
-  background-color: #121212;
-  color: #ffffff;
-}
-
 body .semigray {
-  color: #e5e7eb !important;
+  
+  color: #424242 !important;
 }
 
 body .semigray2 {
-  color: #d1d5db !important;
-}
   
-body .icon {
-  fill: #ffffff !important;
+  color: #424242 !important;
 }
 
 body .dropdown a{
   @apply
   px-0
-  text-white
+  text-black
 }
 
 body .dropdown{
+  background-color: rgb(255 255 255 / 100%);
+  color: #121212;
+}
+
+body .d_menu {
+  background-color: #e5e5e5;
+}
+
+body .icon {
+  
+  fill: #424242 !important;
+}
+
+/* Dark Mode */
+body.dark-mode {
+  background-color: #121212;
+  color: #ffffff;
+}
+
+body.dark-mode .semigray {
+  color: #e5e7eb !important;
+}
+
+body.dark-mode .semigray2 {
+  color: #d1d5db !important;
+}
+
+body.dark-mode .icon {
+  fill: #ffffff !important;
+}
+
+body.dark-mode .dropdown a{
+  @apply
+  px-0
+  text-white
+}
+
+body.dark-mode .dropdown{
   background-color: rgb(0 0 0 / 50%);
   color: #fff;
 }
 
-body .d_menu {
+body.dark-mode .d_menu {
   background-color: rgba(34 34 34);
 }
 

static/js/custom.js

@@ -199,13 +199,13 @@ const body = document.body;
 
 // Apply saved theme on load
 document.addEventListener('DOMContentLoaded', () => {
-    const savedTheme = localStorage.getItem('theme') || 'light'; // Default is light mode
+    const savedTheme = localStorage.getItem('theme') || 'dark'; // Default is dark mode
 
-    if (savedTheme === 'light') {
-        body.classList.add('light-mode');
+    if (savedTheme === 'dark') {
+        body.classList.add('dark-mode');
         toggleSwitch.checked = true;
     } else {
-        body.classList.remove('light-mode');
+        body.classList.remove('dark-mode');
         toggleSwitch.checked = false;
     }
 });
@@ -213,12 +213,11 @@ document.addEventListener('DOMContentLoaded', () => {
 // Toggle between light and dark mode
 toggleSwitch.addEventListener('change', () => {
     if (toggleSwitch.checked) {
-        body.classList.add('light-mode');
-        localStorage.setItem('theme', 'light');
-    } else {
-        body.classList.remove('light-mode');
+        body.classList.add('dark-mode');
         localStorage.setItem('theme', 'dark');
+    } else {
+        body.classList.remove('dark-mode');
+        localStorage.setItem('theme', 'light');
     }
 });
 
-

templates/partials/header.html

@@ -254,20 +254,20 @@
 
 /* logo image */
 
-.light {
+.dark {
   
   display: block; /* Show dark logo by default */
 }
-.dark {
+.light {
    
   display: none; /* Hide light logo by default */
 }
 
-.light-mode .light {
+.dark-mode .dark {
   
   display: none; /* Hide dark logo in light mode */
 }
-.light-mode .dark {
+.dark-mode .light{
 
   display: block;/* Show light logo in light mode */
 }
@@ -317,17 +317,17 @@
 }
 
 /* When light mode is active */
-.light-mode .switch {
-  background: #111; /* Dark background in light mode */
+.dark-mode .switch {
+  background: #808080; /* Dark background in dark mode */
 }
-.light-mode .slider {
+.dark-mode .slider {
   transform: translateX(25px); /* Move slider to the right */
 }
-.light-mode #lightIcon {
+.dark-mode #darkIcon {
   display: inline-block;
   color: white;
 }
-.light-mode #darkIcon {
+.dark-mode #darkIcon {
   display: none;
 }