# Light Switch Learn how to create a Light Switch toggle. Use [Dark Mode](/docs/guides/mode) to make use of either a base or `dark:` variant for your utility class styles. By default, Tailwind uses the `prefers-color-scheme` media query to determine and match the user's operating system settings. However, if you wish to provide your users manual control, you'll need to adjust the Dark Mode strategy for Tailwind, as well as provide the toggle interface (aka a light switch). This guide will show you how to fulfill both requirements. ## Adjust the Dark Mode Strategy Open your global stylesheet and set the following variant: ```css @custom-variant dark (&:where([data-mode="dark"], [data-mode="dark"] *)); ``` Then set the following data attribute on your application's `` element for light mode: ```html ``` Or for dark mode: ```html ``` ## Create the Component We'll create a implementation of the Switch component that can toggle the mode on demand. ```html // const [checked, setChecked] = useState(false); // useEffect(() => { // const mode = localStorage.getItem('mode') || 'light'; // setChecked(mode === 'dark'); // }, []); // const onCheckedChange = (event: { checked: boolean }) => { // const mode = event.checked ? 'dark' : 'light'; // document.documentElement.setAttribute('data-mode', mode); // localStorage.setItem('mode', mode); // setChecked(event.checked); // }; // return ( // <> //