API

useTheme

Returns the nearest ThemeProvider. Every field is reactive.

Signature

import { useTheme, type ThemeInstance } from 'sveltier';

function useTheme(): ThemeInstance;

Call it during component initialisation, inside a ThemeProvider. Outside one it throws [sveltier] useTheme() must be called inside a <ThemeProvider>.

Returns

Name	Type	Description
`choice`	`'system' \| string`	The current choice.
`name`	`string`	The theme in effect. With "system" it follows the OS; on the server it is the light theme.
`current`	`ThemeDefinition`	The definition of the theme in effect.
`isDark`	`boolean`	Whether the theme in effect is dark.
`themes`	`Readonly<Record<string, ThemeDefinition>>`	All registered themes.
`light / dark`	`string`	The pair used by "system" and toggle().
`set(choice)`	`(choice: 'system' \| string) => void`	Selects a theme or "system". The root provider remembers it. Throws for unknown names.
`toggle()`	`() => void`	Switches between the light and dark theme.

Example

Theme toggle

<script>
  import { useTheme } from 'sveltier';
  const theme = useTheme();
</script>

<button type="button" onclick={() => theme.toggle()}>
  {theme.isDark ? 'Light' : 'Dark'}
</button>