Skip to content

jill64/svelte-dark-theme

Repository files navigation

@jill64/svelte-dark-theme

npm-version npm-license npm-download-month npm-min-size ci.yml website

☯ Dark Theme Manager for SvelteKit

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