Theme Customization Playground

Build a small view that demonstrates runtime theme switching, unstyled mode fallback, and pass-through customization using the UI library's theming system.

Capabilities

Switchable theme profiles

• Starts on a "light" profile and can switch to a "dark" profile at runtime; switching updates both global tokens and a preview button's background/text colors to match the active profile without reloading. @test

Unstyled mode toggle

• Exposes a toggle that removes library-provided styling when enabled while preserving layout; the preview button then renders only user-provided pass-through classes/styles, and disabling the toggle restores the library skin. @test

Pass-through merging

• Accepts pass-through options for named component sections (root, label, icon) and merges them with library defaults so that provided classes/attributes are preserved alongside built-ins; the sample view must render both a custom data attribute and aria-label supplied through pass-through on the preview button. @test

Implementation

@generates

API

export type ThemeProfile = {
  name: string;
  tokens: Record<string, string>;
};

export type PassThroughSection = {
  class?: string | string[] | Record<string, boolean>;
  style?: Record<string, string>;
  attrs?: Record<string, string>;
};

export type ComponentPassThrough = {
  button?: {
    root?: PassThroughSection;
    label?: PassThroughSection;
    icon?: PassThroughSection;
  };
};

export interface ThemePlaygroundOptions {
  mount: HTMLElement;
  profiles: ThemeProfile[];
  defaultProfile: string;
  passThrough?: ComponentPassThrough;
  unstyled?: boolean;
}

export interface ThemePlayground {
  currentProfile(): string;
  switchProfile(name: string): void;
  setUnstyled(value: boolean): void;
  updatePassThrough(options: ComponentPassThrough): void;
}

export function createThemePlayground(options: ThemePlaygroundOptions): ThemePlayground;

Dependencies { .dependencies }

PrimeVue UI library { .dependency }

Provides theme tokens, unstyled mode flag, and per-component pass-through customization. @satisfied-by