flowbite-angular/fesm2022/flowbite-angular-theme.mjs

<div align="center"> <h1>:construction: flowbite-angular (unreleased) :construction:</h1> <p> <a href="https://flowbite.com"> <img alt="Flowbite - Tailwind CSS components" width="350" src="https://flowbite.s3.amazonaws.com/github/logo-github

import * as i0 from '@angular/core';
import { inject, Injector, signal, afterNextRender, untracked, Directive } from '@angular/core';

/**
 * Use to give a clean API on the current application theme
 */
class FlowbiteThemeDirective {
    constructor() {
        this.injector = inject(Injector);
        this.localStorageKey = 'color-theme';
        this._currentTheme = signal('light');
        /**
         * Get the application theme based on `signals`
         */
        this.currentTheme = this._currentTheme.asReadonly();
    }
    ngOnInit() {
        afterNextRender(() => {
            this.toggleTheme(this.getLocalStorageTheme());
        }, { injector: this.injector });
    }
    /**
     * Get theme from the `localStorage`
     *
     * @returns The current theme saved in the `localStorage` with the key `color-theme`
     */
    getLocalStorageTheme() {
        return localStorage.getItem(this.localStorageKey) === 'dark' ? 'dark' : 'light';
    }
    /**
     * Toggle the theme saved in the `localStorage` and available in `currentTheme`
     *
     * @param theme If provided, force the theme instead of toggling it between light and dark mode
     */
    toggleTheme(theme) {
        if (!theme) {
            const tmpTheme = untracked(() => this.currentTheme());
            if (tmpTheme === 'dark')
                theme = 'light';
            else
                theme = 'dark';
        }
        this.setTheme(theme);
    }
    /**
     * Set the theme inside the page
     *
     * @param theme Theme to apply
     */
    setTheme(theme) {
        try {
            localStorage.setItem(this.localStorageKey, theme);
        }
        catch (error) {
            console.warn('Failed to save theme to localStorage:', error);
        }
        this._currentTheme.set(theme);
        theme === 'dark'
            ? document.documentElement.classList.add('dark')
            : document.documentElement.classList.remove('dark');
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: FlowbiteThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: FlowbiteThemeDirective, isStandalone: true, selector: "[flowbiteTheme]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: FlowbiteThemeDirective, decorators: [{
            type: Directive,
            args: [{
                    standalone: true,
                    selector: '[flowbiteTheme]',
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { FlowbiteThemeDirective };
//# sourceMappingURL=flowbite-angular-theme.mjs.map