svelte-os-themes
Version:
[Svelte](https://svelte.dev/) 5 theme helper.
56 lines (55 loc) • 1.58 kB
TypeScript
import type { HTMLButtonAttributes } from 'svelte/elements';
import type { Theme } from './types.js';
export interface CreateThemeOptions {
/**
* @description The fallback theme to use when no theme is set in localStorage.
* @default 'system'
*/
fallback?: Theme;
/**
* @description The attribute used to set the theme on the `<html>` element.
* @default 'class'
*/
attribute?: 'class' | `data-${string}`;
/**
* @description The key used to store the theme in localStorage.
* @default 'theme'
*/
storageKey?: string;
/**
* @description Whether to listen for changes in the OS theme.
* @default false
*/
system?: boolean;
/**
* @description Whether to set the `color-scheme` CSS property on the `<html>` element.
* @default true
*/
colorScheme?: boolean;
styleNonce?: string;
scriptNonce?: string;
}
export type ThemeTriggerProps = {
value: Theme;
} | {
value: 'auto';
/**
* @default
* ['light', 'dark', 'system']
*/
sequence?: Theme[];
};
export interface CreateThemeReturn {
get current(): Theme;
set current(value: Theme | null | undefined);
getTriggerProps(props: ThemeTriggerProps): HTMLButtonAttributes;
}
export declare function createTheme(options: CreateThemeOptions): CreateThemeReturn;
export declare namespace createTheme {
var style: (props: CreateThemeOptions) => {
readonly value: string;
};
var script: (props: CreateThemeOptions) => {
readonly value: string;
};
}