Dark Mode

HDS comes with in-built dark mode support. This is enabled by the <Base> component (See Usage for more details).

CSS

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 */
}

Svelte

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}

Toggle Dark Mode

Use the DarkToggle component to add a toggle button for dark mode.

<DarkToggle />

You may alternatively update the dark store manually.

Table of Contents