https://github.com/jill64/svelte-dark-theme

☯ Dark Theme Manager for SvelteKit
https://github.com/jill64/svelte-dark-theme

dark dark-mode ssr svelte sveltekit theme

Last synced: 3 months ago
JSON representation

☯ Dark Theme Manager for SvelteKit

• Host: GitHub
• URL: https://github.com/jill64/svelte-dark-theme
• Owner: jill64
• License: mit
• Created: 2023-09-13T03:37:37.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-12T21:56:42.000Z (10 months ago)
• Last Synced: 2024-04-13T21:51:41.171Z (10 months ago)
• Topics: dark, dark-mode, ssr, svelte, sveltekit, theme
• Language: TypeScript
• Homepage: https://svelte-dark-theme.jill64.dev
• Size: 1.27 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# @jill64/svelte-dark-theme

     

☯ Dark Theme Manager for SvelteKit

## [Demo](https://svelte-dark-theme.jill64.dev)

## Example

```svelte

  import { ThemeManager, setting, theme } from '@jill64/svelte-dark-theme'

  const setToDark = () => {

    $setting = 'dark'

  }

  const setToLight = () => {

    $setting = 'light'

  }

  const setToDeviceSync = () => {

    $setting = 'sync'

  }

Theme: {$theme}


Setting: {$setting}


  :global(body.light) {

    /* light mode styling */

  }

  :global(body.dark) {

    /* dark mode styling */

  }

```

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

```svelte

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

 flip theme 

```

## SSR (Optional)

When using SSR, you can reduce flushing on load by binding classes to html with hooks.

```js

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

```js

// 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](LICENSE)