added a toggler to all the pages to toggle between light and dark theme

amankumarconnect · Oct 3, 2024 · f12c67d · f12c67d
1 parent 5839a02
commit f12c67d
Show file tree

Hide file tree

Showing 5 changed files with 366 additions and 20 deletions.
diff --git a/fs.html b/fs.html
@@ -5,8 +5,35 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">    <title>My Favorite Books Music App</title>
+    <style>
+        body.dark-theme {
+            background-color: #333;
+            color: #fff;
+        }
+        body.dark-theme .navbar {
+            background-color: #222 !important;
+        }
+        body.dark-theme .btn-outline {
+            color: #fff;
+            border-color: #fff;
+        }
+        .theme-toggle {
+            cursor: pointer;
+            padding: 5px 10px;
+            border-radius: 5px;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .dark-theme .theme-toggle {
+            background-color: #fff;
+            color: #333;
+        }
+        .light-theme .theme-toggle {
+            background-color: #333;
+            color: #fff;
+        }
+    </style>
 </head>
-<body>
+<body class="light-theme">
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
     <a class="navbar-brand" href="#">Lisbook</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -25,6 +52,11 @@
           <a class="nav-link" href="./index.html">Previous</a>
         </li>
       </ul>
+
+      <button id="theme-toggle" class="btn btn-outline-light theme-toggle">
+        <span class="light-text">🌙</span>
+        <span class="dark-text" style="display:none;">☀️</span>
+      </button>
     </div>
   </nav>
 
@@ -82,6 +114,26 @@ <h2>Share Your Thoughts</h2>
 
 
     <script src="app.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const themeToggle = document.getElementById('theme-toggle');
+            const body = document.body;
+            const lightText = themeToggle.querySelector('.light-text');
+            const darkText = themeToggle.querySelector('.dark-text');
+
+            themeToggle.addEventListener('click', function() {
+                body.classList.toggle('dark-theme');
+                body.classList.toggle('light-theme');
+                if (body.classList.contains('dark-theme')) {
+                    lightText.style.display = 'none';
+                    darkText.style.display = 'inline';
+                } else {
+                    lightText.style.display = 'inline';
+                    darkText.style.display = 'none';
+                }
+            });
+        });
+    </script>
 </body>
 <!-- Footer -->
 <footer class="bg-body-tertiary text-center">
@@ -270,4 +322,5 @@ <h5 class="text-uppercase">Links</h5>
   <!-- Copyright -->
 </footer>
 <!-- Footer -->
-</html>
+
+</html>
diff --git a/index.html b/index.html
@@ -9,13 +9,21 @@
 
     <style>
         body {
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        body.light-theme {
+            background-color: #f0f0f0;
+            color: #333;
+        }
+
+        body.dark-theme {
             background-color: #121212;
             color: #b3b3b3;
-            font-family: 'Helvetica Neue', Arial, sans-serif;
         }
 
         h1, h2, h3 {
-            color: #fff;
+            color: inherit;
         }
 
         #playlist li:hover {
@@ -68,28 +76,47 @@
         .favorite-button:hover {
             color: #1DB954;
         }
+
+        .light-theme .book-card,
+        .light-theme #playlist,
+        .light-theme .bg-gray-800 {
+            background-color: #f8f8f8;
+        }
+
+        .light-theme .text-gray-300 {
+            color: #333;
+        }
+
+        .light-theme .bg-gray-700 {
+            background-color: #e0e0e0;
+        }
     </style>
 </head>
 
-<body class="bg-gray-900 text-gray-300">
+<body class="bg-gray-900 text-gray-300 dark-theme">
     <!-- Navbar -->
     <nav class="bg-gray-800 p-4">
         <div class="container mx-auto flex justify-between items-center">
             <!-- Logo -->
             <a class="text-green-500 text-2xl font-bold" href="#">Lisbook</a>
 
+            <!-- Menu Links and Theme Toggle -->
+            <div class="flex items-center space-x-4">
+                <a href="#" class="text-gray-300 hover:text-green-500">Home</a>
+                <a href="./pbd.html" class="text-gray-300 hover:text-green-500">Next</a>
+                <a href="./index.html" class="text-gray-300 hover:text-green-500">Previous</a>
+                <button id="theme-toggle" class="text-gray-300 hover:text-green-500">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                    </svg>
+                </button>
+            </div>
+
             <!-- Mobile Menu Toggle Button -->
-            <button id="menu-toggle" title="Menu" class="text-gray-300 lg:hidden">
+            <div id="menu-toggle" title="Menu" class="text-gray-300 lg:hidden cursor-pointer">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                 </svg>
-            </button>
-
-            <!-- Menu Links -->
-            <div id="menu" class="hidden lg:flex space-x-4">
-                <a href="#" class="text-gray-300 hover:text-green-500">Home</a>
-                <a href="./pbd.html" class="text-gray-300 hover:text-green-500">Next</a>
-                <a href="./index.html" class="text-gray-300 hover:text-green-500">Previous</a>
             </div>
         </div>
     </nav>
@@ -164,14 +191,22 @@ <h2 class="text-center text-2xl mb-6">Share Your Thoughts</h2>
             <a href="https://www.linkedin.com" class="text-gray-300 hover:text-green-500"><i class="fa fa-linkedin"></i></a>
             <a href="https://www.twitter.com" class="text-gray-300 hover:text-green-500"><i class="fa fa-twitter"></i></a>
         </div>
-        <p class="mt-4 text-gray-400">&copy; 2020 Developed by Najam Ali Abass aka ctoic</p>
+        <p class="mt-4 text-gray-400">© 2020 Developed by Najam Ali Abass aka ctoic</p>
     </footer>
 
     <!-- JavaScript -->
     <script>
         document.addEventListener('DOMContentLoaded', function () {
             const playlistItems = document.querySelectorAll('#playlist li');
             const audioPlayer = document.getElementById('audio-player');
+            const themeToggle = document.getElementById('theme-toggle');
+            const body = document.body;
+
+            // Theme toggle
+            themeToggle.addEventListener('click', function() {
+                body.classList.toggle('light-theme');
+                body.classList.toggle('dark-theme');
+            });
 
             // Playlist interaction
             playlistItems.forEach(item => {

diff --git a/package-lock.json b/package-lock.json