Skeleton makes use of Tailwind's Dark Mode to enable multiple strategies for controlling the overall app or page mode, as well as Color Scheme to selectively toggle light or dark interfaces at any scope.
Strategies
Tailwind provides multiple strategies for configuring Dark Mode.
Media Strategy
Enabled by default. Uses CSS’s 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 <html> element.
@custom-variant dark (&:where(.dark, .dark *));<html class="dark">
<!-- ... -->
</html>Data Attribute Strategy
Uses a data attribute instead of a class to activate dark mode.
@custom-variant dark (&:where([data-mode=dark], [data-mode=dark] *));<html data-mode="dark">
<!-- ... -->
</html>Dark Variant
Apply any base style, then override for dark mode using Tailwind’s dark: variant.
<!-- Light Mode: White | Dark Mode: Black -->
<div class="bg-white dark:bg-black">...</div>Color Scheme
Skeleton supports Tailwind’s 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 , which implement the native CSS property light-dark .
TIP: try toggling light/dark mode to see the difference
Light Switch
Refer to the following Cookbook recipe to learn how to create an interactive toggle interface element.
Light Switch →