From ce277f766aca3860832635f290ec28fcd86143c6 Mon Sep 17 00:00:00 2001
From: adityalaxkar123 <adityalaxkar9876@gmail.com>
Date: Mon, 28 Oct 2024 08:03:51 +0530
Subject: [PATCH] added darkMode btn in blog section for small and medium 
 screen

---
 blog.html | 35 ++++++++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/blog.html b/blog.html
index ccadfc97..4b7df5a8 100644
--- 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>