Update dark mode styles and toggle functionality

Arihant25 · Feb 4, 2024 · c5af3fb · c5af3fb
1 parent cfbb906
commit c5af3fb
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/css/index.css b/css/index.css
@@ -497,7 +497,7 @@ body.dark-mode nav>ul>a {
 }
 
 body.dark-mode #hero {
-    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/img/header.jpg');
+    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/header-dark.jpg');
     border-radius: 8px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 
@@ -514,8 +514,12 @@ body.dark-mode #hero {
     text-align: center;
 }
 
+body.dark-mode h2 {
+    color: #faa1f5;
+}
+
 body.dark-mode #hero:hover {
-    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/img/header.gif');
+    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/header-dark.gif');
     border-radius: 8px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 

diff --git a/img/header-dark.gif b/img/header-dark.gif
diff --git a/img/header-dark.jpg b/img/header-dark.jpg
diff --git a/js/index.js b/js/index.js
@@ -30,9 +30,5 @@ document.getElementById('menu-button').addEventListener('click', function () {
 
 // Dark mode
 document.getElementById('dark-mode-toggle').addEventListener('change', function () {
-    if (this.checked) {
-        document.body.classList.add('dark-mode');
-    } else {
-        document.body.classList.remove('dark-mode');
-    }
+    document.body.classList.toggle('dark-mode');
 });