HDS comes with in-built dark mode support. This is enabled by the <Base> component (See Usage for more details).
When the dark mode is enabled, the :root/<html> element will have a dark class. You can use this to add custom styles for dark mode.
:global(:root.dark) .my-element {
/* Your styles here */
}The dark mode status is stored in a Svelte store named dark. You can use it in your Svelte components to add conditional dark mode support, or to subscribe to dark mode changes.
<script>
import { dark } from "@hyvor/design/stores";
</script>
{#if $dark}
<p>Dark mode enabled</p>
{/if}Use the DarkToggle component to add a toggle button for dark mode.
<DarkToggle />You may alternatively update the dark store manually.