From fd8bf48c1427ac13dd5289d5c13112a9f2bc4133 Mon Sep 17 00:00:00 2001
From: sau-mili <146661411+sau-mili@users.noreply.github.com>
Date: Mon, 5 Aug 2024 19:49:26 +0530
Subject: [PATCH] Dark-mode of Three pages added

---
 Adventure.html    | 35 +++++++++++++++++++++
 Cultural_Exp.html | 77 +++++++++++++++++++++++++++++++++++++++++++++++
 HoneyMoon.html    | 77 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 189 insertions(+)

diff --git a/Adventure.html b/Adventure.html
index 248872be..03a06dda 100644
--- a/Adventure.html
+++ b/Adventure.html
@@ -189,6 +189,41 @@
         right: 1rem;
       }
     }
+
+    body.dark-mode .each{
+      background-color: #ffffffab;
+    
+      border: 1px solid #ffffff;
+    }
+
+    body.dark-mode .each h5{
+      color:#0c4581;
+    }
+
+    body.dark-mode .trip__details{
+      background-color: #0a0035;
+    }
+    body.dark-mode .trip__details p{
+      color:#caf9ff;
+    }
+    body.dark-mode .price span{
+      color:#dbdbdb;
+    }
+    body.dark-mode .price{
+      color:#dbdbdb;
+    }
+    body.dark-mode .info .tags i{
+      color:#8cc0ff;
+    }
+
+    body.dark-mode .trip__details button{
+      background-color: #cfe4fb;
+    }
+
+    body.dark-mode .trip__details button:hover{
+      background-color: transparent;
+    }
+
   </style>
 
   <link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet" />
diff --git a/Cultural_Exp.html b/Cultural_Exp.html
index 4059b1e3..51b95c62 100644
--- a/Cultural_Exp.html
+++ b/Cultural_Exp.html
@@ -95,6 +95,59 @@
         opacity: 1;
       }
     }
+    /* Dark mode feature */
+body.dark-mode{
+  --secondary-color:#0e1525;
+  --btn-border: red;
+}
+body.dark-mode {
+  background-color: var(--secondary-color);
+}
+
+body.dark-mode .nav-container {
+  background-color: #343a40;
+}
+
+body.dark-mode .section__container {
+  background-color: #002152;
+  color: #ffffff;
+}
+
+    
+    body.dark-mode .each{
+      background-color: #ffffffab;
+    
+      border: 1px solid #ffffff;
+    }
+
+    body.dark-mode .each h5{
+      color:#0c4581;
+    }
+
+    body.dark-mode .trip__details{
+      background-color: #0a0035;
+    }
+    body.dark-mode .trip__details p{
+      color:#caf9ff;
+    }
+    body.dark-mode .price span{
+      color:#dbdbdb;
+    }
+    body.dark-mode .price{
+      color:#dbdbdb;
+    }
+    body.dark-mode .info .tags i{
+      color:#8cc0ff;
+    }
+
+    body.dark-mode .trip__details button{
+      background-color: #cfe4fb;
+    }
+
+    body.dark-mode .trip__details button:hover{
+      background-color: transparent;
+    }
+
   </style>
 
   <link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet" />
@@ -851,6 +904,30 @@ <h4>Contact Us</h4>
     }
   }
 </script>
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const toggleCheckbox = document.getElementById('themeToggle');
+    const body = document.body;
+
+    // Load saved dark mode preference from localStorage
+    if (localStorage.getItem('dark-mode') === 'enabled') {
+      body.classList.add('dark-mode');
+      toggleCheckbox.checked = true;
+    } else {
+      toggleCheckbox.checked = false;
+    }
+
+    toggleCheckbox.addEventListener('change', () => {
+      if (toggleCheckbox.checked) {
+        body.classList.add('dark-mode');
+        localStorage.setItem('dark-mode', 'enabled');
+      } else {
+        body.classList.remove('dark-mode');
+        localStorage.setItem('dark-mode', 'disabled');
+      }
+    });
+  });
+</script>
 <script src="./Image-Gallery/script.js"></script>
 
 </html>
\ No newline at end of file
diff --git a/HoneyMoon.html b/HoneyMoon.html
index 83cd48b7..9c8dde10 100644
--- a/HoneyMoon.html
+++ b/HoneyMoon.html
@@ -94,6 +94,59 @@
         opacity: 1;
       }
     }
+    /* Dark mode feature */
+body.dark-mode{
+  --secondary-color:#0e1525;
+  --btn-border: red;
+}
+body.dark-mode {
+  background-color: var(--secondary-color);
+}
+
+body.dark-mode .nav-container {
+  background-color: #343a40;
+}
+
+body.dark-mode .section__container {
+  background-color: #002152;
+  color: #ffffff;
+}
+
+    
+    body.dark-mode .each{
+      background-color: #ffffffab;
+    
+      border: 1px solid #ffffff;
+    }
+
+    body.dark-mode .each h5{
+      color:#0c4581;
+    }
+
+    body.dark-mode .trip__details{
+      background-color: #0a0035;
+    }
+    body.dark-mode .trip__details p{
+      color:#caf9ff;
+    }
+    body.dark-mode .price span{
+      color:#dbdbdb;
+    }
+    body.dark-mode .price{
+      color:#dbdbdb;
+    }
+    body.dark-mode .info .tags i{
+      color:#8cc0ff;
+    }
+
+    body.dark-mode .trip__details button{
+      background-color: #cfe4fb;
+    }
+
+    body.dark-mode .trip__details button:hover{
+      background-color: transparent;
+    }
+
   </style>
 
   <link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet" />
@@ -817,5 +870,29 @@ <h4>Contact Us</h4>
   }
 </script>
 <script src="./Image-Gallery/script.js"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const toggleCheckbox = document.getElementById('themeToggle');
+    const body = document.body;
+
+    // Load saved dark mode preference from localStorage
+    if (localStorage.getItem('dark-mode') === 'enabled') {
+      body.classList.add('dark-mode');
+      toggleCheckbox.checked = true;
+    } else {
+      toggleCheckbox.checked = false;
+    }
+
+    toggleCheckbox.addEventListener('change', () => {
+      if (toggleCheckbox.checked) {
+        body.classList.add('dark-mode');
+        localStorage.setItem('dark-mode', 'enabled');
+      } else {
+        body.classList.remove('dark-mode');
+        localStorage.setItem('dark-mode', 'disabled');
+      }
+    });
+  });
+</script>
 
 </html>
\ No newline at end of file