Angular API Reference

Complete API reference for @tokiforge/angular.

ThemeService

Injectable service that manages theme state and operations.

Constructor

constructor()

The service is provided in root, so you can inject it anywhere:

import { inject } from '@angular/core';
import { ThemeService } from '@tokiforge/angular';

export class MyComponent {
  themeService = inject(ThemeService);
}

Methods

init(config, options?)

Initialize the theme service.

Signature:

init(config: ThemeConfig, options?: ThemeInitOptions): void

Parameters:

• config: ThemeConfig - Theme configuration object
• options?: ThemeInitOptions - Initialization options

Options:

interface ThemeInitOptions {
  selector?: string;           // CSS selector (default: ':root')
  prefix?: string;            // CSS variable prefix (default: 'hf')
  defaultTheme?: string;      // Override default theme
  mode?: 'dynamic' | 'static'; // Theme mode (default: 'dynamic')
  persist?: boolean;          // Save to localStorage (default: true)
  watchSystemTheme?: boolean; // Auto-detect system theme (default: false)
  bodyClassPrefix?: string;   // Body class prefix for static mode (default: 'theme')
}

Example:

this.themeService.init(themeConfig, {
  mode: 'static',
  persist: true,
  watchSystemTheme: true,
  bodyClassPrefix: 'theme',
  prefix: 'hf',
});

setTheme(themeName)

Switch to a specific theme.

Signature:

setTheme(themeName: string): void

Parameters:

• themeName: string - Name of the theme to apply

Example:

this.themeService.setTheme('dark');

nextTheme()

Cycle to the next available theme.

Signature:

nextTheme(): void

Example:

this.themeService.nextTheme();

generateCSS(themeName?)

Generate CSS for a theme (available in static mode).

Signature:

generateCSS(themeName?: string): string

Parameters:

• themeName?: string - Theme name (defaults to current theme)

Returns:

CSS string with theme variables

Example:

const css = this.themeService.generateCSS('dark');

getContext()

Get the complete theme context object.

Signature:

getContext(): ThemeContext

Returns:

interface ThemeContext {
  theme: string;
  tokens: DesignTokens;
  setTheme: (themeName: string) => void;
  nextTheme: () => void;
  availableThemes: string[];
  runtime: ThemeRuntime;
  generateCSS?: (themeName?: string) => string; // Available in static mode
}

getRuntime()

Get the underlying ThemeRuntime instance.

Signature:

getRuntime(): ThemeRuntime | null

Properties (Signals)

theme: Signal<string>

Current theme name.

const currentTheme = this.themeService.theme();

tokens: Signal<DesignTokens>

Current theme tokens.

const tokens = this.themeService.tokens();

availableThemes: Signal<string[]>

All available theme names.

const themes = this.themeService.availableThemes();

Static Mode

When using static mode, themes are applied via body classes instead of runtime injection:

this.themeService.init(themeConfig, {
  mode: 'static',
  bodyClassPrefix: 'theme',
});

This adds classes like theme-light or theme-dark to the body element. CSS variables are scoped by these classes.

CSS Generation Utilities

generateThemeCSS(config, options?)

Generate separate CSS files for each theme.

import { generateThemeCSS } from '@tokiforge/angular';

const files = generateThemeCSS(themeConfig, {
  bodyClassPrefix: 'theme',
  prefix: 'hf',
  format: 'css',
});
// Returns: { 'light.css': '...', 'dark.css': '...' }

generateCombinedThemeCSS(config, options?)

Generate a single CSS file with all themes.

import { generateCombinedThemeCSS } from '@tokiforge/angular';

const css = generateCombinedThemeCSS(themeConfig, {
  bodyClassPrefix: 'theme',
  prefix: 'hf',
});

Types

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

Examples

See Angular Example for complete usage examples.