Added dark mode to the website (#25)

Rakesh9100 · Jan 2, 2025 · 599ba00 · 599ba00
1 parent e89ecc0
commit 599ba00
Show file tree

Hide file tree

Showing 9 changed files with 169 additions and 0 deletions.
diff --git a/assets/about/about.css b/assets/about/about.css
@@ -12,6 +12,26 @@ body {
     height: 100%;
 }
 
+/* Dark mode Css*/
+
+body.dark-mode .about-section {
+    background-color: #1e1e1e;
+    color: #f4f4f4;
+}
+
+body.dark-mode .about-image {
+    filter: brightness(80%);
+}
+
+body.dark-mode .feature-item {
+    background-color: #282828;
+    color: #f4f4f4;
+}
+
+body.dark-mode .about-content {
+    background-color: rgba(40, 44, 52, 1);
+}
+
 .about-section {
     padding: 6rem 0 4rem;
     background: linear-gradient(135deg, #4a90e2, #e74c3c);

diff --git a/assets/about/about.html b/assets/about/about.html
@@ -45,6 +45,11 @@
                         <button class="theme-btn" data-color="purple" aria-label="Purple theme"></button>
                     </div>
                 </div>
+                <div class="dark-mode-switcher">
+                    <button id="dark-mode-toggle" aria-label="Toggle dark mode">
+                        <i class="fas fa-moon"></i>
+                    </button>
+                </div>
             </div>
         </div>
     </nav>

diff --git a/assets/contact/contact.css b/assets/contact/contact.css
@@ -1,3 +1,26 @@
+/* Dark mode Css */
+
+body.dark-mode .contact-section {
+    background-color: #1e1e1e;
+    color: #f4f4f4;
+}
+
+body.dark-mode .contact-form {
+    background-color: #282828;
+    color: #f4f4f4;
+}
+
+body.dark-mode .contact-form input,
+body.dark-mode .contact-form textarea {
+    background-color: #333;
+    color: #f4f4f4;
+}
+
+body.dark-mode .submit-button {
+    background-color: #444;
+    color: #f4f4f4;
+}
+
 .contact-section {
     padding: 80px 0;
     background-color: #f8f9fa;

diff --git a/assets/contact/contact.html b/assets/contact/contact.html
@@ -45,6 +45,11 @@
                         <button class="theme-btn" data-color="purple" aria-label="Purple theme"></button>
                     </div>
                 </div>
+                <div class="dark-mode-switcher">
+                    <button id="dark-mode-toggle" aria-label="Toggle dark mode">
+                        <i class="fas fa-moon"></i>
+                    </button>
+                </div>
             </div>
         </div>
     </nav>

diff --git a/assets/pastevents/pastevents.css b/assets/pastevents/pastevents.css
@@ -11,6 +11,32 @@ body {
     color: var(--text-color);
 }
 
+/* Dark mode Css */
+
+body.dark-mode .past-events-section {
+    background-color: #1e1e1e;
+    color: #f4f4f4;
+}
+
+body.dark-mode .event-grid {
+    background-color: #282828;
+    color: #f4f4f4;
+}
+
+body.dark-mode .event-card {
+    background-color: #333;
+    color: #f4f4f4;
+}
+
+body.dark-mode .past-event-card {
+    background-color: #333;
+}
+
+body.dark-mode .past-event-date,
+.past-event-time {
+    color: var(--light-text-color);
+}
+
 .past-events-section {
     padding: 6rem 0;
 }

diff --git a/assets/pastevents/pastevents.html b/assets/pastevents/pastevents.html
@@ -45,6 +45,11 @@
                         <button class="theme-btn" data-color="purple" aria-label="Purple theme"></button>
                     </div>
                 </div>
+                <div class="dark-mode-switcher">
+                    <button id="dark-mode-toggle" aria-label="Toggle dark mode">
+                        <i class="fas fa-moon"></i>
+                    </button>
+                </div>
             </div>
         </div>
     </nav>

diff --git a/index.html b/index.html
@@ -50,6 +50,11 @@
                         <button class="theme-btn" data-color="purple" aria-label="Purple theme"></button>
                     </div>
                 </div>
+                <div class="dark-mode-switcher">
+                    <button id="dark-mode-toggle" aria-label="Toggle dark mode">
+                        <i class="fas fa-moon"></i>
+                    </button>
+                </div>
             </div>
         </div>
     </nav>

diff --git a/script.js b/script.js
@@ -228,6 +228,11 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 });
 
+// Dark mode toggle
+document.getElementById('dark-mode-toggle').addEventListener('click', () => {
+    document.body.classList.toggle('dark-mode');
+});
+
 // Mobile menu functionality
 const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
 const navItems = document.querySelector('.nav-items');

diff --git a/style.css b/style.css
@@ -146,6 +146,7 @@ body {
     height: 40px;
     border-radius: 50%;
     display: flex;
+    margin-left: 1rem;
     align-items: center;
     justify-content: center;
     transition: background-color 0.3s ease;
@@ -462,6 +463,80 @@ body {
     padding: 2rem 0;
 }
 
+/* Dark mode Css */
+
+body.dark-mode {
+    --background-color: #181818;
+    --text-color: #f4f4f4;
+    --light-text-color: #bbbbbb;
+}
+
+body.dark-mode .navbar {
+    background-color: rgba(24, 24, 24, 0.9);
+}
+
+body.dark-mode .footer {
+    background-color: #181818;
+}
+
+/* Dark mode toggle button Css */
+
+#dark-mode-toggle {
+    background-color: var(--primary-color);
+    border: none;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.3s ease;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+#dark-mode-toggle:hover {
+    background-color: var(--secondary-color);
+}
+
+#dark-mode-toggle i {
+    color: #fff;
+    font-size: 20px;
+}
+
+.dark-mode .events {
+    background-color: #2a2a2a;
+}
+
+.dark-mode .navbar {
+    background-color: #2a2a2a !important; /* Dark gray background */
+    transition: background-color 0.3s ease;
+}
+
+body.dark-mode .nav-links a {
+    color: #f4f4f4;
+}
+
+body.dark-mode .nav-links a:hover {
+    color: var(--primary-color);
+}
+
+.event-description {
+    font-size: 0.95rem;
+    margin-bottom: 1rem;
+    color: var(--text-color);
+}
+
+body.dark-mode .event-card {
+    background-color: #333;
+    color: #f4f4f4;
+}
+
+body.dark-mode .event-date,
+.event-time {
+    color: var(--light-text-color);
+}
+
 /* Media queries for responsiveness */
 
 @media (max-width: 1024px) {