# Dark Mode
Learn how to use Tailwind's dark mode feature for your Skeleton project.
{
Skeleton makes use of{' '}
Tailwind's Dark Mode
{' '}
to enable multiple strategies to control the overall app or page mode, as well as{' '}
Color Scheme
{' '}
to selectively toggle light or dark interfaces at any scope.
}
## Dark Mode
Tailwind [multiple strategies](https://tailwindcss.com/docs/dark-mode) for configuring Dark Mode.
### Media Strategy
Enable by default. Uses CSS's [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) and sets the active mode based on operating system settings.
### Selector Strategy
Activates dark mode by adding or removing the `.dark` class to your application's `` element.
```css title="app.css"
@custom-variant dark (&:where(.dark, .dark *));
```
```html title="app.html"
...
```
### Data Attribute Strategy
Uses a data attribute instead of a class to activate dark mode.
```css title="app.css"
@custom-variant dark (&:where([data-mode=dark], [data-mode=dark] *));
```
```html title="app.html"
...
```
### Using the Dark Variant
Apply a base style, then with Tailwind's `dark:` variant.
```html title="app.html"
...
```
***
## Color Scheme
Skeleton now supports Tailwind's [Color Scheme](https://tailwindcss.com/docs/color-scheme) feature, which enables toggling light or dark interfaces at any scope. By default, the scheme matches the current Dark Mode setting. This feature is enabled by [Color Pairings](/docs/design/colors#color-pairings), which implement the native CSS property [light-dark](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark).
```html
Light or Dark
```
***
## Light Switch
Legacy versions of Skeleton offer a unique Light Switch component for controlling the Dark Mode `selector` strategy. Unfortunately this is no longer available due to the number of permutations required per framework and required feature capabilities, including:
* Supporting one or more combinations of Dark Mode strategies.
* Supporting the unique APIs of each meta-framework.
* Handling state and persistence; ex: local vs remote vs account-based storage
We now recommend you generate your own component following [Tailwind's best practices](https://tailwindcss.com/docs/dark-mode). To help you get started, we've provided a Cookbook recipe covering the basics.