Add dark mode toggle switch

foodoHub · Oct 26, 2024 · b14a88f · b14a88f
1 parent bea2d28
commit b14a88f
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -16,6 +16,10 @@
   </head>
   <body>
     <main>
+      <label class="switch">
+        <input type="checkbox" id="darkModeToggle" />
+        <span class="slider"></span>
+      </label>
       <h1>Welcome to <span class="foodo">foodo</span></h1>
       <p>
         Your AI-powered cooking assistant, guiding you step-by-step to create delicious meals while connecting you with a community of food lovers.
@@ -33,5 +37,10 @@ <h1>Welcome to <span class="foodo">foodo</span></h1>
       &copy; 2024
       <span class="footo">foodo</span>. All rights reserved.
     </footer>
+    <script>
+      document.getElementById('darkModeToggle').addEventListener('change', function () {
+        document.body.classList.toggle('dark-mode', this.checked)
+      })
+    </script>
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -14,8 +14,8 @@ body {
   align-items: center;
   min-height: 100vh;
   margin: 0;
-  background-color: #f4f4f4;
-  color: #333;
+  background-color: #2c2c2c; /* Dark gray background */
+  color: #e0e0e0; /* Light text color */
 }
 main {
   flex-grow: 1;
@@ -88,3 +88,62 @@ footer {
 .footo {
   color: #e67e22;
 }
+/* Toggle Switch */
+.switch {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.4s;
+  border-radius: 34px;
+}
+
+.slider:before {
+  position: absolute;
+  content: '';
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #e67e22;
+}
+
+input:checked + .slider:before {
+  transform: translateX(26px);
+}
+
+/* Light Mode (default) */
+body {
+  background-color: #ffffff; /* Light background */
+  color: #000000; /* Dark text color */
+}
+
+/* Dark Mode */
+body.dark-mode {
+  background-color: #2c2c2c; /* Dark gray background */
+  color: #e0e0e0; /* Light text color */
+}