NOTE: Introduced feature in
v0.2.3
.
prefersscheme
is a readonly Svelte Store, which returns true
whenever matchMedia(SCHEME)
is validated.
NOTE: Change your Operating System's color settings to see changes.
<script>
import {
Code,
Heading,
Text,
prefersscheme,
} from "@kahi-ui/framework";
const darkscheme_store = prefersscheme("dark");
const lightscheme_store = prefersscheme("light");
</script>
<Heading>User Color Scheme Preferences</Heading>
<Text>
Dark Scheme Preference: <Code
>{$darkscheme_store}</Code
>
</Text>
<Text>
Light Scheme Preference: <Code
>{$lightscheme_store}</Code
>
</Text>
Imports
import {
prefersscheme,
prefersdark,
preferslight,
} from "@kahi-ui/framework";
Built-in Shortcuts
The prefersscheme
Store also comes with two readonly preconfigured shortcut Stores, prefersdark
and preferslight
.
<script>
import {
Code,
Heading,
Text,
prefersdark,
preferslight,
} from "@kahi-ui/framework";
const darkscheme_store = prefersdark();
const lightscheme_store = preferslight();
</script>
<Heading>User Color Scheme Preferences</Heading>
<Text>
Dark Scheme Preference: <Code
>{$darkscheme_store}</Code
>
</Text>
<Text>
Light Scheme Preference: <Code
>{$lightscheme_store}</Code
>
</Text>
Compatibility
The Store is dependent on Window.matchMedia
. So if you're rendering on the server, it'll always return false
.