5.1.7 • Published 6 months ago

@jill64/svelte-dark-theme v5.1.7

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months 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.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

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

darkdark-modelibraryssrsveltesveltekittheme
@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
4.0.1

10 months ago

4.0.0

10 months ago

5.0.0

10 months ago

5.1.7

6 months ago

5.1.6

6 months ago

5.1.5

7 months ago

5.1.4

7 months ago

5.1.3

7 months ago

5.1.2

9 months ago

5.1.1

10 months ago

5.1.0

10 months ago

3.0.1

10 months ago

2.3.107

10 months ago

2.3.106

11 months ago

2.3.108

10 months ago

3.0.0

10 months ago

2.3.103

11 months ago

2.3.102

11 months ago

2.3.105

11 months ago

2.3.104

11 months ago

2.3.101

11 months ago

2.3.100

12 months ago

2.3.97

1 year ago

2.3.99

1 year ago

2.3.98

1 year ago

2.3.96

1 year ago

2.3.93

1 year ago

2.3.95

1 year ago

2.3.94

1 year ago

3.0.0-next.1

1 year ago

2.3.79

1 year ago

2.3.78

1 year ago

2.3.75

1 year ago

2.3.74

1 year ago

2.3.77

1 year ago

2.3.76

1 year ago

2.3.80

1 year ago

2.3.89

1 year ago

2.3.86

1 year ago

2.3.85

1 year ago

2.3.88

1 year ago

2.3.87

1 year ago

2.3.82

1 year ago

2.3.81

1 year ago

2.3.84

1 year ago

2.3.83

1 year ago

2.3.91

1 year ago

2.3.90

1 year ago

2.3.92

1 year ago

2.3.73

1 year ago

2.3.71

1 year ago

2.3.72

1 year ago

2.3.70

1 year ago

2.3.69

1 year ago

2.3.68

1 year ago

2.3.67

1 year ago

2.3.66

2 years ago

2.3.65

2 years ago

2.3.64

2 years ago

2.3.63

2 years ago

2.3.62

2 years ago

2.3.59

2 years ago

2.3.60

2 years ago

2.3.61

2 years ago

2.3.57

2 years ago

2.3.58

2 years ago

2.3.56

2 years ago

2.3.55

2 years ago

2.3.54

2 years ago

2.3.53

2 years ago

2.3.52

2 years ago

2.3.51

2 years ago

2.3.49

2 years ago

2.3.50

2 years ago

2.3.48

2 years ago

2.3.47

2 years ago

2.3.46

2 years ago

2.3.45

2 years ago

2.3.44

2 years ago

2.3.43

2 years ago

2.3.42

2 years ago

2.3.41

2 years ago

2.3.40

2 years ago

2.3.39

2 years ago

2.3.38

2 years ago

2.3.37

2 years ago

2.3.35

2 years ago

2.3.34

2 years ago

2.3.36

2 years ago

2.3.33

2 years ago

2.3.31

2 years ago

2.3.32

2 years ago

2.3.30

2 years ago

2.3.28

2 years ago

2.3.29

2 years ago

2.3.27

2 years ago

2.3.26

2 years ago

2.3.24

2 years ago

2.3.25

2 years ago

2.3.23

2 years ago

2.3.20

2 years ago

2.3.22

2 years ago

2.3.21

2 years ago

2.3.19

2 years ago

2.3.18

2 years ago

2.3.17

2 years ago

2.3.16

2 years ago

2.3.15

2 years ago

2.3.14

2 years ago

2.3.13

2 years ago

2.3.12

2 years ago

2.3.9

2 years ago

2.3.11

2 years ago

2.3.10

2 years ago

2.3.8

2 years ago

2.3.7

2 years ago

2.3.4

2 years ago

2.3.3

2 years ago

2.3.6

2 years ago

2.3.5

2 years ago

2.3.2

2 years ago

2.3.0

2 years ago

2.3.1

2 years ago

2.2.15

2 years ago

2.2.14

2 years ago

2.2.13

2 years ago

2.2.12

2 years ago

2.2.11

2 years ago

2.2.10

2 years ago

2.2.9

2 years ago

2.2.8

2 years ago

2.2.5

2 years ago

2.2.7

2 years ago

2.2.6

2 years ago

2.2.4

2 years ago

2.2.3

2 years ago

2.2.2

2 years ago

2.2.1

2 years ago

2.2.0

2 years ago

2.1.1

2 years ago

2.1.0

2 years ago

2.0.0

2 years ago

1.3.2

2 years ago

1.3.1

2 years ago

1.3.0

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.0

2 years ago

1.1.2

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.46

2 years ago

1.0.45

2 years ago

1.0.44

2 years ago

1.0.43

2 years ago

1.0.42

2 years ago

1.0.41

2 years ago

1.0.40

2 years ago

1.0.39

2 years ago

1.0.38

2 years ago

1.0.37

2 years ago

1.0.36

2 years ago

1.0.35

2 years ago

1.0.34

2 years ago

1.0.33

2 years ago

1.0.32

2 years ago

1.0.31

2 years ago

1.0.30

2 years ago

1.0.29

2 years ago

1.0.28

2 years ago

1.0.27

2 years ago

1.0.26

2 years ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.23

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.20

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.12

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

0.1.0

2 years ago