From 663f2334d1c703bb67bbf3c2fb2a9d995e859304 Mon Sep 17 00:00:00 2001
From: Peter Carl Pardo <peterpardo123@gmail.com>
Date: Tue, 17 Dec 2024 01:24:15 +0800
Subject: [PATCH] feat: added dark mode functionality

---
 .../Components/ThemeSwitch/SunAndMoonIcon.jsx    | 11 +++++++----
 Client/src/Components/ThemeSwitch/index.css      | 13 -------------
 Client/src/Components/ThemeSwitch/index.jsx      | 16 ++++++++++------
 3 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx b/Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx
index 91d54df22..820daeb3f 100644
--- a/Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx
+++ b/Client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx
@@ -1,6 +1,9 @@
+import { useTheme } from "@mui/material";
 import "./index.css";
 
 const SunAndMoonIcon = () => {
+	const theme = useTheme();
+
 	return (
 		<svg
 			className="sun-and-moon"
@@ -18,13 +21,13 @@ const SunAndMoonIcon = () => {
 					y="0"
 					width="100%"
 					height="100%"
-					fill="white"
+					fill="#fff"
 				/>
 				<circle
 					cx="24"
 					cy="10"
 					r="6"
-					fill="black"
+					fill="#000"
 				/>
 			</mask>
 			<circle
@@ -32,12 +35,12 @@ const SunAndMoonIcon = () => {
 				cx="12"
 				cy="12"
 				r="6"
-				fill="currentColor"
+				fill={theme.palette.text.secondary}
 				mask="url(#moon-mask)"
 			/>
 			<g
 				className="sun-beams"
-				stroke="currentColor"
+				stroke={theme.palette.text.secondary}
 			>
 				<line
 					x1="12"
diff --git a/Client/src/Components/ThemeSwitch/index.css b/Client/src/Components/ThemeSwitch/index.css
index 2f3814702..c80a0f2d1 100644
--- a/Client/src/Components/ThemeSwitch/index.css
+++ b/Client/src/Components/ThemeSwitch/index.css
@@ -2,23 +2,10 @@
 	transform-origin: center;
 }
 
-.sun-and-moon > :is(.moon, .sun) {
-	fill: var(--icon-fill);
-}
-
-.theme-toggle:is(:hover, :focus-visible) > .sun-and-moon > :is(.moon, .sun) {
-	fill: var(--icon-fill-hover);
-}
-
 .theme-toggle .sun-and-moon > .sun-beams {
-	stroke: var(--icon-fill);
 	stroke-width: 2px;
 }
 
-.theme-toggle:is(:hover, :focus-visible) .sun-and-moon > .sun-beams {
-	stroke: var(--icon-fill-hover);
-}
-
 [data-theme="dark"] .sun-and-moon > .sun {
 	transform: scale(1.75);
 }
diff --git a/Client/src/Components/ThemeSwitch/index.jsx b/Client/src/Components/ThemeSwitch/index.jsx
index df3c813ab..1e98dfe27 100644
--- a/Client/src/Components/ThemeSwitch/index.jsx
+++ b/Client/src/Components/ThemeSwitch/index.jsx
@@ -2,16 +2,20 @@ import React, { useEffect, useState } from "react";
 import { IconButton } from "@mui/material";
 import SunAndMoonIcon from "./SunAndMoonIcon";
 import "./index.css";
+import { useDispatch, useSelector } from "react-redux";
+import { setMode } from "../../Features/UI/uiSlice";
 
 const ThemeSwitch = () => {
-	// TODO: change to use the MUI theme
-	const [currentTheme, setCurrentTheme] = useState("light");
-	const toggleTheme = () =>
-		setCurrentTheme((prevState) => (prevState === "light" ? "dark" : "light"));
+	const mode = useSelector((state) => state.ui.mode);
+	const dispatch = useDispatch();
+
+	const toggleTheme = () => {
+		dispatch(setMode(mode === "light" ? "dark" : "light"));
+	};
 
 	useEffect(() => {
-		document.body.setAttribute("data-theme", currentTheme);
-	}, [currentTheme]);
+		document.body.setAttribute("data-theme", mode);
+	}, [mode]);
 
 	return (
 		<IconButton