☯ Dark Theme Manager for SvelteKit
<script>
import { ThemeManager, setting, theme } from '@jill64/svelte-dark-theme'
const setToDark = () => {
$setting = 'dark'
}
const setToLight = () => {
$setting = 'light'
}
const setToDeviceSync = () => {
$setting = 'sync'
}
</script>
<!-- Place it in root -->
<ThemeManager />
<!-- Theme Store ('dark' | 'light') -->
<div>Theme: {$theme}</div>
<!-- Theme Store ('dark' | 'light' | 'sync') -->
<div>Setting: {$setting}</div>
<style>
:global(body.light) {
/* light mode styling */
}
:global(body.dark) {
/* dark mode styling */
}
</style>This function provides the smart theme switching found on some sites.
Each call to the function switches the setting according to the following rules
| before setting | device theme | after setting | after theme |
|---|---|---|---|
light |
light |
dark |
dark |
light |
dark |
sync |
dark |
dark |
light |
sync |
light |
dark |
dark |
light |
light |
sync |
light |
dark |
dark |
sync |
dark |
light |
light |
<script>
import { flip } from '@jill64/svelte-dark-theme'
</script>
<button on:click={$filp}> flip theme </button>When using SSR, you can reduce flushing on load by binding classes to html with hooks.
// hooks.server.js
import { onRender } from '@jill64/svelte-dark-theme'
export const handle = onRender({
// Optional Configs
// {
// cookieKey: string (default: 'svelte-dark-theme')
// }
})Use sequence when combining with other processing.
// hooks.server.js
import { onRender } from '@jill64/svelte-dark-theme'
import { sequence } from '@sveltejs/kit/hooks'
export const handle = sequence(onRender(), async ({ event, resolve }) => {
// ...
return resolve(event)
})