Lightswitch

Add the following component. For best results this will be present on page load.

<LightSwitch />

To automatically adjust the mode based on operating system preference, import the following in /src/routes/+layout.svelte.

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

Then add the following in your layout markup.

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

Note that Mac OS will update immediately, while other operating systems may require the browser page to be refreshed manually.

Skeleton uses Tailwind's dark mode feature to control light and dark mode. However, we expose all tools used if you wish to create your own custom Lightswitch or interface with the current state.

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.

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

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

Interface Methods

Skeleton provides several options to interface with the lightswitch settings. Please be aware that light mode is represented by true, while dark mode is represented by false.

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