import { useColorMode } from "@dreamy-ui/react";

export function UseColorMode() {
	const { colorMode, setColorMode, toggleColorMode } = useColorMode();
 
	return (
		<Flex col gap={2}>
			<Text>Current color mode: {colorMode}</Text>
			<Flex wrapped gap={2}>
				<Button onClick={() => setColorMode("light")}>Light</Button>
				<Button onClick={() => setColorMode("dark")}>Dark</Button>
				<Button onClick={toggleColorMode}>Toggle</Button>
			</Flex>
		</Flex>
	);
}