@jill64/svelte-dark-theme
TypeScript icon, indicating that this package has built-in type declarations

2.3.99 • Public • Published

@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

Package Sidebar

Install

npm i @jill64/svelte-dark-theme

Weekly Downloads

26,695

Version

2.3.99

License

MIT

Unpacked Size

16 kB

Total Files

39

Last publish

Collaborators

  • jill64