Utility

Lightswitch

Components and utilities for toggling Tailwind's dark mode.

typescript
import { LightSwitch } from '@skeletonlabs/skeleton';
Source Page Source WAI-ARIA

Skeleton provides two strategies for toggling light and dark mode. Choose your preference.

Strategy: Class

We recommend this approach for most users. Please note the Lightswitch copmonent must be present on page load in order to operate. For best results, insert this in a fixed element that appears on every page.

typescript
// tailwind.config.[ts|js|cjs]

module.exports = {
  darkMode: 'class', // <-- ADD THIS
  // ...
}

Strategy: OS Preference

Skeleton provides a utility method to adjust the mode based on operating system preference. This replaces both the class strategy and Lightswitch component.

When adjusting your operating system setting, macOS is the only OS that does not require a browser refresh.

typescript
// tailwind.config.[ts|js|cjs]

module.exports = {
	// darkMode // <-- REMOVE THIS
	// ...
}

First, import the following in /src/routes/+layout.svelte.

typescript
import { autoModeWatcher } from '@skeletonlabs/skeleton';

In the same file, add the following at the top of the HTML markup.

html
<svelte:head>{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}</svelte:head>

Build Your Own Component

Skeleton exposes all utility methods used within the Lightswitch component. Use these to construct your own!

Set Initial Classes

Import and add the following to your component. This will set the .dark class on the root HTML element in a highly performant manner. Please note that the CLI installer inserts class="dark" statically in the html element of app.html and you should remove it when going this route.

typescript
import { setInitialClassState } from '@skeletonlabs/skeleton';
html
<svelte:head>{@html `<script>(${setInitialClassState.toString()})();</script>`}</svelte:head>

Interface Methods

Light mode is represented by true, while dark mode is represented by false.

typescript
import { modeOsPrefers, modeUserPrefers, modeCurrent } from '@skeletonlabs/skeleton';
Store Value Description
$modeOsPrefers true | false The current operating system setting preference.
$modeUserPrefers true | false | undefined The current user's selected preference.
$modeCurrent true | false The current currently active mode setting.