API Reference
theme
A store for tracking the current theme.
A readable store that contains the current theme, not to be confused with mode
, which contains the current mode ('light'
, 'dark'
or 'system'
). The theme can be any arbitrary string value set by the developer, and can be used in conjunction with mode
to create a custom theme switcher, similar to Daisy UI's.
Usage
<script lang="ts">
import { setTheme, theme } from "mode-watcher";
function cycleTheme() {
if ($theme === "dracula") {
setTheme("retro");
} else {
setTheme("dracula");
}
}
</script>
<button on:click={cycleTheme}>{$theme}</button>