Lightswitch

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

javascript 
import { LightSwitch } from '@brainandbones/skeleton';

Examples

Usage

html 
<LightSwitch />

Configure Tailwind

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

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">

Accessing Preferred and Current State

To check either the user's operating system preferred color scheme or the current lightswitch value, use the following Svelte store values. Note this may not be accureate if the LightSwitch component is not yet initialized.

ts 
import { storePrefersDarkScheme, storeLightSwitch } from '@brainandbones/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.

Accessibility

This component is treated as a Switch. See the ARIA Guidelines.

Keyboard Interactions

Keys Description
Space or EnterWhen focus is on the switch, changes the state of the switch.