darkmode

DharshiBalasubramaniyam · Nov 11, 2024 · eeb014d · eeb014d
1 parent 9663dec
commit eeb014d
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 0 deletions.
diff --git a/darkmode.js b/darkmode.js
@@ -0,0 +1,3 @@
+function toggleDarkMode() {
+    document.body.classList.toggle('dark-mode');
+}
diff --git a/darkmodes.png b/darkmodes.png
diff --git a/index.html b/index.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<html lang="en" data-bs-theme="dark"></html>
 <html lang="en">
 
 <head>
@@ -21,6 +22,7 @@
     <link rel="icon" href="./images/logo.png" type="image/png">
 
     <!-- font awesome icons script -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 </head>
 
@@ -85,6 +87,8 @@
                 <span class="i"><i class="fa fa-shopping-cart cart-icon" aria-hidden="true"></i> <span
                         class="no-of-cart-items">0</span></span>
             </div>
+            <img src="./moon.png" id="icon" onclick="toggleDarkMode()" alt="Toggle Dark Mode">
+
             <div class="icon">
                 <i class="fa fa-bars menu" aria-hidden="true" id="menu-icon"></i>
             </div>
@@ -553,6 +557,7 @@ <h4>Newsletter</h4>
     <script src="script/cursor.js"></script>
     <script src="script/script.js"></script>
     <script src="script/reviews.js"></script>
+    <script src="darkmode.js"></script>
 </body>
 
 </html>
diff --git a/moon.png b/moon.png
diff --git a/moons.png b/moons.png
diff --git a/styles/styles.css b/styles/styles.css
@@ -50,6 +50,41 @@ body {
     z-index: 9999;
 }
 
+/* Icon styling */
+#icon {
+    width: 30px;
+    padding-left: 10px;
+    cursor: pointer; /* Makes the icon look clickable */
+}
+
+/* Default light mode styles */
+body {
+    background-color: #ffffff;
+    color: #000000;
+}
+
+body {
+    background: linear-gradient(to right, #ffcccc, #ffe6e6); /* Adjust as per your color needs */
+    background-size: cover;
+    margin: 0;
+    padding: 0;
+}
+.container {
+    width: 100%;
+    max-width: 100%;
+    margin: 0 auto;
+}
+html, body {
+    overflow-x: hidden;
+}
+
+
+/* Dark mode styles */
+body.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+}
+
 
 .loader-container {
     position: relative;

diff --git a/sun.png b/sun.png