Lightswitch

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.

// 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.

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

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

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

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

import { setInitialClassState } from '@skeletonlabs/skeleton';

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

Interface Methods

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

import { modeOsPrefers, modeUserPrefers, modeCurrent } from '@skeletonlabs/skeleton';