Svelte Dark Mode - Flowbite
Learn how to configure and build a dark mode switcher for Flowbite using Tailwind CSS and start developing with the components from the library
In Flowbite-Svelte, the class
strategy is used to support toggling dark mode manually, so you should explicitly configure it in Talwind CSS:
// 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:
- Svelte
<!-- src/app.html -->
<body class="bg-white dark:bg-gray-800">
<div>%svelte.body%</div>
</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
<!-- src/routes/+layout.svelte -->
<script>
import { DarkMode } from 'flowbite-svelte';
</script>
<DarkMode />
Initial theme #
Use class="dark"
to set the initial theme to the dark mode. The default mode is light
.
<html class="dark" lang="en">
Switcher style #
Use the btnClass
prop to overwrite the default classes:
- Svelte
<script>
import { DarkMode } from 'flowbite-svelte';
let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg text-xl p-2';
</script>
<DarkMode {btnClass} />
Or just use class
attribute to append classes to the default classes:
- Svelte
<script>
import { DarkMode } from 'flowbite-svelte';
</script>
<DarkMode class="text-2xl" />
Mode icon #
Use the lightIcon
and darkIcon
slots to change icons:
- Svelte
<script>
import { DarkMode } from 'flowbite-svelte';
import { SunSolid, MoonSolid } from 'flowbite-svelte-icons';
</script>
<DarkMode class="text-lg">
<svelte:fragment slot="lightIcon">
<SunSolid />
</svelte:fragment>
<svelte:fragment slot="darkIcon">
<MoonSolid />
</svelte:fragment>
</DarkMode>
Component data #
The component has the following props, type, and default values. See types page for type information.
DarkMode styling #
- Use the
class
prop to overwritebtnClass
.