added dark mode option

Vimall03 · Oct 5, 2024 · 08c251e · 08c251e
1 parent e51cf80
commit 08c251e
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 12 deletions.
diff --git a/images/favicons/sun.png b/images/favicons/sun.png
diff --git a/index.html b/index.html
@@ -7,6 +7,8 @@
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   <link rel="stylesheet" href="main.css">
 </head>
+
+
 <style>
     body {
   font-family: Arial, sans-serif;
@@ -42,7 +44,8 @@
 <body>
 
   <!-- Navigation for Tablets and Desktops -->
-    <nav class="nav">
+    <nav class="nav" style="display: flex;
+    vertical-align: top;">
       <div class="nav__wrapper grid">
           <div class="grid__span2 nav__logo-wrap">
               <a href="index.html">
@@ -51,7 +54,12 @@
           </div>
           <div class="grid__span10 nav__links-wrap">
               <ul class="nav__links">
-
+                <li class="nav__link">
+                    <a href="#">
+                        <img class="nav__link-icon" id="themeIcon" src="images/favicons/sun.png">
+                        <span id="darkModeToggle" class="nav__link-item">Dark mode</span>
+                    </a>
+                </li>
                   <li class="nav__link">
                       <a href="#">
                           <img class="nav__link-icon" src="images/favicons/idea_32px.png">
@@ -77,6 +85,7 @@
                       </a>
                   </li>
               </ul>
+
           </div>
       </div>
   </nav>
@@ -423,7 +432,38 @@ <h5 class="heading-secondary heading-secondary--semi-bold heading-secondary--whi
         document.querySelector(".sidebar__right").style.display = state;
     }
 </script>
+<script>
+    const toggleButton = document.getElementById('darkModeToggle');
+    const themeIcon = document.getElementById('themeIcon');
+
+    console.log("JavaScript is working!"); // Debugging line
+
+    // Check if dark mode is enabled (using localStorage)
+    const currentTheme = localStorage.getItem('theme');
+    if (currentTheme === 'dark') {
+      document.body.classList.add('dark-theme');
+      themeIcon.src = 'images/favicons/moon.png'; // Change to moon icon
+    }
+
+    // Add event listener to toggle button
+    toggleButton.addEventListener('click', () => {
+      console.log("Button clicked!"); // Debugging line
+
+      document.body.classList.toggle('dark-theme');
+
+      // Update icon and localStorage based on theme
+      if (document.body.classList.contains('dark-theme')) {
+        themeIcon.src = 'images/favicons/moon.png'; // Change to moon icon
+        localStorage.setItem('theme', 'dark');
+      } else {
+        themeIcon.src = 'images/favicons/sun.png'; // Change back to sun icon
+        localStorage.setItem('theme', 'light');
+      }
+    });
+  </script>
+
 <script src="js/external.js"></script>
 <script src="js/index.js"></script>
+
 </body>
 </html>
diff --git a/js/js/script.js b/js/js/script.js
@@ -0,0 +1,24 @@
+// Get references to elements
+const toggleButton = document.getElementById('darkModeToggle');
+const themeIcon = document.getElementById('themeIcon');
+
+// Check if dark mode is enabled (using localStorage)
+const currentTheme = localStorage.getItem('theme');
+if (currentTheme === 'dark') {
+  document.body.classList.add('dark-theme');
+  themeIcon.src = 'images/favicons/moon.png'; // Change to moon icon
+}
+
+// Add event listener to toggle button
+toggleButton.addEventListener('click', () => {
+  document.body.classList.toggle('dark-theme');
+
+  // Update icon and localStorage based on theme
+  if (document.body.classList.contains('dark-theme')) {
+    themeIcon.src = 'images/favicons/moon.png'; // Change to moon icon
+    localStorage.setItem('theme', 'dark');
+  } else {
+    themeIcon.src = 'images/favicons/sun.png'; // Change back to sun icon
+    localStorage.setItem('theme', 'light');
+  }
+});
diff --git a/main.css b/main.css
@@ -113,6 +113,8 @@ a {
     font-weight: 700
 }
 
+
+
 .paragraph {
     font-size: 1.4rem;
     font-weight: 500;
@@ -151,10 +153,28 @@ a {
     right: .5rem;
     top: -.2rem
 }
+/* Light theme (default) 
+:root {
+    --background-color: #ffffff;
+    --text-color: #121212;
+  }
+  */
+  /* Dark theme */
+  body.dark-theme {
+    --background-color: #121212;
+    --text-color: #ffffff;
+  }
+
+  body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+    transition: background-color 0.3s ease, color 0.3s ease; /* Add a smooth transition */
+  }
+
 
 .nav__link-item {
     font-weight: 500;
-    color: #000;
+    color:var(--background-color);
     font-size: 1.6rem;
     vertical-align: middle;
     top: -.4rem;
@@ -164,7 +184,7 @@ a {
 .sidebar__link-item {
     position: relative;
     font-size: 2rem;
-    color: #000;
+    color: var(--background-color);
     top: -.6rem;
     font-weight: 500
 }
@@ -236,7 +256,7 @@ a {
 .menus__description--right {
     text-align: right;
     font-size: 1.4rem;
-    color: white
+    color: white;
 }
 
 .food-items__heading {
@@ -690,8 +710,8 @@ a {
     background-color: #fff;
     z-index: 100;
     padding: 0 1rem;
-    -webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15);
-    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15)
+    -webkit-box-shadow: 4px 4px 15px #121212;
+    box-shadow: 4px 4px 15px #121212;
 }
 
 @media (max-width: 56.25em) {
@@ -740,8 +760,8 @@ a {
     position: fixed;
     display: none;
     z-index: 100;
-    -webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15);
-    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15)
+    -webkit-box-shadow: 4px 4px 15px #121212;
+    box-shadow: 4px 4px 15px #121212;
 }
 
 @media (max-width: 56.25em) {
@@ -796,7 +816,7 @@ a {
 }
 
 .sidebar__left {
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: #121212;
     width: 60%;
     height: inherit;
     float: left;
@@ -810,8 +830,8 @@ a {
     background-color: #fff;
     width: 40%;
     height: inherit;
-    -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.16);
-    box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.16);
+    -webkit-box-shadow: -10px -10px 10px #121212;
+    box-shadow: -10px -10px 10px #121212;
     float: right;
     -webkit-transition: 1s all;
     -o-transition: 1s all;