Merge pull request #418 from REHAN-18/new

change the theme toogle button with modern style button
Code-Social · Oct 27, 2024 · cdf2873 · cdf2873
2 parents 6edea11 + 2158ae1
commit cdf2873
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 52 deletions.
diff --git a/darkmode.js b/darkmode.js
@@ -1,53 +1,54 @@
 // Check for saved dark mode preference in localStorage
 let darkmode = localStorage.getItem("darkmode");
 const themeToggleBtn = document.getElementById("theme-toggle");
-const themeIcon = document.getElementById("theme-toggle-icon");
 const body = document.body;
-const footer = document.querySelector("footer"); // Select the footer element
-const footerSpan = footer.querySelector(".website-name"); // Select the span inside the footer
+const footer = document.querySelector("footer");
+const footerSpan = footer.querySelector(".website-name");
 const footerParagraph = footer.querySelector(".footer-about-text");
 
 // Enable Dark Mode
 const enableDarkMode = () => {
-  body.classList.add("dark-mode");
-  body.classList.remove("light-mode"); // Ensure light mode class is removed
-  footer.classList.add("dark-mode-footer"); // Add dark mode class to footer
-  footer.classList.remove("light-mode-footer");
-  footerSpan.classList.add("dark-text");
-  footerSpan.classList.remove("light-text");
-  footerParagraph.classList.add("dark-text");
-  footerParagraph.classList.remove("light-text");
-  localStorage.setItem("darkmode", "active");
-  themeIcon.src = "images/light-mode.png"; // Light mode icon in dark mode
+    body.classList.add("dark-mode");
+    body.classList.remove("light-mode");
+    footer.classList.add("dark-mode-footer");
+    footer.classList.remove("light-mode-footer");
+    footerSpan.classList.add("dark-text");
+    footerSpan.classList.remove("light-text");
+    footerParagraph.classList.add("dark-text");
+    footerParagraph.classList.remove("light-text");
+    localStorage.setItem("darkmode", "active");
+    themeToggleBtn.querySelector(".theme-icon-light").style.opacity = '0';
+    themeToggleBtn.querySelector(".theme-icon-dark").style.opacity = '1';
 };
 
 // Disable Dark Mode (Switch to Light Mode)
 const disableDarkMode = () => {
-  body.classList.remove("dark-mode");
-  body.classList.add("light-mode"); // Ensure light mode class is added
-  footer.classList.remove("dark-mode-footer"); // Remove dark mode class from footer
-  footer.classList.add("light-mode-footer");
-  footerSpan.classList.add("light-text");
-  footerSpan.classList.remove("dark-text");
-  footerParagraph.classList.add("light-text");
-  footerParagraph.classList.remove("dark-text");
-  localStorage.setItem("darkmode", "inactive");
-  themeIcon.src = "images/dark-mode.png"; // Dark mode icon in light mode
+    body.classList.remove("dark-mode");
+    body.classList.add("light-mode");
+    footer.classList.remove("dark-mode-footer");
+    footer.classList.add("light-mode-footer");
+    footerSpan.classList.add("light-text");
+    footerSpan.classList.remove("dark-text");
+    footerParagraph.classList.add("light-text");
+    footerParagraph.classList.remove("dark-text");
+    localStorage.setItem("darkmode", "inactive");
+    themeToggleBtn.querySelector(".theme-icon-light").style.opacity = '1';
+    themeToggleBtn.querySelector(".theme-icon-dark").style.opacity = '0';
 };
 
 // Apply the saved theme on page load
 if (darkmode === "active") {
-  enableDarkMode(); // Start in dark mode if the user prefers it
+    enableDarkMode(); // Start in dark mode if the user prefers it
 } else {
-  disableDarkMode(); // Otherwise, start in light mode
+    disableDarkMode(); // Otherwise, start in light mode
 }
 
 // Toggle dark mode on button click
 themeToggleBtn.addEventListener("click", () => {
-  darkmode = localStorage.getItem("darkmode"); // Get the current state
-  if (darkmode === "active") {
-    disableDarkMode(); // Switch to light mode
-  } else {
-    enableDarkMode(); // Switch to dark mode
-  }
+    darkmode = localStorage.getItem("darkmode"); // Get the current state
+    if (darkmode === "active") {
+        disableDarkMode(); // Switch to light mode
+    } else {
+        enableDarkMode(); // Switch to dark mode
+    }
 });
diff --git a/index.html b/index.html
@@ -393,12 +393,14 @@
                 <a href="maintenance.html">Follow Us</a>
             </li>
             <!-- Dark Mode Toggle -->
-            <li>
-                <button id="theme-toggle" class="theme-toggle-btn">
-                    <img src="images/dark-mode.png" alt="theme-mode" id="theme-toggle-icon">
-                </button>
-                <!-- when light mode is active -> use "dark-mode.png" and when dark mode is active -> use "light-mode.png" -->
-            </li>
+            <button id="theme-toggle" class="theme-toggle-btn">
+                <span class="theme-icon theme-icon-light" style="opacity: 1;">☀️</span>
+                <span class="theme-icon theme-icon-dark" style="opacity: 0;">🌙</span>
+                <span class="theme-slider"></span>
+            </button>
+
+
+
         </ul>
     </nav>
 

diff --git a/styles.css b/styles.css
@@ -28,29 +28,73 @@ body {
 }
 
 /* Dark mode */
-.dark-mode {
-  background-color: #2e2e2e;
-  color: white;
-}
-
+/* Main Toggle Button */
 .theme-toggle-btn {
-  padding: 10px 20px;
-  margin: 20px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 80px;
+  height: 40px;
+  background: linear-gradient(135deg, #f6d365, #fda085);
+  border-radius: 40px;
+  border: none;
   cursor: pointer;
+  transition: background 0.4s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
 }
-.theme-toggle-btn img {
-  transition: opacity 0.3s ease, transform 0.3s ease;
+
+/* Toggle Slider (Circle) */
+.theme-slider {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 32px;
+  height: 32px;
+  background-color: white;
+  border-radius: 50%;
+  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1.5);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-.theme-toggle-btn img:hover {
-  transform: scale(1.1);
-  opacity: 0.8;
+/* Sun and Moon Icons */
+.theme-icon {
+  position: absolute;
+  font-size: 18px;
+  transition: opacity 0.3s ease;
 }
 
-#theme-toggle-icon {
-  width: 40px;
-  height: 40px;
+.theme-icon-light {
+  left: 10px;
+  color: #ffd700;
+  opacity: 1;
+}
+
+.theme-icon-dark {
+  right: 10px;
+  color: #4a4a4a;
+  opacity: 0;
+}
+
+/* Dark Mode Active */
+body.dark-mode .theme-toggle-btn {
+  background: linear-gradient(135deg, #2c3e50, #4a4a4a);
+}
+
+body.dark-mode .theme-slider {
+  transform: translateX(40px);
 }
+
+body.dark-mode .theme-icon-light {
+  opacity: 0;
+}
+
+body.dark-mode .theme-icon-dark {
+  opacity: 1;
+}
+
+
+
 /* Dark Mode Styles   */
 /* body.dark-mode {
     background-color: #121212;