Class ThemeStudioService

Service that opens a standalone Theme Studio window.

The studio lets developers live-edit every CSS custom property defined in the @theredhead design-token manifest. Changes are applied in real time to the opener window via document.documentElement.style.setProperty(). The studio supports:

Searching / filtering tokens by name, description, type, scope, namespace
Exporting an override CSS stylesheet
Importing / exporting overrides as JSON

The popup uses its own self-contained styles so it is never affected by the app's theme changes.

Example

import { ThemeStudioService } from '@theredhead/lucid-theme';

export class DevToolbarComponent {
  private readonly studio = inject(ThemeStudioService);

  openStudio(): void {
    this.studio.open();
  }
}

Index

Constructors

constructor

new ThemeStudioService(): ThemeStudioService
Returns ThemeStudioService

Accessors

isOpen

get isOpen(): boolean
Whether the studio popup is currently open.

Returns boolean
- Defined in packages/ui-theme/src/lib/services/theme-studio.service.ts:204

Methods

close

close(): void
Close the studio window if it is currently open.

Returns void
- Defined in packages/ui-theme/src/lib/services/theme-studio.service.ts:194

open

open(options?: ThemeStudioOptions): Promise<void>
Open the Theme Studio in a popup window.

If the studio is already open and not closed, it will be focused instead of opening a duplicate.
Parameters
- options: ThemeStudioOptions = {}
  Optional configuration (size, manifest data or URL).
Returns Promise<void>
- Defined in packages/ui-theme/src/lib/services/theme-studio.service.ts:129

Class ThemeStudioService

Example

Index

Constructors

Accessors

Methods

Constructors

constructor

Returns ThemeStudioService

Accessors

isOpen

Returns boolean

Methods

close

Returns void

open

Parameters

Returns Promise<void>

Settings

On This Page