@tokiforge/svelte

Svelte adapter for TokiForge design token and theming engine. Provides Svelte stores and reactive utilities for easy theme management in Svelte applications.

Svelte adapter for TokiForge theming (v2.0.1).

Installation

npm install @tokiforge/svelte@^2.0.1 @tokiforge/core@^2.0.1

Usage

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

  const themeConfig = {
    themes: [
      { name: 'light', tokens: lightTokens },
      { name: 'dark', tokens: darkTokens },
    ],
    defaultTheme: 'light',
  };

  const themeStore = createThemeStore(themeConfig);

  function toggleTheme() {
    themeStore.setTheme($themeStore.theme === 'light' ? 'dark' : 'light');
  }
</script>

<div style="background-color: var(--hf-color-background-default);">
  <button on:click={toggleTheme}>
    Switch to {$themeStore.theme === 'light' ? 'Dark' : 'Light'} Theme
  </button>
</div>

API

createThemeStore(config, selector?, prefix?, defaultTheme?)

Creates a Svelte store for theme management.

Returns:

• theme: Writable store with current theme name
• tokens: Derived store with current theme tokens
• setTheme(name): Switch to a theme
• nextTheme(): Cycle to next theme
• availableThemes: Derived store with available theme names
• runtime: ThemeRuntime instance