Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3

Dark Mode

In Flowbite-Svelte, the `class` strategy is used to support toggling dark mode manually, so you should explicitly configure it in Tailwind CSS: 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: 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:
## Initial theme Use `class="dark"` to set the initial theme to the dark mode. The default mode is `light`. ## Switcher style Use the `btnClass` prop to overwrite the default classes:
Or just use `class` attribute to append classes to the default classes:
## Mode icon Use the `lightIcon` and `darkIcon` slots to change icons: