@jill64/svelte-dark-theme

☯ Dark Theme Manager for SvelteKit

Demo

Example

<script>
  import { ThemeManager, setting, theme } from '@jill64/svelte-dark-theme'

  const setToDark = () => {
    setting.set('dark')
  }

  const setToLight = () => {
    setting.set('light')
  }

  const setToDeviceSync = () => {
    setting.set('sync')
  }
</script>

<!-- Place it in root -->
<ThemeManager />

<!-- Theme Store (true | false) -->
<div>is dark: {theme.isDark}</div>
<div>is light: {theme.isLight}</div>
<div>value: {theme.value}</div>

<!-- Theme Store ('dark' | 'light' | 'sync') -->
<div>Setting: {setting.see}</div>

<style>
  :global(body.light) {
    /* light mode styling */
  }
  :global(body.dark) {
    /* dark mode styling */
  }
</style>

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

<script>
  import { flip } from '@jill64/svelte-dark-theme'
</script>

<button onclick={flip.theme}> flip theme </button>

SSR (Optional)

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)
})

License

MIT