Dark-mode fixed

css/feedback.css

@@ -13,12 +13,12 @@ body {
   font-size: 40px;
   margin-bottom: 30px;
   padding: 20px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
   transition: box-shadow 0.3s ease;
 }
 
 .rating-container:hover {
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); */
 }
 
 .rating-container button {
@@ -483,8 +483,8 @@ body.dark-mode .rate-us {
 
 body.dark-mode .rating-container button {
   color: #555555;
-  background-color: #888;
-  border: 1px solid #888;
+  /* background-color: #888; */
+  /* border: 1px solid #888; */
 }
 
 body.dark-mode .rating-container button.filled {

feedback.html

@@ -159,5 +159,40 @@ <h2>Thank you for your Feedback!🧡</h2>
 
 
     </script>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+
+      const toggleButton = document.getElementById('checkbox');
+
+      const currentMode = localStorage.getItem('dark-mode');
+
+      if (currentMode === 'enabled') {
+
+        document.body.classList.add('dark-mode');
+
+        toggleButton.checked = true;
+
+      }
+
+      toggleButton.addEventListener('change', function () {
+
+        document.body.classList.toggle('dark-mode');
+
+        if (document.body.classList.contains('dark-mode')) {
+
+          localStorage.setItem('dark-mode', 'enabled');
+
+        }
+        else {
+
+          localStorage.setItem('dark-mode', 'disabled');
+
+        }
+      });
+
+    });
+  </script>
+
 </body>
 </html>