vishal02527 · Ankitha2130 · Oct 15, 2024 · Oct 15, 2024 · Oct 15, 2024 · Oct 15, 2024
diff --git a/avatars.css b/avatars.css
@@ -19,7 +19,7 @@
 .row{
     /* max-width: 30vw; */
     /* max-height: 80vh; */
-    border: 2px solid rgb(17, 15, 59);
+    border: 2px solid var(--secondary-color);
     border-radius: 10px;
     padding: 13px;
     display: flex;
@@ -34,9 +34,13 @@
     border-radius: 7px;
 }
 .row h1{
-    color: #095555;
-
+    color: var(--ternary-color);   
+}
+
+.row p{
+    color: var(--secondary-color);
 }
+
 .row button{
     color: white;
     /* border-image: linear-gradient(to right,#3acfd5 0%,#3a4ed5 100% )1;
@@ -240,4 +244,20 @@
         grid-template-columns: 1fr;
     }
 
-  }
+  }
+
+  #icon{
+    width: 30px;
+    cursor: pointer;
+}
+
+:root{
+  --bg-color: url(https://www.hitaambrish.com/stat/img/home/quotes-bg.jpg);
+  --secondary-color: #0e0e0e;
+  --ternary-color: #095555;
+}
+.dark-theme{
+  --bg-color: url(https://www.hitaambrish.com/stat/img/home/Gallery_Bg.jpg);
+  --secondary-color: #fff;
+  --ternary-color: #ab9353;
+}
diff --git a/avatars.html b/avatars.html
@@ -17,7 +17,7 @@
     <link rel="stylesheet" href="avatars.css">
     <style>
         body{
-        background-image: url(https://www.hitaambrish.com/stat/img/home/quotes-bg.jpg);
+        background-image: var(--bg-color);
         font-family: Arial, sans-serif;
         padding: 0;
         margin: 0;
@@ -258,6 +258,7 @@
             <a href="#" onclick="showLoginForm()">Discussion Forum</a>
             <a href="devotional-resources.html">Devotional Resources</a>
             <a href="avatars.html">Avatars</a>
+            <img src="images/moon.png" id="icon">
           </div>
         </div>
         <form class="searchForm">
@@ -416,4 +417,4 @@ <h3>Follow Us</h3>
     <script src="script.js"></script>
     </footer>
 </body>
-</html>
+</html>
diff --git a/bhagavad_gita_details.html b/bhagavad_gita_details.html
@@ -8,8 +8,8 @@
     <style>
         body {
             font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-            background-image: url(https://www.hitaambrish.com/stat/img/home/quotes-bg.jpg);
-            color: #333;
+            background-image: var(--bg-color);
+            color: var(--secondary-color);
             padding: 0;
             margin: 0;
             overflow-x: hidden;
@@ -34,7 +34,7 @@
         .content p {
             font-size: 18px;
             line-height: 1.6;
-            color: #555;
+            color: var(--ternary-color);
             margin-bottom: 15px;
         }
 
@@ -69,7 +69,7 @@
         }
 
         .shloka-section {
-            background-color: rgba(255, 255, 255, 0.8);
+            background-color: var(--primary-color);
             border-radius: 10px;
             padding: 20px;
             margin-top: 30px;
@@ -80,7 +80,7 @@
         }
 
         .shloka h3 {
-            color: #330867;
+            color: var(--forth-color);
             margin-bottom: 10px;
         }
 
@@ -161,11 +161,34 @@
         .language-toggle:hover {
             background-color: #8c7a44;
         }
+
+        #icon{
+          width: 30px;
+          cursor: pointer;
+          position: absolute;
+          top: 25px;
+          right: 170px;
+      }
+      :root{
+        --bg-color: url(https://www.hitaambrish.com/stat/img/home/quotes-bg.jpg);
+        --primary-color: #fff;
+        --secondary-color: #0e0e0e;
+        --ternary-color: #555;
+        --forth-color: #330867;
+      }
+      .dark-theme{
+        --bg-color: url(https://www.hitaambrish.com/stat/img/home/Gallery_Bg.jpg);
+        --primary-color: #0e0e0e;
+        --secondary-color: #fff;
+        --ternary-color: #f7f7f7;
+        --forth-color: lightblue;
+      }
+
     </style>
 </head>
 <body>
     <button id="languageToggle" class="language-toggle" onclick="toggleLanguage()">हिंदी में पढ़ें</button>
-
+    <img src="images/moon.png" id="icon">
     <div class="content">
         <a href="scriptures.html" class="back-button" data-translate="back">← Back to Scriptures</a>
         <h1 data-translate="title">The Bhagavad Gita</h1>
@@ -833,6 +856,18 @@ <h3 data-translate="verse-30-title">Chapter 3, Verse 30 - Detachment in Action</
 
         };
 
+        var icon=document.getElementById("icon");
+
+      icon.onclick = function() {
+        document.body.classList.toggle("dark-theme");
+        if(document.body.classList.contains("dark-theme")){
+          icon.src="images/sun.png";
+        }
+        else{
+          icon.src="images/moon.png";
+        }
+      }
+
         let currentLanguage = 'en';
 
         function toggleLanguage() {
@@ -860,4 +895,4 @@ <h3 data-translate="verse-30-title">Chapter 3, Verse 30 - Detachment in Action</
         updateToggleButton();
     </script>
 </body>
-</html>
+</html>
diff --git a/chatbot.html b/chatbot.html
@@ -21,6 +21,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
   </head>
   <body class="bg-[#1B63AC] flex items-center justify-center min-h-screen">
+    <img src="images/moon.png" id="icon">
     <div id="Loader"></div>
     <div
       class="flex flex-col items-center justify-center w-full max-w-xl space-y-4"
@@ -33,7 +34,7 @@
         />
       </div>
 
-      <div class="chat-container w-full bg-white p-4 rounded-lg shadow-md">
+      <div class="chat-container w-full p-4 rounded-lg shadow-md">
         <div id="output-field" class="text-center text-lg font-semibold mb-3">
 
             🌸🌸🌸How can I help you today?🌸🌸🌸
@@ -94,6 +95,41 @@
     </div>
 
     <style>
+      .chat-container {
+        width: 100%;
+        max-width: 500px;
+        background-color: var(--primary-color);
+      }
+
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        background-color: var(--bg-color); /* Optional: to visualize the centering */
+      }
+
+      #output-field{
+          color: var(--secondary-color);
+      }
+
+      #icon{
+          width: 30px;
+          cursor: pointer;
+          position: absolute;
+          right: 125px;
+          top: 50px;
+      }
+
+      :root{
+        --bg-color: #eef4f9;
+        --primary-color: #fff;
+        --secondary-color: #0e0e0e;
+      }
+      .dark-theme{
+        --bg-color: #afb1b2;
+        --primary-color: #0e0e0e;
+        --secondary-color: #fff;
+      }
 
 .chat-container {
     display: flex;
@@ -177,10 +213,11 @@
 .message {
     font-size: 1rem;
     margin: 0.5rem 0;
-}
 
     </style>
 
+
+
     <script type="importmap">
       {
         "imports": {
@@ -434,6 +471,18 @@
 
     </script>
     <script>
+      var icon=document.getElementById("icon");
+
+    icon.onclick = function() {
+    document.body.classList.toggle("dark-theme");
+    if(document.body.classList.contains("dark-theme")){
+      icon.src="images/sun.png";
+    }
+    else{
+      icon.src="images/moon.png";
+    }
+  }
+
       var loader = document.getElementById("Loader");
       window.addEventListener("load", function () {
         loader.style.display = "none";

diff --git a/devotional-resources.html b/devotional-resources.html
@@ -55,7 +55,7 @@
 
       body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-        background-image: url(https://www.hitaambrish.com/stat/img/home/quotes-bg.jpg);
+        background-image: var(--bg-color);
         color: #333;
         margin: 0;
         padding: 0;
@@ -196,7 +196,7 @@
       }
 
       .resource-card {
-        background-color: #fff;
+        background-color: var(--primary-color);
         border-radius: 10px;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         padding: 20px;
@@ -211,7 +211,7 @@
       .resource-card p {
         font-size: 18px;
         line-height: 1.6;
-        color: #333;
+        color: var(--secondary-color);
         margin-bottom: 15px;
       }
 
@@ -463,6 +463,24 @@
           font-size: 12px;
         }
       }
+
+      #icon{
+          width: 30px;
+          cursor: pointer;
+      }
+      :root{
+        --bg-color: url(https://www.hitaambrish.com/stat/img/home/quotes-bg.jpg);
+        --primary-color: #fff;
+        --secondary-color: #0e0e0e;
+        --ternary-color: #f7f7f7;
+      }
+      .dark-theme{
+        --bg-color: url(https://www.hitaambrish.com/stat/img/home/Gallery_Bg.jpg);
+        --primary-color: #0e0e0e;
+        --secondary-color: #fff;
+        --ternary-color: rgba(32, 26, 26, 0.785);
+      }
+
     </style>
   </head>
   <body>
@@ -481,6 +499,7 @@
             <a href="gallery.html">Gallery</a>
             <a href="#" onclick="showLoginForm()">Discussion Forum</a>
             <a href="devotional-resources.html" id="active">Devotional Resources</a>
+            <img src="images/moon.png" id="icon">
           </div>
         </div>
         <form class="searchForm" onsubmit="return false;">
@@ -642,6 +661,16 @@ <h3>Follow Us</h3>
 
 
     <script>
+      icon.onclick = function() {
+        document.body.classList.toggle("dark-theme");
+        if(document.body.classList.contains("dark-theme")){
+          icon.src="images/sun.png";
+        }
+        else{
+          icon.src="images/moon.png";
+        }
+      }
+
       window.onscroll = function () {
         toggleScrollTopButton();
       };