Dark Mode

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.

Tailwind multiple strategies for configuring Dark Mode.

Media Strategy

Enable 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-theme=dark], [data-theme=dark] *));

<html data-theme="dark">
  ...
</html>

Using the Dark Variant

Apply a base style, then with Tailwind’s dark: variant.

<!-- Light Mode: White | Dark Mode: Black -->
<div class="bg-white dark:bg-black">...</div>

Color Scheme

Skeleton now 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.

<div class="bg-primary-50-950">Light or Dark</div>

<div class="scheme-light">
  <div class="bg-primary-50-950">Always Light Scheme</div>
</div>

<div class="scheme-dark">
  <div class="bg-primary-50-950">Always Dark Scheme</div>
</div>

Lightswitch

Legacy versions of Skeleton offer a unique <Lightswitch> 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 may provide specific guidance per framework in the future, but for now we advise you generate your own component to meet your project’s specific requirements. Please refer to the Tailwind documentation for additional tips and strategies.