@club-employes/utopia/dist/composables/initializeTheme.d.ts

🎨 Modern Vue 3 design system with multi-brand theming, design tokens, and 30+ components. Supports Club Employés & Gifteo brands with light/dark modes.

/**
 * Initialize theme before Vue app mounts to prevent FOUC (Flash of Unstyled Content)
 *
 * This function should be called BEFORE creating the Vue app instance.
 * It loads and injects the theme CSS synchronously into the document head.
 *
 * @example
 * ```typescript
 * import { initializeTheme } from '@utopia/design-system'
 *
 * // Detect theme from domain
 * const domain = window.location.hostname
 * const themeName = domain.includes('gifteo') ? 'gifteo-light' : 'club-employes-light'
 *
 * // Initialize theme BEFORE creating Vue app
 * await initializeTheme(themeName)
 *
 * // Now create Vue app (no FOUC)
 * const app = createApp(App)
 * app.mount('#app')
 * ```
 */
export type ThemeName = 'club-employes-light' | 'club-employes-dark' | 'gifteo-light' | 'gifteo-dark';
/**
 * Validates if the theme name is valid
 */
export declare function isValidThemeName(themeName: string): themeName is ThemeName;
/**
 * Initialize theme CSS before app mount
 * @param themeName - The theme name to load (e.g., 'club-employes-light')
 * @throws Error if theme name is invalid or CSS cannot be loaded
 */
export declare function initializeTheme(themeName: string): Promise<void>;
/**
 * Get the currently active theme name from the DOM
 * @returns The active theme name or null if none is set
 */
export declare function getActiveTheme(): ThemeName | null;
/**
 * Unlock the brand to allow manual brand switching
 * Useful for demo/showcase applications like utopia-website
 *
 * @example
 * ```typescript
 * // In a showcase/demo app, unlock the brand to allow testing
 * unlockBrand()
 * ```
 */
export declare function unlockBrand(): void;