MattrixwvReactComponents/lib/component/nav/DarkModeSwitch.tsx

import { useTheme } from "$/providers/theme/ThemeProvider";
import { BsLightbulb, BsLightbulbFill } from "react-icons/bs";


export default function DarkModeSwitch(){
	const { theme, setTheme } = useTheme();


	const updateTheme = () => {
		if(theme === "system"){
			if(window.document.documentElement.classList.contains("dark")){
				setTheme("light");
			}
			else{
				setTheme("dark");
			}
		}
		else{
			setTheme(theme === "dark" ? "light" : "dark");
		}
	}


	return (
		<label
			className="flex flex-row justify-center items-center cursor-pointer"
		>
			<input
				type="checkbox"
				className="peer hidden"
				checked={theme === "dark"}
				onChange={updateTheme}
			/>
			<div
				className="block peer-checked:hidden cursor-pointer"
			>
				<BsLightbulbFill/>
			</div>
			<div
				className="hidden peer-checked:block cursor-pointer"
			>
				<BsLightbulb/>
			</div>
		</label>
	);
}