Setup Guide

Ecosistema completo para organización y gestión de contenido con interfaces espaciales

Setup & Integration Guide

Install and import styles

Add the stylesheet entry once at your app shell (global styles):

@use '@theme-styles/src/lib/styles/index' as theme;

Runtime services (Angular 20 standalone)

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

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

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

Usage in libraries

Libraries should rely on CSS variables and classes only; never hard-code colors. Use var(--ux-primary) etc.

Providers

Add the providers in your app config when using the runtime:

import { provideUnifiedThemeSystemWithSync } from '@theme-runtime';

export const appConfig = {
  providers: [
    provideUnifiedThemeSystemWithSync({ enableSync: true, autoSync: true })
  ]
};

Ports and demos

System demo: http://localhost:5300/themes/system-demo