Runtime

@theme-runtime

Why separate runtime from styles:

• Clean separation of concerns: runtime manages variables, utilities, DOM; styles provide design tokens and SCSS.
• Smaller bundles per consumer; apps can rely on runtime without importing heavy effect SCSS.
• Testability and SSR-safety in services.

Core services:

• UnifiedThemeService (Facade): high-level API for init, theme switching, mode.
• ThemeManagerService: primary manager for theme CRUD and application.
• ThemeApplicationService: applies classes/attributes to DOM only.
• ThemeVariablesService: generates/injects CSS variables.
• ThemeUtilitiesService: generates runtime utility CSS.
• ThemeStorageService/Sync: persistence with IndexedDB/localStorage and sync helpers.
• ThemeOrchestratorService: internal coordinator used by ThemeManagerService.

Recommended usage (Facade):

import { inject } from '@angular/core';
import { UnifiedThemeService } from '@theme-runtime';

export class AppThemeInitializer {
  private readonly unified = inject(UnifiedThemeService);

  init() {
    this.unified.initialize().subscribe(() => {
      this.unified.setTheme('modern-dark').subscribe();
    });
  }
}

Advanced (internal coordinator - for diagnostics only):

// The orchestrator is used internally by ThemeManagerService and is not part of the public API.
// If accessed indirectly, its applyTheme() returns ThemeOrchestrationResult with timing metrics.

Use cases:

• App bootstrap: initialize + apply last active theme.
• Live switching: regenerate variables/utilities and update DOM.
• Multi-brand apps: persist per-tenant theme IDs; quick restore.