Skeleton
  1. get started
  2. ›
  3. mode

Dark Mode

Learn how to use Tailwind's dark mode feature.

Fundamentals

Skeleton implements Tailwind’s dark mode mechanics. This is available via the following strategies:

  • selector - add or remove a .dark class to your document’s <html> element to determine the mode.
  • media - uses the CSS’s prefers-color-scheme to set the mode based on operating system preference.

Styling Elements

The base value represents light mode, while the dark: modifier overrides this value for dark mode. Note that all Skeleton components implement this technique out of the box.

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

Toggling Dark Mode

Selector Strategy

See Tailwind’s recommendations for toggling dark mode here. Exact instructions may differ based on your application framework.

Media Strategy

You may toggle the light or dark mode setting within your operating system system settings. This may require a browser refresh.