Merge pull request #1569 from rashi0409/rtb

Food-ordering-website-mode modification
khushi-joshi-05 · Aug 9, 2024 · 875f362 · 875f362
2 parents afadacc + 68bbb19
commit 875f362
Show file tree

Hide file tree

Showing 13 changed files with 34 additions and 11 deletions.
diff --git a/Html-files/RateUs.html b/Html-files/RateUs.html
@@ -136,7 +136,7 @@
             <div class="order-0 ml-auto p-2">
                 <img
                     class="nav-link"
-                    src="../Images/navbar/sun.png"
+                    src="../Images/navbar/moon.png"
                     id="theme-toggle-icon"
                     alt="theme toggler button"
                 />

diff --git a/Html-files/cart.html b/Html-files/cart.html
@@ -334,7 +334,7 @@
                         </ul>
                     </div>
                     <div class="order-0 ml-auto p-2">
-                        <img class="nav-link" src="../Images/navbar/sun.png" id="theme-toggle-icon" alt="theme toggler button">
+                        <img class="nav-link" src="../Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">
                     </div>
                     <div class="collapse navbar-collapse hamburgeritems enddiv order-3 ">
                         <ul class="navbar-nav end-links">

diff --git a/Html-files/contact.html b/Html-files/contact.html
@@ -277,7 +277,7 @@
         <div class="order-0 ml-auto p-2">
           <img
             class="nav-link"
-            src="../Images/navbar/sun.png"
+            src="../Images/navbar/moon.png"
             id="theme-toggle-icon"
             alt="theme toggler button"
           />

diff --git a/Html-files/login.html b/Html-files/login.html
@@ -154,7 +154,7 @@
 				</ul>
 			</div>
 			<div class="order-0 ml-auto p-2">
-				<img class="nav-link" src="../Images/navbar/sun.png" id="theme-toggle-icon" alt="theme toggler button">
+				<img class="nav-link" src="../Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">
 			</div>
 			<div class="collapse navbar-collapse hamburgeritems enddiv order-3 ">
 				<ul class="navbar-nav end-links">

diff --git a/Html-files/menu.html b/Html-files/menu.html
@@ -269,9 +269,14 @@
             </ul>
         </div>
         <div class="order-0 ml-auto p-2">
+
+            <img class="nav-link" src="../Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">
+        </div>
+
           <img class="nav-link" src="../Images/navbar/sun.png" id="theme-toggle-icon" alt="theme toggler button">
       </div>
 
+
         <div class="collapse navbar-collapse hamburgeritems enddiv order-3">
             <ul class="navbar-nav end-links">
                 <li class="nav-item">

diff --git a/Html-files/offers.html b/Html-files/offers.html
@@ -286,7 +286,7 @@
         <div class="order-0 ml-auto p-2">
           <img
             class="nav-link"
-            src="../Images/navbar/sun.png"
+            src="../Images/navbar/moon.png"
             id="theme-toggle-icon"
             alt="theme toggler button"
           />

diff --git a/Html-files/services.html b/Html-files/services.html
@@ -163,7 +163,7 @@
                     </ul>
                 </div>
                 <div class="order-0 ml-auto p-2">
-                    <img class="nav-link" src="../Images/navbar/sun.png" id="theme-toggle-icon" alt="theme toggler button" />
+                    <img class="nav-link" src="../Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button" />
                 </div>
                 <div class="collapse navbar-collapse hamburgeritems enddiv order-3">
                     <ul class="navbar-nav end-links">

diff --git a/Html-files/signup.html b/Html-files/signup.html
@@ -225,7 +225,7 @@
 				</ul>
 			</div>
 			<div class="order-0 ml-auto p-2">
-				<img class="nav-link" src="../Images/navbar/sun.png" id="theme-toggle-icon" alt="theme toggler button">
+				<img class="nav-link" src="../Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">
 			</div>
 			<div class="collapse navbar-collapse hamburgeritems enddiv order-3 ">
 				<ul class="navbar-nav end-links">

diff --git a/Images/navbar/moon.png b/Images/navbar/moon.png
diff --git a/Images/navbar/sun.png b/Images/navbar/sun.png
diff --git a/index.html b/index.html
@@ -289,14 +289,18 @@
             </div>
             <!-- Theme Toggle Icon -->
 
+
+                <img class="nav-link" src="./Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">
+
             <span class="slider" style="width: 40px; height: 20px; display: none;"></span> 
 
+
             <div id="sun-moon-mode-toggler" class="toggle-container" >
               <input type="checkbox" id="themeToggle" class="switch-checkbox" onclick="toggleTheme()">
               <label  id="themeChangeToggle" class="theme-switch" for="themeToggle">
               <div class="toggle-button">
-                  <span class="light-mode-icon"><img src="images/sun.svg" style = "display: block;"></span>
-                  <span class="dark-mode-icon"><img src="images/moon.svg"style = "display: block;"></span>
+                  <span class="light-mode-icon"><img src="Images/navbar/sun.png" style = "display: block;"></span>
+                  <span class="dark-mode-icon"><img src="Images/navbar/moon.png"style = "display: block;"></span>
               </div>
               </label>
           </div>

diff --git a/script.js b/script.js
@@ -92,3 +92,17 @@ function displayVisitorCount() {
 }
 document.addEventListener('DOMContentLoaded', displayVisitorCount);
 
+//Themechange icon toggling behaviour
+let themeToggleIcon = document.getElementById("theme-toggle-icon");
+let themeToggleLogo = document.getElementById("theme-toggle-logo");
+themeToggleIcon.addEventListener("click", function () {
+  document.body.classList.toggle("dark-theme");
+  document.body.classList.toggle(":root")
+  if (document.body.classList.contains("dark-theme")) {
+    themeToggleIcon.src = "Images/navbar/sun.png";
+    themeToggleLogo.src = "Images/logo/Logo-Dark.png";
+  } else {
+    themeToggleIcon.src = "Images/navbar/moon.png";
+    themeToggleLogo.src="Images/logo/Logo-Light.png";
+  }
+});
diff --git a/style.css b/style.css
@@ -1187,8 +1187,8 @@ font-size: 24px;
 
 }
     .faq-container {
-        padding:20px;
-    }
+        padding: 20px;
+}
     .faq-container h1 {
         font-size: 2rem;
     }