various improvemtnt

charandeepsinghb · Dec 27, 2024 · 5dd6e17 · 5dd6e17
1 parent 7700a9c
commit 5dd6e17
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 14 deletions.
diff --git a/components/menu/menu.css b/components/menu/menu.css
@@ -26,6 +26,11 @@
   background-color: var(--background-color);
 }
 
+.dark-mode .menu {
+  color: var(--dark-font-color);
+  background-color: var(--dark-background-color);
+}
+
 .menuClose {
   opacity: 0;
   scale: 0;

diff --git a/dist/main.js b/dist/main.js
diff --git a/libs/background-color.js b/libs/background-color.js
@@ -44,8 +44,8 @@ function resetBackgroundColorListner(backgroundColorbox) {
 
   backgroundResetIcon.addEventListener("click", ()=>{
     document.documentElement.style.setProperty('--background-color', WHITE);
-    removeLocalStorageItem(BACKGROUND_COLOR);
     setBackgroundColorbox(backgroundColorbox, WHITE);
+    setLocalStorageItem(BACKGROUND_COLOR, WHITE);
   });
 }
 

diff --git a/libs/dark-colors-mode.js b/libs/dark-colors-mode.js
@@ -69,13 +69,15 @@ const BLACK = '#000000';
 
 function toggleDarkMode(isOn) {
   if (isOn) {
-    document.documentElement.style.setProperty('--font-color', DARK_TEXT_COLOR);
-    document.documentElement.style.setProperty('--background-color', DARK_BACKGROUND_COLOR);
+    // document.documentElement.style.setProperty('--font-color', DARK_TEXT_COLOR);
+    // document.documentElement.style.setProperty('--background-color', DARK_BACKGROUND_COLOR);
+    document.body.classList.add("dark-mode");
     return;
   }
 
-  document.documentElement.style.setProperty('--font-color', BLACK);
-  document.documentElement.style.setProperty('--background-color', WHITE);
+  // document.documentElement.style.setProperty('--font-color', BLACK);
+  // document.documentElement.style.setProperty('--background-color', WHITE);
+  document.body.classList.remove("dark-mode");
 }
 
 /*********************** Theme *************************/

diff --git a/libs/font-color.js b/libs/font-color.js
@@ -44,8 +44,8 @@ function resetFontColorListner(fontColorbox) {
 
   fontResetIcon.addEventListener("click", ()=>{
     document.documentElement.style.setProperty('--font-color', BLACK);
-    removeLocalStorageItem(FONT_COLOR);
     setFontColorbox(fontColorbox, BLACK);
+    setLocalStorageItem(FONT_COLOR, BLACK);
   });
 }
 

diff --git a/scripts/bani.js b/scripts/bani.js
@@ -51,6 +51,6 @@ onDomReady(initializeBaniApp);
 
 // Functions which load immediatly after js starts
 
-setBackgroundColorFromLocalGlobal();
 setDarkModeCheckFromLocalGlobal();
+setBackgroundColorFromLocalGlobal();
 setFontColorFromLocalGlobal();
diff --git a/styles/bani-styles.css b/styles/bani-styles.css
@@ -14,11 +14,11 @@
 }
 
 .shabad {
-  margin-bottom: 16px;
+  margin-bottom: 0.8rem;
 }
 
 .para {
-  margin-bottom: 30px;
+  margin-bottom: 1.5rem;
 }
 
 /* 
@@ -42,15 +42,15 @@
 }
 
 .en {
-  margin-bottom: 8px;
+  margin-bottom: 0.5rem;
 }
 
 .d-inline {
   display: inline !important;
 }
 
 .para-en, .para-pu {
-  margin-bottom: 12px;
+  margin-bottom: 0.5rem;
 }
 
 .para:first-child {
@@ -62,9 +62,9 @@
 }
 
 .gurmukhi {
-  margin-bottom: 5px;
+  margin-bottom: 0.5rem;
 }
 
 .para-gurmukhi {
-  margin-bottom: 8px;
+  margin-bottom: 0.5rem;
 }
diff --git a/styles/style.css b/styles/style.css
@@ -1,3 +1,8 @@
+:root {
+  --dark-background-color: #121212;
+  --dark-font-color: #E0E0E0;
+}
+
 body {
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
@@ -9,6 +14,11 @@ body {
   background-color: var(--background-color);
 }
 
+body.dark-mode {
+  color: var(--dark-font-color);
+  background-color: var(--dark-background-color);
+}
+
 .root {
   /* overflow: hidden;
   overflow-x: hidden; */