Dark mode
The best place to import is in the __layout.svelte.
<script>
import { DarkMode } from "flowbite-svelte";
</script>
<DarkMode />Props
The component has the following props, type, and default values:
let btnClass: string = "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 fixed left-2 top-16 z-50"Set your CSS and add it to the prop.:
<script>
import { DarkMode } from "flowbite-svelte";
let btnClass="Add your class here"
</script>
<DarkMode {btnClass} />Add the following to the body tag:
<!-- src/app.html -->
<body class="bg-white dark:bg-gray-800">
<div>%svelte.body%</div>
</body>How to change Dark mode color
Find the name of the color from hex color code.
Update tailwind.config.cjs:
// ...
theme: {
colors: {
'bigstone': '#173242',
},
extend: {}
},
// ...Update the body class
<!-- src/app.html -->
<body class="bg-white dark:bg-bigstone">
<div>%svelte.body%</div>
</body>Props
The component has the following props, type, and default values. See types page for type information.
| Name | Type | Default |
|---|---|---|
| btnClass | string | 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 fixed left-0 top-8 z-50' |