Merge pull request #1424 from AnushkaChouhan25/main

Correct Dark theme changes on Bookmark page
ANSHIKA-26 · Oct 26, 2024 · de70807 · de70807 · vercel · Oct 26, 2024
2 parents 2f75252 + 601d5fe
commit de70807
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/bookmarks.html b/bookmarks.html
@@ -73,6 +73,13 @@ <h4 style="margin: 0; color: #007bff; font-size: 1.5rem;">In the realm of mechan
 </head>
 
 <body>
+  <style>
+    body.dark-mode footer a{
+      background: none;
+    }
+  </style>
+  <div class="bookmark-section">
+
   <div class= "progress-container">
     <div class= "progress-bar" id="progress-bar"></div>
   </div>
@@ -129,7 +136,24 @@ <h2>WordWise</h2>
     </header>
   </div>
 </nav>
-<h1 style="text-align: center; color: #333; margin: 20px 0;">My Reading List</h1>
+<script>
+    const checkbox = document.getElementById('checkbox');
+
+    checkbox.addEventListener('change', () => {
+        document.body.classList.toggle('dark-mode', checkbox.checked);
+        // Optionally save the user's preference to local storage
+        localStorage.setItem('dark-mode', checkbox.checked);
+    });
+
+    // Check local storage for the user's preference on page load
+    if (localStorage.getItem('dark-mode') === 'true') {
+        document.body.classList.add('dark-mode');
+        checkbox.checked = true; // Set the checkbox to checked if dark mode is enabled
+    }
+
+</script>
+
+<h1 style="text-align: center; margin: 20px 0;">My Reading List</h1>
 <main id="reading-list" style="max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f8f9fa; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);">
     <div id="bookmark-message" style="text-align: center; margin-bottom: 20px; font-size: 1.2em; color: #555;">
         <!-- Dynamic message will be displayed here -->
@@ -290,5 +314,7 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
         </div>
 
       </footer>
+
+  </div>
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -511,6 +511,13 @@ body.dark-mode footer .phone{
 [data-theme="dark"] .form-container h2{
   color: var(--light);/*form heading made light-colored in dark theme*/
 }
+body.dark-mode .bookmark-section { 
+  background-color: #141414; /* Dark background for the bookmark section */
+  color: #ffffff; /* Optional: Change text color to white for better contrast */
+}
+body.dark-mode .bookmark-section h1{ 
+  color: #ffffff; /* Optional: Change text color to white for better contrast */
+}
 
 #headings{
     color: var(--dark);