https://github.com/calvo-jp/svelte-os-themes

Svelte 5 theme helper.
https://github.com/calvo-jp/svelte-os-themes

svelte themes

Last synced: about 2 months ago
JSON representation

Svelte 5 theme helper.

• Host: GitHub
• URL: https://github.com/calvo-jp/svelte-os-themes
• Owner: calvo-jp
• License: mit
• Created: 2024-04-22T01:13:59.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-10-21T07:51:28.000Z (3 months ago)
• Last Synced: 2024-10-21T08:17:53.581Z (3 months ago)
• Topics: svelte, themes
• Language: TypeScript
• Homepage:
• Size: 321 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Svelte OS Themes

[Svelte](https://svelte.dev/) 5 theme helper.

## Installation

```bash

npm install svelte-os-themes

```

## Usage

```svelte

  import {ThemeProvider} from 'svelte-os-themes';

  let {children} = $props();

  {@render children()}

```

```svelte

  import {useTheme} from 'svelte-os-themes';

  let theme = useTheme();

Light

Dark

System

```

## API

### ThemeProvider

- `fallback`

  The default theme to use when no theme is set in storage.

  accepted values: `'light'`, `'dark'`, `'system'`


  default value: `'system'`

- `attribute`

  The attribute to set on the `html` element.

  accepted values: `'class'`, `'data-'`


  default value: `'class'`

- `storageKey`

  The key to use when storing the theme in `localStorage`.

  accepted values: ``


  default value: `'theme'`

- `system`

  Whether to change theme when os theme changes.

  accepted values: `true`, `false`


  default value: `true`

- `colorScheme`

  Whether to add/update the `html`'s `color-scheme`.

  accepted values: `true`, `false`


  default value: `true`

- `nonce`

  The nonce to use for script.

  accepted values: ``


  default value:

### useTheme

`useTheme` does not accept any arguments and returns an object with the following properties:

- `value`

  Returns the current theme when used as a getter and sets the theme when used as a setter.

- `getTriggerProps`

  Returns attributes for button to be used to trigger a particular theme. eg:

  ```svelte

  

    import {useTheme} from 'svelte-os-themes';

    let theme = useTheme();

  

  Light

  ```

  or set value to auto

  ```svelte

  

    import {useTheme} from 'svelte-os-themes';

    let theme = useTheme();

  

  

    {#if theme.value === 'light'}

      Go dark

    {:else if theme.value === 'dark'}

      Go light

    {/if}

  

  ```

### parseTheme

`parseTheme` is a helper function that parses any value into a valid theme. See example below

```js

console.log(parseTheme('LIGHT')); // 'light'

console.log(parseTheme('invalid')); // undefined

console.log(parseTheme('invalid', 'dark')); // 'dark'

```