@tokiforge/vue

Vue 3 adapter for TokiForge design token and theming engine. Provides Vue composables and provide/inject for easy theme management in Vue applications.

Vue adapter for TokiForge theming (v2.0.1).

Installation

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

Usage

<template>
  <div :style="{ backgroundColor: 'var(--hf-color-background-default)' }">
    <button @click="toggleTheme">Switch Theme</button>
  </div>
</template>

<script setup lang="ts">
import { provideTheme, useTheme } from "@tokiforge/vue";

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

provideTheme(themeConfig);
const { theme, tokens, setTheme } = useTheme();

const toggleTheme = () => {
  setTheme(theme.value === "light" ? "dark" : "light");
};
</script>

API

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

Provides theme context to Vue components.

useTheme()

Composable to access theme context.

Returns:

• theme: Reactive ref with current theme name
• tokens: Computed ref with current theme tokens
• setTheme(name): Switch to a theme
• nextTheme(): Cycle to next theme
• availableThemes: Computed ref with available theme names
• runtime: ThemeRuntime instance