implementing dark mode

Ojas-Arora · Jan 10, 2025 · 33dd555 · 33dd555
1 parent d86a64e
commit 33dd555
Show file tree

Hide file tree

Showing 15 changed files with 650 additions and 447 deletions.
diff --git a/about.css b/about.css
@@ -4,8 +4,37 @@
 
   body {
     font-family: Arial, sans-serif;
-    background-color: antiquewhite;
-  }
+    background-color: var(--body-bg);
+  }
+
+  :root {
+    --body-bg: antiquewhite;
+    --primary-color: white;
+    --border-color: #d6a52b;
+    --tertiary-color: #191970;
+    --pink-bg: #cf00a3;
+    --heading-color: #8b4513;
+    --icons-color: #d6a52b;
+    --footer-text: #4a4a4a;
+    --card-text: #333;
+    --card-bg: #f7f7f7;
+    --back-button-color: #333;
+}
+
+html .dark {
+    --body-bg: black;
+    --primary-color: rgb(41, 40, 40);
+    --tertiary-color: #37fcff;
+    --border-color: black;
+    --pink-bg: #ff00ff;
+    --heading-color: #ffff00;
+    --icons-color: #d6ae2b;
+    --feature-border-color: #ffff00; 
+    --footer-text: white;
+    --card-text: aqua;
+    --card-bg: #044464;
+    --back-button-color: #d6a52b;
+}
 
   .navbar .logo h2{
     margin-left: 150%;
@@ -221,7 +250,8 @@
     transform: scale(1.1);
   }
   .about-box {
-    background-color: #f9f9f9;
+    width: 80%;
+    background-color: var(--primary-color);
     border: 2px solid #d6a52b;
     border-radius: 10px;
     padding: 20px;
@@ -248,7 +278,7 @@
     left: 20px;
     background-color: transparent;
     border: none;
-    color: #333;
+    color: var(--back-button-color);
     font-size: 24px;
     cursor: pointer;
     z-index: 999;
@@ -260,10 +290,10 @@
   }
   .about-section h1 {
     text-align: center;
-    color: #8b4513;
+    color: var(--heading-color);
   }
   .about-section h2 {
-    color: #8b4513;
+    color: var(--heading-color);
   }
   .about-section li {
     color: #191970;
@@ -274,7 +304,7 @@
   .about-section p {
     margin: 10px 0;
     text-align: center;
-    color: #191970;
+    color: var(--tertiary-color);
   }
   .features {
     display: flex;
@@ -285,7 +315,7 @@
   }
 
   .feature-card {
-    background: #fdf4dc;
+    background: var(--card-bg);
     border: 2px solid #ffd465;
     border-radius: 8px;
     padding: 20px;
@@ -301,12 +331,12 @@
 
   .feature-card i {
     font-size: 40px;
-    color: #d6a52b;
+    color: var(--icons-color);
     margin-bottom: 10px;
   }
 
   .feature-card h3 {
-    color: #8b4513;
+    color: var(--heading-color);
     margin-bottom: 10px;
   }
   .image-button1 {
@@ -339,9 +369,9 @@
 
   footer {
     padding: 10px;
-    background-color: #f0cd9e66;
+    background-color: var(--primary-color);
+    color: var(--footer-text);
     text-align: center;
-    border: 4px solid #faebd7;
   }
 
   @media(max-width:768px) {

diff --git a/about.html b/about.html
@@ -71,9 +71,9 @@ <h2>Ajivika</h2>
     <section class="about-section">
       <div class="about-box">
         <h1>
-          <i class="fas fa-info-circle" style="color: #cf00a3" ></i> About Us
+          <i class="fas fa-info-circle" style="color: var(--pink-bg)" ></i> About Us
         </h1>
-        <div class="about-section">
+        <div class="about-container">
           <p>
             In order to address the lack of an intelligent and adaptive Job
             Recommendation Portal, the idea to create a website Ajivika (literal
@@ -145,7 +145,34 @@ <h3>🌍 Access to Jobs in Smaller Areas</h3>
           const navLinks = document.querySelector('.nav-links');
           navLinks.classList.toggle('active');
       }
-  </script>
+    </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+        const themeToggle = document.querySelector('.theme-switch__checkbox');
+        const currentTheme = localStorage.getItem('theme');
+          if (currentTheme === 'dark') {
+              document.body.classList.add('dark');
+              document.body.classList.remove('light');
+              themeToggle.checked = true;
+          } else {
+              document.body.classList.add('light');
+              document.body.classList.remove('dark');
+          }
+
+      themeToggle.addEventListener('change', () => {
+        if (themeToggle.checked) {
+            document.body.classList.add('dark');
+            document.body.classList.remove('light');
+            localStorage.setItem('theme', 'dark');
+        } else {
+            document.body.classList.remove('dark');
+            document.body.classList.add('light');
+            localStorage.setItem('theme', 'light');
+        }
+          });
+      });
+    </script>
 
     <footer>&copy; 2024 Ajivika. All rights reserved.</footer>
   </body>

diff --git a/contact.css b/contact.css
@@ -1,6 +1,28 @@
 body {
     font-family: Arial, sans-serif;
-    background-color: antiquewhite;
+    background-color: var(--body-bg);
+}
+
+:root {
+    --body-bg: antiquewhite;
+    --primary-color: white;
+    --icon-color: #d6a52b;
+    --card-text: #333;
+    --card-bg: #f7f7f7;
+    --heading-color: #8b4513;
+    --text-area: white;
+    --textarea-text: black;
+}
+
+html .dark {
+    --body-bg: black;
+    --primary-color: rgb(41, 40, 40);
+    --icon-color: aqua;
+    --card-text: yellow;
+    --card-bg: #044464;
+    --heading-color: rgb(255, 187, 52);
+    --text-area: gray;
+    --textarea-text: white;
 }
 
 .slideshow-container {
@@ -141,7 +163,7 @@ body {
 
 .option p {
     font-size: 16px;
-    color: #333;
+    color: var(--card-text);
 }
 .options-container:hover{
     color: #FFD465;
@@ -234,7 +256,7 @@ text-align: left; /* Adjusts text alignment, optional */
     left: 20px;
     background-color: transparent;
     border: none;
-    color: #333;
+    color: var(--card-text);
     font-size: 24px;
     cursor: pointer;
     z-index: 999;
@@ -279,7 +301,7 @@ text-align: left; /* Adjusts text alignment, optional */
 .contact-section {
     max-width: 600px;
     margin: 50px auto;
-    background-color: #fff;
+    background-color: var(--primary-color);
     padding: 30px;
     box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
     border-radius: 10px;
@@ -293,14 +315,14 @@ text-align: left; /* Adjusts text alignment, optional */
 
 .contact-section h1 {
     text-align: center;
-    color: #333;
-    font-size: 30px;
+    color: var(--heading-color);
+    font-size: 35px;
     margin-bottom: 20px;
 }
 
 .contact-section p {
     text-align: center;
-    color: #666;
+    color: var(--card-text);
     font-size: 15px;
     margin-bottom: 30px;
 }
@@ -312,17 +334,20 @@ text-align: left; /* Adjusts text alignment, optional */
 
 .contact-section label {
     margin-bottom: 5px;
-    color: #333;
+    color: var(--card-text);
     font-size: 16px;
 }
 
 .contact-section input,
 .contact-section textarea {
     padding: 12px;
     border: 1px solid #ddd;
+    background-color: var(--text-area);
+    color: var(--textarea-text);
     border-radius: 5px;
     margin-bottom: 20px;
     font-size: 16px;
+    font-weight: 400;
     width: 100%;
     box-sizing: border-box;
     transition: all 0.3s ease;
@@ -356,7 +381,7 @@ text-align: left; /* Adjusts text alignment, optional */
     width: 20px;
     text-align: center;
     margin-right: 10px;
-    color: #d6a52b;
+    color: var(--icon-color);
 }
 .image-button1 {
     position: fixed;

diff --git a/contact.html b/contact.html
@@ -140,5 +140,32 @@ <h1><i class="fas fa-envelope icon"></i> Contact Us</h1>
             }
         });
     </script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+        const themeToggle = document.querySelector('.theme-switch__checkbox');
+        const currentTheme = localStorage.getItem('theme');
+        if (currentTheme === 'dark') {
+            document.body.classList.add('dark');
+            document.body.classList.remove('light');
+            themeToggle.checked = true;
+        } else {
+            document.body.classList.add('light');
+            document.body.classList.remove('dark');
+        }
+
+    themeToggle.addEventListener('change', () => {
+        if (themeToggle.checked) {
+            document.body.classList.add('dark');
+            document.body.classList.remove('light');
+            localStorage.setItem('theme', 'dark');
+        } else {
+            document.body.classList.remove('dark');
+            document.body.classList.add('light');
+            localStorage.setItem('theme', 'light');
+        }
+        });
+    });
+    </script>
 </body>
 </html>
diff --git a/desktop.ini b/desktop.ini
@@ -0,0 +1,2 @@
+[LocalizedFileNames]
+resume.jpg=@resume,0