Lightswitch

Utility

Allows users to toggle between light and dark themes using Tailwind's dark mode feature.

Examples

Getting Started

See Tailwind's official dark mode documentation for full instructions. Ensure you've added darkMode: 'class' to your Tailwind config.

html
<LightSwitch />

How It Works

By default this will match the prefers-color-scheme setting in your device's operating system settings. However, when toggled, the following will occur.

  • If dark mode is enabled, a dark class will be applied to your HTML page element.
  • All instances of the Light Switch share state and will update accordingly.
  • A value of mode: 'light | dark' will persist in window.localStorage.
html
<!-- Light Mode -->
<html>
html
<!-- Dark Mode -->
<html class="dark">

Utility Stores

To check either the user's operating system preferred color scheme or the current lightswitch value, use the following Svelte store values.

typescript
import { storePrefersDarkScheme, storeLightSwitch } from '@skeletonlabs/skeleton';
  • storePrefersDarkScheme - The operating system preference. Value will be true for dark, false for light.
  • storeLightSwitch - true for dark, false for light. If undefined, use the operating system preference.

Note this may not be accurate if the LightSwitch component has not yet been initialized.