From 7c91fdc20de9b355556fe7435ed6aaf4d75b5c15 Mon Sep 17 00:00:00 2001
From: VijaySamant4368 <vijaysamant4368@gmail.com>
Date: Sun, 4 Aug 2024 20:07:41 +0530
Subject: [PATCH] Changed button

---
 Css-files/mode-toggler.css | 89 ++++++++++++++++++++++++++++++++++++++
 Html-files/navbar.js       | 13 +-----
 Images/moon.svg            | 17 ++++++++
 Images/sun.svg             | 23 ++++++++++
 index.html                 | 19 +++++---
 5 files changed, 144 insertions(+), 17 deletions(-)
 create mode 100644 Css-files/mode-toggler.css
 create mode 100644 Images/moon.svg
 create mode 100644 Images/sun.svg

diff --git a/Css-files/mode-toggler.css b/Css-files/mode-toggler.css
new file mode 100644
index 00000000..24ba661f
--- /dev/null
+++ b/Css-files/mode-toggler.css
@@ -0,0 +1,89 @@
+.toggle-container {
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  right: -4px;
+  top: 15px;
+  /* position: fixed; */
+  top: 40px;
+  right: 20%;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  width: 40px;
+  height: 20px;
+  margin-top: 10px;
+}
+
+
+/* Hidden Checkbox */
+.switch-checkbox {
+  display: none;
+}
+
+.theme-switch {
+  position: relative;
+  width: 45px;
+  height: 30px;
+  background-color: #ccc;
+  border-radius: 20px;
+  cursor: pointer;
+  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;
+}
+
+.theme-switch .light-mode-icon,
+.theme-switch .dark-mode-icon {
+  font-size: 19px;
+  position: absolute;
+  cursor: pointer;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: opacity 0.5s ease, color 0.5s ease;
+}
+
+.theme-switch .light-mode-icon {
+  color: #f39c12;
+}
+
+.theme-switch .dark-mode-icon {
+  color: #bdc3c7;
+  opacity: 0;
+}
+
+.toggle-button {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 25px;
+  height: 25px;
+  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;
+}
+
+/* Checkbox Checked State */
+.switch-checkbox:checked + .theme-switch {
+  background-color: #34495e;
+}
+
+.switch-checkbox:checked + .theme-switch .light-mode-icon {
+  opacity: 0;
+}
+
+.switch-checkbox:checked + .theme-switch .dark-mode-icon {
+  opacity: 1;
+}
+
+.switch-checkbox:checked + .theme-switch .toggle-button {
+  transform: translateX(13px);
+  /* background-color: #34495e; */
+}
diff --git a/Html-files/navbar.js b/Html-files/navbar.js
index 745bc203..3d02f678 100644
--- a/Html-files/navbar.js
+++ b/Html-files/navbar.js
@@ -1,17 +1,8 @@
 //Themechange icon toggling behaviour
-let themeToggleIcon = document.getElementById("theme-toggle-icon");
-let themeToggleLogo = document.getElementById("theme-toggle-logo");
-themeToggleIcon.addEventListener("click", function () {
+function toggleTheme() {
   document.body.classList.toggle("dark-theme");
   document.body.classList.toggle(":root")
-  if (document.body.classList.contains("dark-theme")) {
-    themeToggleIcon.src = "../Images/navbar/sun.png";
-    themeToggleLogo.src = "Images/logo/Logo-Dark.png";
-  } else {
-    themeToggleIcon.src = "../Images/navbar/moon.png";
-    themeToggleLogo.src="Images/logo/Logo-Light.png";
-  }
-});
+}
 
 //Services dropdown
 
diff --git a/Images/moon.svg b/Images/moon.svg
new file mode 100644
index 00000000..27b75366
--- /dev/null
+++ b/Images/moon.svg
@@ -0,0 +1,17 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="grey"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    
+>
+    <path
+        d="M21 12.79A9 9 0 1111.21 3a7 7 0 109.79 9.79z"
+        fill="black"
+    />
+</svg>
\ No newline at end of file
diff --git a/Images/sun.svg b/Images/sun.svg
new file mode 100644
index 00000000..8619f787
--- /dev/null
+++ b/Images/sun.svg
@@ -0,0 +1,23 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="orange"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    
+>
+    <circle cx="12" cy="12" r="5"
+    fill="yellow" />
+    <line x1="12" y1="1" x2="12" y2="3" />
+    <line x1="12" y1="21" x2="12" y2="23" />
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+    <line x1="1" y1="12" x2="3" y2="12" />
+    <line x1="21" y1="12" x2="23" y2="12" />
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index b1637f61..66ee29f3 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,7 @@
     <link rel="stylesheet" href="Css-files/scroll-top-button.css">
     <link rel="stylesheet" href="Css-files/navbar.css">
     <link rel="stylesheet" href="Css-files/footer.css">
+    <link rel="stylesheet" href="Css-files/mode-toggler.css">
     <link rel="stylesheet" href="./style.css">
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
     <link rel="stylesheet" href="Css-files/googletranslate.css">
@@ -164,12 +165,18 @@
                 </ul>
             </div>
             <!-- Theme Toggle Icon -->
-            <div class="order-0 ml-auto p-2">
-
-                <img class="nav-link" src="Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">
-
-            </div>
-
+            <span class="slider" style="width: 40px; height: 20px; display: none;"></span> 
+
+            <div id="sun-moon-mode-toggler" class="toggle-container" >
+              <input type="checkbox" id="themeToggle" class="switch-checkbox" onclick="toggleTheme()">
+              <label  id="themeChangeToggle" class="theme-switch" for="themeToggle">
+              <div class="toggle-button">
+                  <span class="light-mode-icon"><img src="images/sun.svg" style = "display: block;"></span>
+                  <span class="dark-mode-icon"><img src="images/moon.svg"style = "display: block;"></span>
+              </div>
+              </label>
+          </div>
+        
             <!-- End Navbar Links -->