colorTheme toggle done.

src/components/Switch.jsx

@@ -1,17 +1,110 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import "../css/Switch.css";
-import { useState } from "react";
 import "animate.css";
+import styled from "styled-components";
+import SunIcon from "../assets/icons/colorModeToggle/sun.svg?react";
+import MoonIcon from "../assets/icons/colorModeToggle/moon.svg?react";
+
+const SwitchBtn = styled.button`
+  background-color: ${(props) =>
+    props.colormode === "dark" ? "#000767" : "#009d28"};
+  border: 1px solid
+    ${(props) => (props.colormode === "dark" ? "#f6f1d5" : "#fff145")};
+  border-radius: 99px;
+  width: 50px;
+  height: 28px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.748);
+  position: relative;
+`;
+
+const SwitchContainer = styled.div`
+  transition: background-color 1s ease;
+  grid-area: 8 / 4 / 10 / 5;
+  background-color: ${(props) =>
+    props.colormode === "dark" ? "#131862" : "#69d0ff"};
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  border: 1px solid
+    ${(props) => (props.colormode === "dark" ? "#1e2be0" : "#9bdfff")};
+  position: relative;
+`;
+
+const StyledSunIcon = styled(SunIcon)`
+  fill: #fff145;
+`;
+
+const StyledMoonIcon = styled(MoonIcon)`
+  fill: #f6f1d5;
+`;
+
+const PlanetsContainer = styled.div`
+  transition: transform 0.5s ease-in-out;
+  transform: ${(props) => `rotate(${props.rotation}deg)`};
+`;
 
 const Switch = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
   const [animation, setAnimation] = useState(initialAnimation);
+  const [colormode, setcolormode] = useState(() => {
+    // Retrieve initial color mode from localStorage or default to "dark"
+    return localStorage.getItem("colormode") || "dark";
+  });
+  const [rotation, setRotation] = useState(0);
+
+  useEffect(() => {
+    // Save the current color mode to localStorage whenever it changes
+    localStorage.setItem("colormode", colormode);
+  }, [colormode]);
+
+  const toggleColorMode = () => {
+    setcolormode((prevMode) => (prevMode === "dark" ? "light" : "dark"));
+    setRotation((prevRotation) => prevRotation + 90);
+  };
+
   return (
-    <div
-      className={`switch container animate__animated ${animation}`}
+    <SwitchContainer
+      colormode={colormode}
+      className={`container animate__animated ${animation}`}
       onAnimationEnd={() => onAnimationEnd(setAnimation)}
     >
-      switch
-    </div>
+      <div className="wrapper">
+        <PlanetsContainer rotation={rotation} className="planets">
+          <StyledSunIcon
+            colormode={colormode}
+            className={`sun1 toggleIcon ${
+              colormode === "dark" ? "setting" : "rising"
+            }`}
+          />
+          <StyledMoonIcon
+            colormode={colormode}
+            className={`moon1 toggleIcon ${
+              colormode === "dark" ? "rising" : "setting"
+            }`}
+          />
+          <StyledSunIcon
+            colormode={colormode}
+            className={`sun2 toggleIcon ${
+              colormode === "dark" ? "setting" : "rising"
+            }`}
+          />
+          <StyledMoonIcon
+            colormode={colormode}
+            className={`moon2 toggleIcon ${
+              colormode === "dark" ? "rising" : "setting"
+            }`}
+          />
+        </PlanetsContainer>
+      </div>
+      <SwitchBtn
+        colormode={colormode}
+        className={`colormodeBtn ${colormode}Btn`}
+        onClick={toggleColorMode}
+      >
+        <div className={`colorToggleThumb ${colormode}`}></div>
+      </SwitchBtn>
+    </SwitchContainer>
   );
 };