Svelte API Reference

Complete API reference for @tokiforge/svelte.

createThemeStore

Creates a reactive theme store for Svelte.

Signature

function createThemeStore(
  config: ThemeConfig,
  selector?: string,
  prefix?: string,
  defaultTheme?: string
): ThemeStore

Parameters

• config: ThemeConfig - Theme configuration object
• selector?: string - CSS selector (default: :root)
• prefix?: string - CSS variable prefix (default: hf)
• defaultTheme?: string - Override default theme name

Returns

interface ThemeStore {
  theme: Writable<string>;
  tokens: Readable<DesignTokens>;
  setTheme: (themeName: string) => void;
  nextTheme: () => void;
  availableThemes: Readable<string[]>;
  runtime: ThemeRuntime;
}

Example

<script>
  import { createThemeStore } from '@tokiforge/svelte';

  const themeStore = createThemeStore({
    themes: [
      { name: 'light', tokens: lightTokens },
      { name: 'dark', tokens: darkTokens },
    ],
    defaultTheme: 'light',
  });
</script>

<button on:click={() => themeStore.setTheme('dark')}>
  Current: {$themeStore.theme}
</button>

Store Properties

theme: Writable<string>

Current theme name. Use $themeStore.theme to access reactively.

<p>Current theme: {$themeStore.theme}</p>

tokens: Readable<DesignTokens>

Current theme tokens. Use $themeStore.tokens to access reactively.

<button
  style="background-color: {$themeStore.tokens.color.primary.value}"
>
  Click me
</button>

setTheme(themeName: string): void

Switch to a specific theme.

<button on:click={() => themeStore.setTheme('dark')}>
  Switch to Dark
</button>

nextTheme(): void

Cycle to the next available theme.

<button on:click={() => themeStore.nextTheme()}>
  Next Theme
</button>

availableThemes: Readable<string[]>

All available theme names.

{#each $themeStore.availableThemes as themeName}
  <option value={themeName}>{themeName}</option>
{/each}

runtime: ThemeRuntime

The underlying ThemeRuntime instance for advanced usage.

Types

All types are exported from @tokiforge/core. See Core API for details.

Examples

See Svelte Example for complete usage examples.