Added Dark And Light Theme

index.html

@@ -87,6 +87,7 @@
         <div class="line"></div>
         <div class="line"></div>
       </div>
+      <img src="image/moon.png" id="icon">
     </nav>
   </header>
 
@@ -136,16 +137,16 @@ <h4 class="title"><a href=""> Normal checkup</a></h4>
                 cause problems.</p>
             </div>
           </div>
-          
-          <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">          
+
+          <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
             <div class="icon-box" data-aos="fade-up" data-aos-delay="400">
               <div class="icon2"><i class="fas fa-dna"></i></div>
               <h4 class="title"><a href="test.html">Blood Test</a></h4>
               <p class="description"> Get your tests done to look for signs of disease or agents that cause disease.</p>
             </div>
           </div>
-        
-          
+
+
           <div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
             <div class="icon-box" data-aos="fade-up" data-aos-delay="300">
               <div class="icon3"><i class="fas fa-temperature-high"></i></div>
@@ -207,8 +208,8 @@ <h1 class="about-us-heading">About Us</h1>
                       }
                     </style>
                     <g>
-                      <polygon class="st0" points="501.539,169.221 453.886,86.7 303.669,173.449 303.669,0 208.365,0 208.365,173.479 58.114,86.73 
-		10.461,169.261 160.674,255.99 10.501,342.71 58.154,425.231 208.365,338.482 208.365,512 303.669,512 303.669,338.542 
+                      <polygon class="st0" points="501.539,169.221 453.886,86.7 303.669,173.449 303.669,0 208.365,0 208.365,173.479 58.114,86.73
+		10.461,169.261 160.674,255.99 10.501,342.71 58.154,425.231 208.365,338.482 208.365,512 303.669,512 303.669,338.542
 		453.846,425.271 501.499,342.74 351.267,255.99 	" />
                     </g>
                   </svg>
@@ -658,7 +659,7 @@ <h4>Pediatrician</h4>
 
    <!-- ################# Contact Section ################# -->
   <!-- clicking on "contact us" directs to this section -->
-<section id="contact" class="contact"> 
+<section id="contact" class="contact">
   <div class="section-title">
       <h2>Contact</h2>
       <p>Located your appointment. Feel free to give us feedback and help us improve our digital med care.</p>
@@ -670,7 +671,7 @@ <h2>Contact</h2>
               <iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8055368048804!2d77.22981385036265!3d28.6655407892513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1679424592719!5m2!1sen!2sin"></iframe>
               <a href="https://www.fnfgo.com/">FNF Mods</a>
           </div>
-          
+
       </div>
       <br>
       <div class="row mt-2" style="display: flex; flex-direction: row; align-items: stretch; justify-content: space-around;">
@@ -725,13 +726,13 @@ <h4>Call:</h4>
     confirmationMessage.style.display = 'block';
     // Reset the form
     event.target.reset();
-  
+
     setTimeout(function() {
       confirmationMessage.style.display = 'none';
     }, 5000); //msg disappears after 5s
   });
 </script>
-     
+
           <!-- End Contact Section -->
 
 
@@ -754,7 +755,7 @@ <h3 class="name">Dinesh Karthik</h3>
                   <span class="job">Bangalore</span>
                 </div>
               </div>
-              <p>Digital healthcare has provided me with quick and easy access to medical advice without 
+              <p>Digital healthcare has provided me with quick and easy access to medical advice without
                  the long waits typically associated with in-person visits. My doctor can easily monitor
                  my condition remotely, and I feel more connected to my healthcare team than ever before. Highly recommend!</p>
               <div class="rating">
@@ -766,15 +767,15 @@ <h3 class="name">Dinesh Karthik</h3>
               </div>
             </div>
 
-            <div class="swiper-slide testimonals-item" id="slide-item" > 
+            <div class="swiper-slide testimonals-item" id="slide-item" >
               <div class="info">
                 <img src="./images/profile2.webp" alt="">
                 <div class="text-box">
                   <h3 class="name">Virat Kohli</h3>
                   <span class="job">Delhi</span>
                 </div>
               </div>
-              <p>Digital healthcare has been a game-changer for me. I love being able to consult with 
+              <p>Digital healthcare has been a game-changer for me. I love being able to consult with
                  specialists without leaving my home, especially since I live in a rural area with limited access to healthcare facilities.
                  The only downside is that sometimes the app can be a bit slow, but overall, the benefits far outweigh the minor inconveniences.</p>
               <div class="rating">
