@jill64/svelte-dark-theme

☯ Dark Theme Manager for SvelteKit

Demo

Example

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

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

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

<button on:click={$filp}> 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