# @jill64/svelte-dark-theme
☯ Dark Theme Manager for SvelteKit
## [Demo](https://svelte-dark-theme.jill64.dev)
## Example
```svelte
is dark: {theme.isDark}
is light: {theme.isLight}
value: {theme.value}
Setting: {setting.see}
```
## 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
```
## 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](LICENSE)