@@ -959,10 +960,10 @@ <h2>Thank you for your Feedback! 💚</h2>
 
   updateStars();
 </script>
-    
+
   </main><!-- End #main -->
   <!-- ############### Footer ############### -->
-  
+
   <footer>
     <div class="footer-wrapper">
       <div class="footer-columns">
@@ -999,7 +1000,7 @@ <h4>Legal</h4><br>
               <li><a href="#">Testimonials</a></li>
             </ul>
           </section>
-          
+
        <section class="footer-col" >
       <div>
       <h4>RAPIDOC Newsletter</h4><br>
@@ -1015,7 +1016,7 @@ <h4>RAPIDOC Newsletter</h4><br>
       </form>
       <p class="confirmation-message">Thank you for subscribing!</p>
        </section>
-      
+
 
           <script>
             document.querySelector('.subscribe-form').addEventListener('submit', function (event) {
@@ -1036,25 +1037,25 @@ <h4>RAPIDOC Newsletter</h4><br>
               }, 5000); // Hide after 5 seconds
             });
           </script>
-            
+
             <script>
               document.querySelector('.subscribe-form').addEventListener('submit', function(event) {
                 event.preventDefault(); // Prevent the form from submitting in the traditional way
-            
+
                 // Show the modal popup
                 const modal = document.getElementById('popupModal');
                 modal.style.display = 'block';
-            
+
                 // Clear the input field
                 this.querySelector('input[type="email"]').value = '';
-            
+
                 // Hide the modal when the close button is clicked
                 const closeModal = document.querySelector('.modal .close');
                 closeModal.onclick = function() {
                   modal.style.display = 'none';
                 }
               });
-            
+
               // Hide the modal when clicking outside of it
               window.onclick = function(event) {
                 const modal = document.getElementById('popupModal');
@@ -1067,7 +1068,7 @@ <h4>RAPIDOC Newsletter</h4><br>
         </div>
       </div>
     </div>
-   
+
     <div class="footer-bottom">
       <div class="footer-bottom-wrapper">
         <small id="ss">© <span id="year"></span><span> RapiDoc</span>&nbsp;| All Rights
@@ -1298,6 +1299,15 @@ <h4>RAPIDOC Newsletter</h4><br>
 
   <div id="progressBar"></div>
   <script>
+    var icon = document.getElementById("icon")
+    icon.onclick = function(){
+      document.body.classList.toggle("dark-theme");
+      if(document.body.classList.contains("dark-theme")){
+        icon.src = "image/sun.png";
+      }else{
+        icon.src = "image/moon.png";
+      }
+    }
     window.onscroll = function () {
       var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
       var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

style.css

@@ -1,7 +1,21 @@
 body {
   font-family: "Open Sans", sans-serif;
-  color: #fff;
-  background-color: #000;
+  color: var(--primary-color);
+  background-color: var(--secondary-color);
+}
+:root{
+
+  --primary-color: #78918c;
+  --secondary-color: #040303;
+}
+.dark-theme{
+  --primary-color: #000000;
+  --secondary-color: #78918c;
+
+}
+#icon{
+  width: 30px;
+  cursor: pointer;
 }
 
 a {
@@ -1214,7 +1228,7 @@ section {
 
 
 .feedback-form .rate-us {
-  text-align: center !important; 
+  text-align: center !important;
   display: block;
   margin-top: 0px;
   width: 100%;
@@ -1310,7 +1324,7 @@ section {
   flex-direction: column;
   width: 100%;
   margin-bottom: 15px;
-} 
+}
 
 @media (min-width: 1200px) {
   .feedback-wrapper {
@@ -1369,7 +1383,7 @@ section {
 }
 .popup img {
   margin-top: 20px;
-  
+
 }
 
 .popup-button {
@@ -1542,7 +1556,7 @@ footer {
 }
 
 .circle {
-  border-radius: 50%; 
+  border-radius: 50%;
   background-color: #fff;
   display: flex;
   justify-content: center;
@@ -1855,7 +1869,7 @@ footer {
   gap: 1rem;
   align-items: center;
   margin-left: -100px;
-  
+
 }
 
 .social-links img {
@@ -1931,7 +1945,7 @@ background-size: 100%;
 
 /* Use the text as a mask for the background */
 -webkit-background-clip: text;
--webkit-text-fill-color: transparent; 
+-webkit-text-fill-color: transparent;
 -moz-background-clip: text;
 -moz-text-fill-color:transparent;
 }