dark theme IMGIITRoorkee#11

Sanat-Jha · Jan 10, 2025 · 2beb71a · 2beb71a
1 parent 5d320ca
commit 2beb71a
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -23,14 +23,31 @@
     <img src="./resources/images/logo1.svg" id="logo1">
     <i class="fa fa-2x fa-bars" id="bars" onclick="show_hide()"> </i>
     <nav class="nav">
-
         <div class="main-nav">
             <ul>
                 <li><a href="./resources/html/aboutus.html">About us</a></li>
                 <li><a href="./resources/html/contactus.html">Contact us</a></li>
-                <li class="theme-switch-btn">Dark Theme</li>
                 <li id="li3"><a id="try" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Try us out</a></li>
-
+                <li class="theme-switch-wrapper">
+                    <div class="theme-switch-btn">
+                        <svg class="sun-icon" viewBox="0 0 24 24" width="24" height="24">
+                            <circle cx="12" cy="12" r="5" class="sun-circle" />
+                            <g class="sun-rays">
+                                <line x1="12" y1="3" x2="12" y2="5"/>
+                                <line x1="12" y1="19" x2="12" y2="21"/>
+                                <line x1="5" y1="12" x2="3" y2="12"/>
+                                <line x1="21" y1="12" x2="19" y2="12"/>
+                                <line x1="6.36" y1="6.36" x2="4.93" y2="4.93"/>
+                                <line x1="17.64" y1="17.64" x2="19.07" y2="19.07"/>
+                                <line x1="6.36" y1="17.64" x2="4.93" y2="19.07"/>
+                                <line x1="17.64" y1="6.36" x2="19.07" y2="4.93"/>
+                            </g>
+                        </svg>
+                        <svg class="moon-icon" viewBox="0 0 24 24" width="24" height="24">
+                            <path class="moon-path" d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"/>
+                        </svg>
+                    </div>
+                </li>
             </ul>
         </div>
     </nav>

diff --git a/resources/css/landingpage-dark.css b/resources/css/landingpage-dark.css
@@ -23,7 +23,7 @@ body {
 }
 
 #header-background {
-    background: rgba(0, 168, 106, 0.227);
+    background: rgba(0, 0, 0, 0.471);
     backdrop-filter: blur(32px);
     z-index: 0;
 }

diff --git a/resources/css/landingpage.css b/resources/css/landingpage.css
@@ -165,8 +165,80 @@ nav {
     color: #1F2420;
     text-decoration: none;
 }
-.theme-switch-btn{
+.theme-switch-wrapper {
     cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+}
+
+.theme-switch-btn {
+    width: 24px;
+    height: 24px;  /* Added explicit height */
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.sun-icon, .moon-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(0deg);
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    fill: none;
+    transition: transform 0.5s ease, opacity 0.5s ease;
+    width: 24px;
+    height: 24px;
+}
+
+.sun-circle {
+    fill: currentColor;
+}
+
+.sun-rays line {
+    stroke: currentColor;
+}
+
+.moon-path {
+    fill: currentColor;
+}
+
+/* Dark theme styles */
+body.dark-theme .sun-icon {
+    opacity: 0;
+    transform: translate(-50%, -50%) rotate(90deg);
+}
+
+body.dark-theme .moon-icon {
+    opacity: 1;
+    transform: translate(-50%, -50%) rotate(0deg);
+}
+
+/* Light theme styles */
+.sun-icon {
+    opacity: 1;
+    transform: translate(-50%, -50%) rotate(0deg);
+}
+
+.moon-icon {
+    opacity: 0;
+    transform: translate(-50%, -50%) rotate(-90deg);
+}
+
+/* Animation for rays */
+@keyframes raysPulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+    100% { transform: scale(1); }
+}
+
+.sun-icon .sun-rays {
+    animation: raysPulse 2s infinite;
+    transform-origin: center;
 }
 
 #try {

diff --git a/resources/javascript/themeSwitchBtn.js b/resources/javascript/themeSwitchBtn.js
@@ -1,11 +1,13 @@
-const switchThemeBtn = document.querySelector('.theme-switch-btn');
+const themeSwitch = document.querySelector('.theme-switch-btn');
 const header = document.querySelector('head');
-switchThemeBtn.addEventListener('click', () => {
-    if (switchThemeBtn.innerText === 'Light Theme') {
-        switchThemeBtn.innerText = 'Dark Theme';
+const body = document.body;
+
+themeSwitch.addEventListener('click', () => {
+    if (body.classList.contains('dark-theme')) {
+        body.classList.remove('dark-theme');
         header.removeChild(document.querySelector('.dark-theme-css'));
     } else {
-        switchThemeBtn.innerText = 'Light Theme';
+        body.classList.add('dark-theme');
         const darkThemeCSS = document.createElement('link');
         darkThemeCSS.rel = 'stylesheet';
         darkThemeCSS.href = './resources/css/landingpage-dark.css';