added darkMode btn in blog section for small and medium screen

ayush-that · Oct 28, 2024 · ce277f7 · ce277f7
1 parent 1e8e392
commit ce277f7
Showing 1 changed file with 32 additions and 3 deletions.
diff --git a/blog.html b/blog.html
@@ -150,9 +150,9 @@
                   </ul>
                 </div>
                 <script>
-                  const toggleButton = document.getElementById('theme-toggle');
-                  const body = document.body;
-                  const currentTheme = localStorage.getItem('theme');
+                  var toggleButton = document.getElementById('theme-toggle');
+                  var body = document.body;
+                  var currentTheme = localStorage.getItem('theme');
 
                   if (currentTheme === 'dark') {
                   body.classList.add('dark-mode');
@@ -362,11 +362,40 @@ <h3 class="join"><i class="fa-solid fa-user"></i>  Register to join us....</h3>
                 <a class="page-scroll" href="./blog.html">Blogs 📰</a>
                 <a class="page-scroll" href="./quiz.html">Quiz 🤔</a>
                 <a class="page-scroll main-btn" href="#" onclick="openModal()" onmouseout="this.style.color='white'">Login/Register 💻</a>
+                <li class="nav-item no-underline">
+                  <button id="theme-toggle2" class="theme-toggle2" style="margin-right: 2px;">
+                    🌙
+                  </button>
+                </li>
                 <div class="mobile-menu__trigger" onclick="toggleMobileMenu()">
                   <span></span>
                 </div>
               </nav>
+              <script>
+                var toggleButton = document.getElementById('theme-toggle2');
+                var body = document.body;
+                var currentTheme = localStorage.getItem('theme');
 
+                if (currentTheme === 'dark') {
+                body.classList.add('dark-mode');
+                toggleButton.classList.add('dark');
+                toggleButton.textContent = '🌞';
+                }
+
+                toggleButton.addEventListener('click', function () {
+                body.classList.toggle('dark-mode');
+                toggleButton.classList.toggle('dark');
+
+                // Update button icon based on mode
+                if (body.classList.contains('dark-mode')) {
+                  toggleButton.textContent = '🌞';  // Light mode icon
+                  localStorage.setItem('theme', 'dark');
+                } else {
+                  toggleButton.textContent = '🌙';  // Dark mode icon
+                  localStorage.setItem('theme', 'light');
+                }
+                });
+            </script>
 
                 <link href="./navbar.css" rel="stylesheet">
                 <script type="text/javascript" src="./navbar.js"></script>