Merge pull request #117 from S2103aumya/main

Dark and Light Mode unavailability
Open-Source-Chandigarh · May 19, 2024 · c6daab6 · c6daab6
2 parents dda9f87 + 3c84418
commit c6daab6
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 49 deletions.
diff --git a/Public/javascript/index.js b/Public/javascript/index.js
@@ -0,0 +1,11 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+    const ctaCard = document.querySelector('.cta-card');
+    const toggleButton = document.getElementById("theme-toggle");
+    toggleButton.textContent = 'Toggle Dark Theme';
+
+    toggleButton.addEventListener('click', () => {
+        console.log("hello");
+      ctaCard.classList.toggle('dark-theme');
+    });
+  });
+
diff --git a/Public/styles/index.css b/Public/styles/index.css
@@ -11,7 +11,18 @@ html {
   font-size: 62.5%;
 }
 
+/* Dark mode body background style */
+body.dark-mode {
+  background-image: radial-gradient(circle, rgb(34, 34, 34), rgb(0, 0, 0)); /* Dark background color */
+  color: white; /* Change text color to white or any other suitable color */
+}
+.cta-card.dark-mode{
+  background-image: radial-gradient(circle, rgb(34, 34, 34), rgb(0, 0, 0)); /* Dark background color */
+  color: white; /* Change text color to white or any other suitable color */
+}
+
 body {
+  background-image: radial-gradient(circle, rgb(34, 34, 210), rgb(95, 4, 200));
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,6 @@
   "version": "1.0.0",
   "description": "A Web App to check PERMA level of a person",
   "main": "index.js",
-
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -19,7 +18,7 @@
     "body-parser": "^1.20.2",
     "dotenv": "^16.3.1",
     "ejs": "^3.1.9",
-    "express": "^4.18.2",
+    "express": "^4.19.2",
     "expressjs": "^1.0.1",
     "nodemailer": "^6.9.4",
     "nodemon": "^3.1.0"

diff --git a/views/index.ejs b/views/index.ejs
@@ -13,7 +13,7 @@
     <link rel="stylesheet" href="Public\styles\scrollbarStyle.css">
 </head>
 
-<body style="background-image: radial-gradient(circle, rgb(34, 34, 210), rgb(95, 4, 200))">
+<body>
   <!-- style="background-image: url(images/vector-purple-light-blue-gradient-260nw-1941567055.jpg);background-repeat: no-repeat;background-position: center;background-size: cover;"> -->
 
   <nav>
@@ -23,6 +23,9 @@
     <h1><a href="/">Euphoria-Check</a></h1>
     <ul>
       <li><a href="/about">About Us</a></li>
+      <li>
+        <button id="theme-toggle" class="btn btn-secondary mt-3">Toggle Dark Mode</button>
+      </li>
     </ul>
   </nav>
   <section class="cta-card">
@@ -99,6 +102,16 @@
     </div>
   </section>
   <script>
+      document.addEventListener('DOMContentLoaded', (event) => {
+      const toggleButton = document.getElementById("theme-toggle");
+      const ctacard = document.querySelector(".cta-card");
+       toggleButton.addEventListener('click', () => {
+        console.log("hylo");
+        document.body.classList.toggle('dark-mode');
+        ctacard.classList.toggle('dark-mode');
+      });
+    });
+    
     $('.card').on('click', function () {
       if ($(this).hasClass('open')) {
         $('.card').removeClass('open');
@@ -156,3 +169,6 @@
 </body>
 
 </html>
+
+
+