# Light Switch Learn how to create a Light Switch toggle. Use [Dark Mode](/docs/\[framework]/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. ```svelte ``` ## Import the Component We'll then add the component to our app. Make sure to set the correct path. ```svelte ``` ## User Interface While we utilize a primitive Switch for the minimal example above, feel free to adjust the logic and interface to your preference. We provide a more detailed [Switch example](/docs/\[framework]/framework-components/switch#icons).