Darkmode

Setup

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

// src/app.html

<body class="bg-white dark:bg-gray-800">
  <div>%svelte.body%</div>
</body>

Initial theme

Add the following to `app.html`:

<html class="dark" lang="en">

Default

<script>
	import { Darkmode } from 'svelte-5-ui-lib';
</script>

<Darkmode />

Icon

<script>
	import { Darkmode } from 'svelte-5-ui-lib';
	import { ThumbsUpSolid, ThumbsDownSolid } from 'flowbite-svelte-icons';
</script>

<Darkmode class="text-lg">
	{#snippet lightIcon()}
		<ThumbsUpSolid color="red" />
	{/snippet}
	{#snippet darkIcon()}
		<ThumbsDownSolid color="green" />
	{/snippet}
</Darkmode>

Style

<script>
	import { Darkmode } from 'svelte-5-ui-lib';
</script>

<Darkmode class="text-primary-500 dark:text-primary-600 border dark:border-gray-800" />

Component data