https://github.com/calvo-jp/svelte-os-themes
Svelte 5 theme helper.
https://github.com/calvo-jp/svelte-os-themes
svelte themes
Last synced: 3 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 (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-04T03:34:45.000Z (6 months ago)
- Last Synced: 2025-03-22T13:04:34.920Z (3 months ago)
- Topics: svelte, themes
- Language: TypeScript
- Homepage:
- Size: 562 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();
$inspect(theme.current);
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: `false`
- `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:
- `current`
Returns the current theme when used as a getter and sets the theme when used as a setter.
```svelte
import {useTheme} from 'svelte-os-themes';
let theme = useTheme();
Current Theme: {theme.current}
Light
Dark
System
```
- `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
Dark
System
```
or set value to auto
```svelte
import {useTheme} from 'svelte-os-themes';
let theme = useTheme();
{#if theme.current === 'light'}
Go dark
{:else if theme.current === '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'
```