2.3.70 • Published 2 days ago

@jill64/svelte-dark-theme v2.3.70

Weekly downloads
-
License
MIT
Repository
github
Last release
2 days ago

@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 settingdevice themeafter settingafter theme
lightlightdarkdark
lightdarksyncdark
darklightsynclight
darkdarklightlight
synclightdarkdark
syncdarklightlight
<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

darkdark-modessrsveltesveltekittheme
@jill64/svelte-device-theme@jill64/svelte-html@jill64/svelte-storagesvelte-baked-cookiesvelte-feather-iconstypescanner
@everything-registry/sub-chunk-488@jill64/npm-demo-layout@jill64/svelte-suite
2.3.70

2 days ago

2.3.69

8 days ago

2.3.68

9 days ago

2.3.67

9 days ago

2.3.66

16 days ago

2.3.65

18 days ago

2.3.64

19 days ago

2.3.63

20 days ago

2.3.62

20 days ago

2.3.59

29 days ago

2.3.60

29 days ago

2.3.61

29 days ago

2.3.57

1 month ago

2.3.58

30 days ago

2.3.56

1 month ago

2.3.55

1 month ago

2.3.54

1 month ago

2.3.53

1 month ago

2.3.52

1 month ago

2.3.51

1 month ago

2.3.49

1 month ago

2.3.50

1 month ago

2.3.48

2 months ago

2.3.47

2 months ago

2.3.46

2 months ago

2.3.45

2 months ago

2.3.44

2 months ago

2.3.43

2 months ago

2.3.42

2 months ago

2.3.41

2 months ago

2.3.40

2 months ago

2.3.39

2 months ago

2.3.38

2 months ago

2.3.37

2 months ago

2.3.35

3 months ago

2.3.34

3 months ago

2.3.36

3 months ago

2.3.33

3 months ago

2.3.31

3 months ago

2.3.32

3 months ago

2.3.30

3 months ago

2.3.28

3 months ago

2.3.29

3 months ago

2.3.27

3 months ago

2.3.26

3 months ago

2.3.24

3 months ago

2.3.25

3 months ago

2.3.23

3 months ago

2.3.20

4 months ago

2.3.22

4 months ago

2.3.21

4 months ago

2.3.19

4 months ago

2.3.18

4 months ago

2.3.17

4 months ago

2.3.16

4 months ago

2.3.15

4 months ago

2.3.14

4 months ago

2.3.13

4 months ago

2.3.12

4 months ago

2.3.9

5 months ago

2.3.11

5 months ago

2.3.10

5 months ago

2.3.8

5 months ago

2.3.7

5 months ago

2.3.4

5 months ago

2.3.3

5 months ago

2.3.6

5 months ago

2.3.5

5 months ago

2.3.2

5 months ago

2.3.0

5 months ago

2.3.1

5 months ago

2.2.15

5 months ago

2.2.14

5 months ago

2.2.13

5 months ago

2.2.12

5 months ago

2.2.11

5 months ago

2.2.10

5 months ago

2.2.9

5 months ago

2.2.8

5 months ago

2.2.5

5 months ago

2.2.7

5 months ago

2.2.6

5 months ago

2.2.4

5 months ago

2.2.3

5 months ago

2.2.2

6 months ago

2.2.1

6 months ago

2.2.0

6 months ago

2.1.1

6 months ago

2.1.0

6 months ago

2.0.0

6 months ago

1.3.2

6 months ago

1.3.1

6 months ago

1.3.0

6 months ago

1.2.2

6 months ago

1.2.1

6 months ago

1.2.0

6 months ago

1.1.2

6 months ago

1.1.1

7 months ago

1.1.0

7 months ago

1.0.46

7 months ago

1.0.45

7 months ago

1.0.44

7 months ago

1.0.43

7 months ago

1.0.42

7 months ago

1.0.41

7 months ago

1.0.40

7 months ago

1.0.39

7 months ago

1.0.38

7 months ago

1.0.37

7 months ago

1.0.36

7 months ago

1.0.35

7 months ago

1.0.34

7 months ago

1.0.33

7 months ago

1.0.32

7 months ago

1.0.31

7 months ago

1.0.30

7 months ago

1.0.29

7 months ago

1.0.28

7 months ago

1.0.27

7 months ago

1.0.26

7 months ago

1.0.25

7 months ago

1.0.24

7 months ago

1.0.23

7 months ago

1.0.22

7 months ago

1.0.21

7 months ago

1.0.20

7 months ago

1.0.19

7 months ago

1.0.18

7 months ago

1.0.17

7 months ago

1.0.16

7 months ago

1.0.15

7 months ago

1.0.14

7 months ago

1.0.13

7 months ago

1.0.12

7 months ago

1.0.11

7 months ago

1.0.10

7 months ago

1.0.9

7 months ago

1.0.7

7 months ago

1.0.6

7 months ago

1.0.5

7 months ago

1.0.4

7 months ago

1.0.3

7 months ago

1.0.2

7 months ago

1.0.1

8 months ago

0.1.0

8 months ago