Skeleton does not implement a custom solution for Dark Mode, but rather fully utilizes the mechanics provided by Tailwind. This allows mode to be toggled based on the operating system, or manually controlled via user settings.
Fundamentals
Tailwind provides two Dark Mode strategies, defined in your Tailwind configuration.
darkMode: 'selector'- enables the Selector strategy.darkMode: 'media'- enables the Media strategy.
Selector Strategy
See Tailwind’s recommendations for toggling dark mode. This is accomplished by adding or removing a .dark class to your document’s <html> element to determine the mode. The exact instructions for implementing this may differ based on your app’s meta-framework.
Media Strategy
Uses CSS’s prefers-color-scheme to set the mode based on operating system preference. You may toggle the light or dark mode setting within your operating system system settings. In some browsera nd devices this may require you to refresh the browser page.
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 BackgroundDark Mode: Black Background--><div class="bg-white dark:bg-black">...</div>Using Color Parings
Skeleton provides opinionated utility classes called Color Pairings to assist with balancing theme colors for light and dark mode.