--- layout: componentLayout title: Svelte Dark Mode - Flowbite breadcrumb_title: Dark mode dir: Components description: Learn how to configure and build a dark mode switcher for Flowbite using Tailwind CSS and start developing with the components from the library --- Home {dir} {breadcrumb_title} {title} {description}

In Flowbite-Svelte, the `class` strategy is used to support toggling dark mode manually, so you should explictly configure it in Talwind CSS:

```js // tailwind.config.cjs const config = { darkMode: 'class' // ... }; ```

Then you can use `dark:` prefixed classes to configure the styles applied when dark mode is enabled. For example, if you want to change the body background color from `bg-white` when dark mode is disabled to `bg-gray-800` when dark mode is enabled:

```html
%svelte.body%
```

Finally, use the dark mode component to display a switcher (that is a button) for users to toggle dark mode manually. The best place to put this component is in the root layout:

```svelte example ```

Use the `btnClass` prop to overwrite the default classes:

```svelte example ```

Or just use `class` attribute to append classes to the default classes:

```svelte example ```

Use the `lightIcon` and `darkIcon` slots to change icons:

```svelte example ```

The component has the following props, type, and default values. See types page for type information.

Flowbite Dark mode