Merge pull request #33 from thevijayshankersharma/dark1

Add sun and moon icons to dark mode toggle for improved UI
recodehive · Aug 3, 2024 · a40d1ac · a40d1ac
2 parents d4f3835 + de98de3
commit a40d1ac
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 54 deletions.
diff --git a/dark-mode.js b/dark-mode.js
@@ -1,7 +1,6 @@
 document.addEventListener("DOMContentLoaded", function () {
     const themeToggleCheckbox = document.querySelector("#theme-toggle");
-    const themeLabel = document.querySelector(".toggle-label");
-
+
     // Function to set the theme
     function setTheme(theme) {
       if (theme === "dark") {
@@ -10,16 +9,15 @@ document.addEventListener("DOMContentLoaded", function () {
         themeToggleCheckbox.checked = true;
       } else {
         document.body.classList.remove("dark-mode");
-        themeLabel.textContent = "Light Mode";
         themeToggleCheckbox.checked = false;
       }
       localStorage.setItem("theme", theme);
     }
-  
+
     // Load the theme from localStorage
     const savedTheme = localStorage.getItem("theme") || "light";
     setTheme(savedTheme);
-  
+
     // Add event listener to toggle checkbox
     themeToggleCheckbox.addEventListener("change", () => {
       const newTheme = themeToggleCheckbox.checked ? "dark" : "light";

diff --git a/index.html b/index.html
@@ -4,20 +4,23 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Awesome GitHub Profile READMEs</title>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <div class="toggle-switch-container">
     <div class="toggle-switch">
       <input type="checkbox" id="theme-toggle" />
-      <label for="theme-toggle"></label>
-      <span class="toggle-label">Light Mode</span>
-    </div>
-</div>
+      <label for="theme-toggle">
+        <div class="switch-button">
+          <span class="material-icons sun-icon">wb_sunny</span>
+          <span class="material-icons moon-icon">brightness_2</span>
+        </div>
+      </label>
+    </div>   
     <div class="container">
       <h1 class="main-heading">Awesome GitHub Profile READMEs</h1>
       <div class="tags">
@@ -51,4 +54,4 @@ <h1 class="main-heading">Awesome GitHub Profile READMEs</h1>
     <script src="retriveprofile.js"></script>
     <script src="dark-mode.js"></script>
   </body>
-</html>
+</html>
diff --git a/styles.css b/styles.css
@@ -140,59 +140,86 @@ body {
     color: #f0f0f0;
   }
 
-  /* Toggle Switch Styles */
-  .toggle-switch {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
-    position: absolute;
-
-
-    cursor: pointer;
-  }
-
-  .toggle-switch input[type="checkbox"] {
-    display: none;
-  }
-
+  /* Switch Label */
   .toggle-switch label {
-    display: inline-block;
-    width: 50px;
-    height: 25px;
-    background-color: #ccc;
-    border-radius: 50px;
-    position: relative;
-    transition: background-color 0.3s ease;
-  }
-  .toggle-switch-container{
     position: relative;
-    margin: 40px 0px;
+    top: 7px;
+    left: 7px;
+    width: 55px; /* Adjust width to fit switch button and icons */
+    height: 30px; /* Adjust height if needed */
+    background-color: #ccc;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 5px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.5s ease;
   }
-  .toggle-switch label::after {
-    content: "";
-    width: 23px;
-    height: 23px;
+
+  /* Switch Button */
+  .switch-button {
+    position: absolute;
+    top: 2px;
+    left: 3px;
+    width: 27px;
+    height: 27px;
     background-color: #fff;
     border-radius: 50%;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    transition: transform 0.5s ease, background-color 0.5s ease;
+  }
+
+  /* Icon Styles */
+  .sun-icon,
+  .moon-icon {
+    user-select: none;
+    font-size: 25px;
     position: absolute;
-    top: 1px;
-    left: 1px;
-    transition: transform 0.3s ease;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: opacity 0.5s ease, color 0.5s ease;
+  }
+
+  /* Sun Icon */
+  .sun-icon {
+      color: #f39c12;
+      left: 1px; /* Position from the left edge */
+      opacity: 1; /* Initially visible */
+  }
+
+  /* Moon Icon */
+  .moon-icon {
+      color: #bdc3c7;
+      right: 1px; /* Position from the right edge */
+      opacity: 0; /* Initially hidden */
+  }
+
+  /* Hide the checkbox itself */ 
+  #theme-toggle {
+    opacity: 0;
+    position: absolute;
+    width: 0;
+    height: 0;
   }
 
-  .toggle-switch input[type="checkbox"]:checked + label {
-    background-color: #333;
+
+  /* Checkbox Checked State */
+  #theme-toggle:checked + label {
+      background-color: #555;
   }
-  
-  .toggle-switch input[type="checkbox"]:checked + label::after {
-    transform: translateX(25px);
+
+  #theme-toggle:checked + label .sun-icon {
+      opacity: 0; /* Hide sun icon when checked */
   }
-
-  .toggle-label {
-    margin-left: 10px;
-    font-size: 16px;
-    color: #333;
+
+  #theme-toggle:checked + label .moon-icon {
+      opacity: 1; /* Show moon icon when checked */
+  }
+
+  #theme-toggle:checked + label .switch-button {
+      transform: translateX(30px); /* Adjust to fit switch width */
+      background-color: black;
   }
 
   body.dark-mode .toggle-label {