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="border text-primary-500 dark:border-gray-800 dark:text-primary-600" />

Component data