@phroosta/theme-manager/index.d.ts

A powerful theme management library for Angular with dark mode and white-label support

import * as _angular_core from '@angular/core';
import { InjectionToken, Provider } from '@angular/core';

interface ThemeColors {
    primaary: string;
    secondary: string;
    accent: string;
    warn: string;
    background: string;
    surface: string;
    textPrimary: string;
    textSecondary: string;
    divider: string;
}
interface ThemeTypography {
    fontFamily?: string;
    fontSize?: string;
    fontWeightLight?: string;
    fontWeightRegular?: string;
    fontWeightMedium?: string;
    fonWeightBold?: string;
}
interface ThemeSpacing {
    unit?: number;
    xs?: string;
    sm?: string;
    md?: string;
    lg?: string;
    xl?: string;
}
interface Theme {
    id: string;
    name: string;
    isDark: boolean;
    colors: ThemeColors;
    typography?: ThemeTypography;
    spacing?: ThemeSpacing;
    custom?: Record<string, any>;
}

interface ThemeManagerConfig {
    themes: Theme[];
    defaultTheme?: string;
    storageKey?: string;
    autoDetectPrefersDark?: boolean;
    enableLogging?: boolean;
}

/**
 * Service for managing application themes
 * @example
 * ```typescript
 * const themeService = inject(ThemeService);
 * themeService.toggleDarkMode();
 * ```
 */
declare class ThemeService {
    private document;
    private lastLightThemeId?;
    private lastDarkThemeId?;
    private initialized;
    private mediaQueryListener?;
    private darkModeQuery?;
    private currentThemeSignal;
    private isDarkModeSignal;
    readonly currentTheme: _angular_core.Signal<Theme | null>;
    readonly isDarkMode: _angular_core.Signal<boolean>;
    readonly themeId: _angular_core.Signal<string>;
    readonly themeName: _angular_core.Signal<string>;
    private config;
    private availableThemes;
    constructor(document: Document, config?: ThemeManagerConfig);
    private initializeTheme;
    private applyThemeWithTracking;
    private getSystemPreferredTheme;
    private setupSystemThemeListener;
    private setupEffect;
    /**
     * Sets the active theme
     * @param themeId - The unique identifier of the theme to apply
     * @throws Will warn if theme ID is not found
     * @example
     * ```typescript
     * themeService.setTheme('dark');
     * ```
     */
    setTheme(themeId: string): void;
    /**
     * Toggles between light and dark mode themes
     * @remarks
     * Will remember the last used theme for each mode
     */
    toggleDarkMode(): void;
    private findDefaultThemeByMode;
    cycleTheme(): void;
    private applyThemeToDOM;
    private kebabCase;
    private getSavedThemeId;
    private saveThemeId;
    private applySystemTheme;
    getAvailableThemes(): Theme[];
    getThemeById(id: string): Theme | undefined;
    /**
     * Registers a new theme dynamically
     * @param theme - The theme configuration to register
     * @example
     * ```typescript
     * const customTheme: Theme = {
     *   id: 'custom',
     *   name: 'Custom Theme',
     *   isDark: false,
     *   colors: { ... }
     * };
     * themeService.registerTheme(customTheme);
     * ```
     */
    registerTheme(theme: Theme): void;
    ngOnDestroy(): void;
    resetToSystemPreference(): void;
    isUsingSystemPreference(): boolean;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeService, [null, { optional: true; }]>;
    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeService>;
}

declare const THEME_MANAGER_CONFIG: InjectionToken<ThemeManagerConfig>;

/**
 * Provides the Theme Manager service with configuration
 *
 * @example
 * ```typescript
 * bootstrapApplication(AppComponent, {
 *   providers: [
 *     provideThemeManager({
 *       themes: [lightTheme, darkTheme],
 *       defaultTheme: 'light'
 *     })
 *   ]
 * });
 * ```
 */
declare function provideThemeManager(config?: ThemeManagerConfig): Provider[];
declare class ThemeManagerModule {
    static forRoot(config?: ThemeManagerConfig): Provider[];
}

export { THEME_MANAGER_CONFIG, ThemeManagerModule, ThemeService, provideThemeManager };
export type { Theme, ThemeColors, ThemeManagerConfig, ThemeSpacing, ThemeTypography };