Dark Mode - Skeleton

Skeleton
  1. guides
  2. ›
  3. mode

Dark Mode

Learn how to use Tailwind's dark mode feature for your Skeleton project.

Skeleton makes use of Tailwind’s Dark Mode out of the box. This allows the mode to be toggle manually by end users, automatically via operating system settings, or through a combination of both.

Fundamentals

Tailwind offers two strategies, enabled within your project’s Tailwind configuration.

Selector Strategy

darkMode: 'selector'

See Tailwind’s recommendations for toggling the selector. This is accomplished by adding or removing a .dark class to your document’s <html> element to determine the mode.

Media Strategy

darkMode: 'media'

Uses CSS’s prefers-color-scheme to set the mode based on operating system settings. In some browser and devices this may require you to refresh the browser page to reflect the changes.

Styling Elements

When styling elements with Tailwind, the base color represents light mode, while the dark: modifier overrides this value for dark mode. Note that all Skeleton components implement this technique to handle either the display for either mode.

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

Using Color Parings

Skeleton provides utility classes called Color Pairings. These combine both base and dark mode classes into a singlular class, enabling an opinionated way to balance Skeleton theme colors for either mode.

Lightswitch Alternatives

In legacy versions of Skeleton we offered a <Lightswitch> component for toggling dark mode using the selector strategy. Unfortunately this is no longer possible given the sheer number of combinations of use cases:

  • Supporting the selector, media, or a hybrid strategy.
  • Supporting the unique APIs of each tech stacks and/or meta-framework.
  • Handling state and persistence; local vs remote storage (e.g. account-based storage)

Given this, we recommend the following alternatives:

  1. Forego user-based selection in favor of only the media strategy, to adhere to the user’s OS settings.
  2. Generate your own component based on our barebones Astro component.
  3. Use Tailwind’s recommendations and APIs provided to generate a component that meets all your needs.

In the future we hope to revisit this with more specific examples and references.