0.1.1 • Published 2 years ago
svelte-dark-theme v0.1.1
svelte-dark-theme
Dark theme store for Svelte.
- Persistence using localStorage
- System theme detection using matchMedia
- Class binding to document.body
- Sync settings between multiple tabs
- SvelteKit SSR support
Installation
npm i -D svelte-dark-themeUsage
<script>
import { theme } from 'svelte-dark-theme'
</script>
<!-- 'dark' | 'light' -->
<div>current: {$theme.current}</div>
<!-- 'dark' | 'light' | 'sync' -->
<div>setting: {$theme.setting}</div>
<!-- true | false -->
<div>now dark mode: {$theme.isDark}</div>
<div>now light mode: {$theme.isLight}</div>
<button on:click={() => theme.change('dark')}>set dark theme</button>
<button on:click={() => theme.change('light')}>set light theme</button>
<button on:click={() => theme.change('sync')}>set system default</button>
<style>
:global(body) {
/* Fallback while JS disable */
background: rgb(51, 87, 54);
color: rgb(132, 106, 69);
}
:global(body.light) {
background: rgb(255, 255, 255);
color: rgb(0, 0, 0);
}
:global(body.dark) {
background: rgb(0, 0, 0);
color: rgb(255, 255, 255);
}
</style>Use in SSR
This will apply the theme to the pages rendered on the server side.
app.html
<body class="%theme%">
<div>%sveltekit.body%</div>
</body>hooks.server.ts
import { theme } from 'svelte-dark-theme'
import type { Handle } from '@sveltejs/kit'
export const handle: Handle = ({ event, resolve }) => {
return resolve(event, {
transformPageChunk: ({ html }) => theme.apply(html, event)
})
}