[UI v2] feat: Adds theme switch in settings

ui-v2/src/components/settings/theme-switch.tsx

@@ -1,15 +1,41 @@
 import { Icon } from "@/components/ui/icons";
 import { Switch } from "@/components/ui/switch";
 
-// TODO: Switch for dark mode provider
+import { useLocalStorage } from "@/hooks/use-local-storage";
+import { useEffect } from "react";
+
+const isOSDarkModePreferred = window.matchMedia(
+	"(prefers-color-scheme: dark)",
+).matches;
+
+type ColorScheme = "light" | "dark";
 
 export const ThemeSwitch = () => {
+	const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>(
+		"color-scheme",
+		isOSDarkModePreferred ? "dark" : "light",
+	);
+
+	// Synchornizes document to dark mode theme
+	useEffect(() => {
+		if (colorScheme === "dark") {
+			document.body.classList.add("dark");
+		} else {
+			document.body.classList.remove("dark");
+		}
+	}, [colorScheme]);
+
 	return (
 		<div className="flex flex-col gap-1">
 			<label htmlFor="theme-switch">Theme</label>
 			<div className="flex gap-2 items-center">
 				<Icon id="Sun" className="h-4 w-4" />
-				<Switch />
+				<Switch
+					checked={colorScheme === "dark"}
+					onCheckedChange={(checked) =>
+						setColorScheme(checked ? "dark" : "light")
+					}
+				/>
 				<Icon id="Moon" className="h-7 w-4" />
 			</div>
 		</div>