@jill64/svelte-dark-theme

☯ Dark Theme Manager for SvelteKit

Demo

Example

``svelte



`

flip

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 |

`svelte


flip theme
`

SSR (Optional)

When using SSR, you can reduce flushing on load by binding classes to html with hooks.

`js
// 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.

`js
// 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)
})
``

License

MIT