From f7ff263818d669ad1ed20f2918ec60839d3ae344 Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Thu, 22 May 2025 16:08:17 +0300
Subject: [PATCH] make lightmode default

---
 css/index.css                  | 90 +++++++++++++++++-----------------
 static/js/custom.js            | 17 +++----
 templates/partials/header.html | 18 +++----
 3 files changed, 62 insertions(+), 63 deletions(-)

diff --git a/css/index.css b/css/index.css
index 123496a..ab8da58 100644
--- a/css/index.css
+++ b/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);
 }
 
diff --git a/static/js/custom.js b/static/js/custom.js
index f22048e..1f8673e 100644
--- a/static/js/custom.js
+++ b/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');
     }
 });
 
-
diff --git a/templates/partials/header.html b/templates/partials/header.html
index c1ebf9b..da9b14c 100644
--- a/templates/partials/header.html
+++ b/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;
 }