Dark Mode

Via Selector

Allows users to toggle between light and dark mode with an interactive Lightswitch component.

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

module.exports = {
  darkMode: 'selector', // <--
  // ...
}

Then implement the Skeleton Lightswitch component.

Via Media

Skeleton provides a utility method to adjust the mode based on the user's operating system preference.

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

module.exports = {
	darkMode: 'media', // <--
	// ...
}

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

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

Custom Component

If you wish to build a custom Lightswitch component, Skeleton exposes all required utility methods.

Initilize

Import and add the following within 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>

Utilities

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

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