Lightswitch

Utility

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

@skeletonlabs/skeleton
Source Code
View Page Source
Accessibility Reference

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.