Merge pull request #1179 from rishika105/gh-pages

fixed issue(#1113) change the dark theme to lighter shade of black
recodehive · Nov 1, 2024 · 8ae6bec · 8ae6bec
2 parents 80ca4a1 + 06e60c6
commit 8ae6bec
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -334,7 +334,7 @@ <h2>Join the Recode Hive Community</h2>
     }
 
     .dark-mode .visitor-counter div {
-      color: #f0f0f0; /* Lighter text for dark mode */
+      color: #0a0e0f; /* Lighter text for dark mode */
     }
 
     .dark-mode .visitor-counter .website-counter {

diff --git a/pages/compare.html b/pages/compare.html
@@ -330,7 +330,7 @@
 
 /* Dark mode styles */
 body.dark-mode {
-    background-color: #333; /* Dark background */
+    background-color: #171717; /* Dark background */
     color: #ddd; /* Light text color */
 }
 

diff --git a/scripts/compare.js b/scripts/compare.js
@@ -177,7 +177,7 @@ document.addEventListener("DOMContentLoaded", function () {
         if (theme === "dark") {
             return {
                 borderColor1: "rgba(54, 162, 235, 1)",
-                pointBackgroundColor1: "rgba(54, 162, 235, 1)",
+                pointBackgroundColor1: "rgba(255, 99, 132, 1)",
                 borderColor2: "rgba(255, 99, 132, 1)",
                 pointBackgroundColor2: "rgba(255, 99, 132, 1)",
                 gridColor: "rgba(255, 255, 255, 0.3)", // Lighter grid color for dark mode
@@ -187,12 +187,12 @@ document.addEventListener("DOMContentLoaded", function () {
         } else {
             return {
                 borderColor1: "rgba(54, 162, 235, 1)",
-                pointBackgroundColor1: "rgba(54, 162, 235, 1)",
+                pointBackgroundColor1: "rgb(10, 14, 15)",
                 borderColor2: "rgba(255, 99, 132, 1)",
                 pointBackgroundColor2: "rgba(255, 99, 132, 1)",
                 gridColor: "rgba(200, 200, 200, 0.3)", // Darker grid color for light mode
                 tickColor: "#333", // Dark ticks for light mode
-                legendColor: "#333", // Dark legend labels for light mode
+                legendColor: "rgb(10, 14, 15)", // Dark legend labels for light mode
             };
         }
     }

diff --git a/scripts/dark-mode.js b/scripts/dark-mode.js
@@ -7,17 +7,29 @@ document.addEventListener("DOMContentLoaded", function () {
   function setTheme(theme) {
     if (theme === "dark") {
       document.body.classList.add("dark-mode");
-      themeToggleCheckboxDesktop.checked = true;
-      themeToggleCheckboxMobile.checked = true;
+
+      if (themeToggleCheckboxDesktop) {
+        themeToggleCheckboxDesktop.checked = true;
+      }
+      if (themeToggleCheckboxMobile) {
+        themeToggleCheckboxMobile.checked = true;
+      }
+
       views.forEach(view => {
         view.style.color = "white";
       });
     } else {
       document.body.classList.remove("dark-mode");
-      themeToggleCheckboxDesktop.checked = false;
-      themeToggleCheckboxMobile.checked = false;
+
+      if (themeToggleCheckboxDesktop) {
+        themeToggleCheckboxDesktop.checked = false;
+      }
+      if (themeToggleCheckboxMobile) {
+        themeToggleCheckboxMobile.checked = false;
+      }
+
       views.forEach(view => {
-        view.style.color = "black";
+        view.style.color = "#0a0e0f";
       });
     }
     localStorage.setItem("theme", theme);
@@ -28,14 +40,18 @@ document.addEventListener("DOMContentLoaded", function () {
   const defaultTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
   setTheme(savedTheme || defaultTheme);
 
-  // Add event listeners to both toggle checkboxes
-  themeToggleCheckboxDesktop.addEventListener("change", () => {
-    const newTheme = themeToggleCheckboxDesktop.checked ? "dark" : "light";
-    setTheme(newTheme);
-  });
+  // Add event listeners to both toggle checkboxes if they exist
+  if (themeToggleCheckboxDesktop) {
+    themeToggleCheckboxDesktop.addEventListener("change", () => {
+      const newTheme = themeToggleCheckboxDesktop.checked ? "dark" : "light";
+      setTheme(newTheme);
+    });
+  }
 
-  themeToggleCheckboxMobile.addEventListener("change", () => {
-    const newTheme = themeToggleCheckboxMobile.checked ? "dark" : "light";
-    setTheme(newTheme);
-  });
+  if (themeToggleCheckboxMobile) {
+    themeToggleCheckboxMobile.addEventListener("change", () => {
+      const newTheme = themeToggleCheckboxMobile.checked ? "dark" : "light";
+      setTheme(newTheme);
+    });
+  }
 });
diff --git a/styles/blog.css b/styles/blog.css
@@ -391,7 +391,7 @@ body.dark-mode .saved-blogs {
 /* Dark Mode */
 .dark-mode .main-popup-content, 
 .dark-mode .side-content{
-    background-color: black;
+    background-color: #0a0e0f;;
 }
 
 .dark-mode .main-popup-content i,

diff --git a/styles/compare.css b/styles/compare.css
@@ -139,7 +139,7 @@ select:focus {
 
 .dark-mode select {
     color: white;
-    background-color: black;
+    background-color: #0a0e0f;
 }
 
 #avatarImg1, #avatarImg2 {

diff --git a/styles/githubbadge.css b/styles/githubbadge.css
@@ -105,10 +105,10 @@ body.theme-dark .event .link {
 }
 
 body.theme-dark .container{
-  background-color: black !important;
+  background-color: #171717 !important;
 }
 body.theme-dark .center {
-  background-color: black !important;
+  background-color: #171717 !important;
 }
 body.dark-mode .themed-text {
   color: white;
@@ -193,13 +193,9 @@ body.dark-mode .themed-text {
     border: 1px solid #ddd; /* Add border */
 }
 .dark-mode .header,.dark-mode .cell{
-  background-color: black !important;
+  background-color:#171717 !important;
 }
 
-
-
-
-
 .certificate{
   width: 100%;
   justify-content: center;

diff --git a/styles/styles.css b/styles/styles.css
@@ -369,7 +369,9 @@ body.dark-mode ::-webkit-scrollbar-button {
 
 /* Dark Mode Styles */
 body.dark-mode {
-  background-color: #000000;
+  background-color: #171717;
+
+  /* 171717 */
   color: #f0f0f0;
 }
 
@@ -1016,11 +1018,11 @@ body.theme-dark .event .link {
 }
 
 body.theme-dark .container {
-  background-color: black !important;
+  background-color: #0a0e0f !important;
 }
 
 body.theme-dark .center {
-  background-color: black !important;
+  background-color: #0a0e0f !important;
 }
 
 /* Light Mode Styles */
@@ -1118,7 +1120,7 @@ body.theme-dark .center {
 
 .dark-mode .header,
 .dark-mode .cell {
-  background-color: black !important;
+  background-color: #0a0e0f !important;
 }
 
 body.dark-mode .side-icons a {
@@ -1221,7 +1223,7 @@ body.dark-mode #scrollToTop:hover {
 }
 
 body.dark-mode #scrollToTop .arrow-icon {
-  fill: black;
+  fill: #0a0e0f;
 }
 
 html {