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: