1. get started
  2. mode

Dark Mode

Learn how to use Tailwind's dark mode feature.

Fundamentals

Skeleton supports Tailwind’s dark mode feature. This is available using either strategy below.

  • selector - add or remove a .dark class to your document’s <html> element to determine light or dark mode.
  • media - uses the prefers-color-scheme CSS media feature to determine light or dark mode.

Styling Elements

Elements are styled using a combination of a base style (for light mode) as well as a dark: variant (for dark mode).

<div class="bg-white dark:bg-black">...</div>

Frameworks

TODO: Specific instruction will vary per framework. Check back soon for this information.