NOTE: Introduced feature in
v0.2.3
.
WARNING: This feature was renamed from
htmlpalette
tohtmlmode
inv0.6.0
.
USAGE: This feature can be demonstrated by clicking the Theme Toggle button in the top navigation.
htmlmode
is a Svelte Store, which is bound to <html data-mode="XXX">
and updates whenever that attribute is changed. Defaulting to an empty string (""
) if not set.
<script>
import {
Code,
Heading,
Text,
htmlmode,
} from "@kahi-ui/framework";
const mode_store = htmlmode();
</script>
<Heading>Application Theme Mode</Heading>
<Text>
<Code><html data-mode></Code>: <Code>
"{$mode_store}"
</Code>
</Text>
Imports
import {
htmlmode,
htmldark,
htmllight,
} from "@kahi-ui/framework";
Built-In Shortcuts
NOTE: Introduced feature in
v0.6.0
.
The htmlmode
Store also comes with two readonly preconfigured shortcut Stores, htmldark
and htmllight
.
<script>
import {
Code,
Heading,
Text,
htmldark,
htmllight,
} from "@kahi-ui/framework";
const dark_store = htmldark();
const light_store = htmllight();
</script>
<Heading>Application Theme Mode</Heading>
<Text>
<Code><html data-mode="dark"></Code>: <Code>
{$dark_store}
</Code>
</Text>
<Text>
<Code><html data-mode="light"></Code>: <Code>
{$light_store}
</Code>
</Text>
Compatibility
The Store is dependent on MutationObserver
. So if you're rendering on the server, it'll always return an empty string (""
).