ngx-easy-theme-switcher 1.0.0

package/README.md

@@ -0,0 +1,208 @@
+# NGX Easy Theme Switcher
+
+Angular library for easy theme switching (light/dark) with customizable toggle icons.
+
+## Features
+
+- **Service-based** — inject `ThemeService` anywhere to programmatically get/set/toggle themes
+- **Persistent** — theme preference is saved in `localStorage`
+- **Customizable icon** — default FontAwesome, with support for any icon font or custom SVG
+- **Standalone** — compatible with Angular standalone components
+- **Minimal** — just a service and a toggle component
+
+## Installation
+
+```bash
+npm install ngx-easy-theme-switcher
+```
+
+FontAwesome is used by default. For icons to display, install your preferred icon library:
+
+```bash
+# For default FontAwesome icons
+npm install @fortawesome/fontawesome-free
+
+# Or for Material Icons
+npm install material-symbols
+
+# Or for Bootstrap Icons
+npm install bootstrap-icons
+```
+
+## Quick Start
+
+### 1. Create theme files
+
+Create two SCSS files in `src/themes/`:
+
+**`src/themes/_light.scss`**:
+```scss
+[data-theme="light"] {
+  --bg: #ffffff;
+  --text: #1a1a2e;
+  --primary: #4361ee;
+}
+```
+
+**`src/themes/_dark.scss`**:
+```scss
+[data-theme="dark"] {
+  --bg: #0f172a;
+  --text: #e2e8f0;
+  --primary: #818cf8;
+}
+```
+
+### 2. Import themes in `styles.scss`
+
+```scss
+@use 'themes/light';
+@use 'themes/dark';
+
+body {
+  background-color: var(--bg);
+  color: var(--text);
+  transition: background-color 0.3s, color 0.3s;
+}
+```
+
+### 3. Configure the service
+
+In `app.config.ts`:
+
+```typescript
+import { ApplicationConfig } from '@angular/core';
+import { THEME_CONFIG } from 'ngx-easy-theme-switcher';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    {
+      provide: THEME_CONFIG,
+      useValue: {
+        themes: ['light', 'dark'],         // your theme names
+        defaultTheme: 'light',             // initial theme
+      },
+    },
+  ],
+};
+```
+
+### 4. Add the toggle button
+
+In any component template:
+
+```html
+<ets-theme-toggle />
+```
+
+## Customization
+
+### Icon Fonts
+
+The toggle component supports various icon fonts via the `iconFont` input:
+
+```html
+<!-- Default (FontAwesome Solid) -->
+<ets-theme-toggle />
+
+<!-- Material Symbols -->
+<ets-theme-toggle
+  iconFont="material-symbols-outlined"
+  lightIcon="dark_mode"
+  darkIcon="light_mode"
+/>
+
+<!-- Bootstrap Icons -->
+<ets-theme-toggle
+  iconFont="bi"
+  lightIcon="bi-sun-fill"
+  darkIcon="bi-moon-fill"
+/>
+```
+
+Supported icon fonts: `fas`, `far`, `fal`, `fab`, `material-icons`, `material-icons-outlined`, `material-symbols-outlined`, `bi`, `pi`, `ion-icon`.
+
+### Custom SVG
+
+Pass any SVG markup as the `svgIcon` input:
+
+```html
+<ets-theme-toggle [svgIcon]="mySvg" />
+```
+
+```typescript
+mySvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9..."/>
+</svg>`;
+```
+
+### Custom Icon Names
+
+Override the icon class names for each theme:
+
+```html
+<ets-theme-toggle
+  lightIcon="fa-sun"
+  darkIcon="fa-moon"
+/>
+```
+
+### Programmatic Control
+
+Inject `ThemeService` anywhere:
+
+```typescript
+import { ThemeService } from 'ngx-easy-theme-switcher';
+
+constructor(private themeService: ThemeService) {}
+
+// Toggle theme
+this.themeService.toggleTheme();
+
+// Set specific theme
+this.themeService.setTheme('dark');
+
+// Get current theme
+const current = this.themeService.currentTheme;
+
+// Observe theme changes
+this.themeService.currentTheme$.subscribe(theme => {
+  console.log('Theme changed to:', theme);
+});
+```
+
+## API
+
+### `ThemeService`
+
+| Method/Property       | Description                                  |
+|-----------------------|----------------------------------------------|
+| `currentTheme`        | Get the current theme name                   |
+| `currentTheme$`       | Observable that emits on theme change        |
+| `themes`              | The configured theme names                   |
+| `toggleTheme()`       | Switch between the two themes                |
+| `setTheme(name)`      | Set a specific theme                         |
+
+### `ThemeConfig` (InjectionToken)
+
+| Property       | Default             | Description                           |
+|----------------|---------------------|---------------------------------------|
+| `themes`       | `['light', 'dark']` | Pair of theme names                   |
+| `attribute`    | `'data-theme'`      | HTML attribute set on `<html>`        |
+| `storageKey`   | `'ets-pref-theme'`  | localStorage key                      |
+| `defaultTheme` | `'light'`           | Initial theme before user choice      |
+
+### `ThemeToggleComponent` Inputs
+
+| Input       | Default      | Description                              |
+|-------------|--------------|------------------------------------------|
+| `iconFont`  | `'fas'`      | Icon font abbreviation                   |
+| `svgIcon`   | —            | Custom SVG markup (overrides iconFont)   |
+| `lightIcon` | `'fa-sun'`   | Icon name/class for the first theme      |
+| `darkIcon`  | `'fa-moon'`  | Icon name/class for the second theme     |
+
+## License
+
+Copyright (c) 2024 **Gennady Artamonov**
+
+All use is free. Redistribution or resale of the library itself as a paid product is prohibited. See [LICENSE.md](./LICENSE.md) for full terms.

package/fesm2022/ngx-easy-theme-switcher.mjs

@@ -0,0 +1,195 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Optional, Inject, Injectable, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
+import { NgClass } from '@angular/common';
+
+const THEME_CONFIG = new InjectionToken('THEME_CONFIG');
+const DEFAULT_CONFIG = {
+    themes: ['light', 'dark'],
+    attribute: 'data-theme',
+    storageKey: 'ets-pref-theme',
+    defaultTheme: 'light',
+};
+class ThemeService {
+    config;
+    currentThemeSubject;
+    currentTheme$;
+    constructor(config) {
+        this.config = { ...DEFAULT_CONFIG, ...config };
+        this.currentThemeSubject = new BehaviorSubject(this.getStoredTheme());
+        this.currentTheme$ = this.currentThemeSubject.asObservable();
+        this.applyTheme(this.currentThemeSubject.value);
+    }
+    /** Get the current theme name */
+    get currentTheme() {
+        return this.currentThemeSubject.value;
+    }
+    /** Get all available theme names */
+    get themes() {
+        return this.config.themes;
+    }
+    /** Toggle between the two configured themes */
+    toggleTheme() {
+        const [themeA, themeB] = this.config.themes;
+        const next = this.currentTheme === themeA ? themeB : themeA;
+        this.setTheme(next);
+    }
+    /** Set a specific theme by name */
+    setTheme(theme) {
+        if (!this.config.themes.includes(theme)) {
+            console.warn(`[EasyThemeSwitcher] Theme "${theme}" is not in configured themes:`, this.config.themes);
+            return;
+        }
+        this.currentThemeSubject.next(theme);
+        this.applyTheme(theme);
+        this.storeTheme(theme);
+    }
+    applyTheme(theme) {
+        const attr = this.config.attribute;
+        document.documentElement.setAttribute(attr, theme);
+    }
+    getStoredTheme() {
+        try {
+            const stored = localStorage.getItem(this.config.storageKey);
+            if (stored && this.config.themes.includes(stored)) {
+                return stored;
+            }
+        }
+        catch {
+            // localStorage not available
+        }
+        return this.config.defaultTheme;
+    }
+    storeTheme(theme) {
+        try {
+            localStorage.setItem(this.config.storageKey, theme);
+        }
+        catch {
+            // localStorage not available
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ThemeService, deps: [{ token: THEME_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [THEME_CONFIG]
+                }] }] });
+
+class ThemeToggleComponent {
+    themeService;
+    cdr;
+    /** Icon font abbreviation (e.g. 'fas', 'material-icons', 'bi') */
+    iconFont;
+    /** Custom SVG markup (overrides iconFont if provided) */
+    svgIcon;
+    /** Icon name for the first theme (default light) */
+    lightIcon;
+    /** Icon name for the second theme (default dark) */
+    darkIcon;
+    oppositeTheme = '';
+    iconClasses = {};
+    displayIconText = '';
+    destroy$ = new Subject();
+    constructor(themeService, cdr) {
+        this.themeService = themeService;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.updateState(this.themeService.currentTheme);
+        this.themeService.currentTheme$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((theme) => {
+            this.updateState(theme);
+            this.cdr.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    toggle() {
+        this.themeService.toggleTheme();
+    }
+    updateState(currentTheme) {
+        const [lightTheme, darkTheme] = this.themeService.themes;
+        const isLight = currentTheme === lightTheme;
+        this.oppositeTheme = currentTheme === lightTheme ? darkTheme : lightTheme;
+        const iconName = isLight
+            ? (this.darkIcon ?? 'fa-moon')
+            : (this.lightIcon ?? 'fa-sun');
+        const font = this.iconFont ?? 'fas';
+        if (font.startsWith('material')) {
+            this.iconClasses = { [font]: true };
+            this.displayIconText = iconName;
+        }
+        else {
+            this.iconClasses = { [font]: true, [iconName]: true };
+            this.displayIconText = '';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ThemeToggleComponent, deps: [{ token: ThemeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ThemeToggleComponent, isStandalone: true, selector: "ets-theme-toggle", inputs: { iconFont: "iconFont", svgIcon: "svgIcon", lightIcon: "lightIcon", darkIcon: "darkIcon" }, ngImport: i0, template: `
+    <button
+      class="ets-toggle-btn"
+      (click)="toggle()"
+      [attr.aria-label]="'Switch to ' + oppositeTheme + ' mode'"
+      type="button"
+    >
+      @if (svgIcon) {
+        <span class="ets-icon ets-icon--svg" [innerHTML]="svgIcon"></span>
+      } @else {
+        <span
+          class="ets-icon"
+          [ngClass]="iconClasses"
+        >{{ displayIconText }}</span>
+      }
+    </button>
+  `, isInline: true, styles: [".ets-toggle-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;transition:background-color .3s,color .3s;color:inherit;font-size:1.25rem;line-height:1}.ets-toggle-btn:hover{background-color:#80808026}.ets-icon{display:inline-flex;align-items:center;justify-content:center}.ets-icon--svg{line-height:0}.ets-icon--svg ::ng-deep svg{width:1.25rem;height:1.25rem;fill:currentColor}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ThemeToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ets-theme-toggle', standalone: true, imports: [NgClass], template: `
+    <button
+      class="ets-toggle-btn"
+      (click)="toggle()"
+      [attr.aria-label]="'Switch to ' + oppositeTheme + ' mode'"
+      type="button"
+    >
+      @if (svgIcon) {
+        <span class="ets-icon ets-icon--svg" [innerHTML]="svgIcon"></span>
+      } @else {
+        <span
+          class="ets-icon"
+          [ngClass]="iconClasses"
+        >{{ displayIconText }}</span>
+      }
+    </button>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ets-toggle-btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:8px;border-radius:50%;transition:background-color .3s,color .3s;color:inherit;font-size:1.25rem;line-height:1}.ets-toggle-btn:hover{background-color:#80808026}.ets-icon{display:inline-flex;align-items:center;justify-content:center}.ets-icon--svg{line-height:0}.ets-icon--svg ::ng-deep svg{width:1.25rem;height:1.25rem;fill:currentColor}\n"] }]
+        }], ctorParameters: () => [{ type: ThemeService }, { type: i0.ChangeDetectorRef }], propDecorators: { iconFont: [{
+                type: Input
+            }], svgIcon: [{
+                type: Input
+            }], lightIcon: [{
+                type: Input
+            }], darkIcon: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of ngx-easy-theme-switcher
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { THEME_CONFIG, ThemeService, ThemeToggleComponent };
+//# sourceMappingURL=ngx-easy-theme-switcher.mjs.map

package/fesm2022/ngx-easy-theme-switcher.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-easy-theme-switcher.mjs","sources":["../../../projects/ngx-easy-theme-switcher/src/lib/theme.service.ts","../../../projects/ngx-easy-theme-switcher/src/lib/theme-toggle/theme-toggle.component.ts","../../../projects/ngx-easy-theme-switcher/src/public-api.ts","../../../projects/ngx-easy-theme-switcher/src/ngx-easy-theme-switcher.ts"],"sourcesContent":["import { Injectable, Inject, Optional, InjectionToken } from '@angular/core';\nimport { BehaviorSubject, Observable } from 'rxjs';\n\nexport interface ThemeConfig {\n  /** Names of the two themes, e.g. ['light', 'dark'] */\n  themes?: [string, string];\n  /** CSS attribute/class to set on the document element */\n  attribute?: string;\n  /** Storage key for persisting theme preference */\n  storageKey?: string;\n  /** Default theme (index 0 or 1 from themes array) */\n  defaultTheme?: string;\n}\n\nexport const THEME_CONFIG = new InjectionToken<ThemeConfig>('THEME_CONFIG');\n\nconst DEFAULT_CONFIG: ThemeConfig = {\n  themes: ['light', 'dark'],\n  attribute: 'data-theme',\n  storageKey: 'ets-pref-theme',\n  defaultTheme: 'light',\n};\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class ThemeService {\n  private config: ThemeConfig;\n  private currentThemeSubject: BehaviorSubject<string>;\n  public currentTheme$: Observable<string>;\n\n  constructor(@Optional() @Inject(THEME_CONFIG) config?: ThemeConfig) {\n    this.config = { ...DEFAULT_CONFIG, ...config };\n    this.currentThemeSubject = new BehaviorSubject<string>(\n      this.getStoredTheme()\n    );\n    this.currentTheme$ = this.currentThemeSubject.asObservable();\n    this.applyTheme(this.currentThemeSubject.value);\n  }\n\n  /** Get the current theme name */\n  get currentTheme(): string {\n    return this.currentThemeSubject.value;\n  }\n\n  /** Get all available theme names */\n  get themes(): [string, string] {\n    return this.config.themes!;\n  }\n\n  /** Toggle between the two configured themes */\n  toggleTheme(): void {\n    const [themeA, themeB] = this.config.themes!;\n    const next = this.currentTheme === themeA ? themeB : themeA;\n    this.setTheme(next);\n  }\n\n  /** Set a specific theme by name */\n  setTheme(theme: string): void {\n    if (!this.config.themes!.includes(theme)) {\n      console.warn(\n        `[EasyThemeSwitcher] Theme \"${theme}\" is not in configured themes:`,\n        this.config.themes\n      );\n      return;\n    }\n    this.currentThemeSubject.next(theme);\n    this.applyTheme(theme);\n    this.storeTheme(theme);\n  }\n\n  private applyTheme(theme: string): void {\n    const attr = this.config.attribute!;\n    document.documentElement.setAttribute(attr, theme);\n  }\n\n  private getStoredTheme(): string {\n    try {\n      const stored = localStorage.getItem(this.config.storageKey!);\n      if (stored && this.config.themes!.includes(stored)) {\n        return stored;\n      }\n    } catch {\n      // localStorage not available\n    }\n    return this.config.defaultTheme!;\n  }\n\n  private storeTheme(theme: string): void {\n    try {\n      localStorage.setItem(this.config.storageKey!, theme);\n    } catch {\n      // localStorage not available\n    }\n  }\n}\n","import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { Subject, takeUntil } from 'rxjs';\nimport { ThemeService } from '../theme.service';\n\nexport type IconFont =\n  | 'fas'       // FontAwesome Solid\n  | 'far'       // FontAwesome Regular\n  | 'fal'       // FontAwesome Light\n  | 'fab'       // FontAwesome Brands\n  | 'material-icons'\n  | 'material-icons-outlined'\n  | 'material-symbols-outlined'\n  | 'bi'        // Bootstrap Icons\n  | 'pi'        // PrimeIcons\n  | 'ion-icon'; // Ionicons\n\n@Component({\n  selector: 'ets-theme-toggle',\n  standalone: true,\n  imports: [NgClass],\n  template: `\n    <button\n      class=\"ets-toggle-btn\"\n      (click)=\"toggle()\"\n      [attr.aria-label]=\"'Switch to ' + oppositeTheme + ' mode'\"\n      type=\"button\"\n    >\n      @if (svgIcon) {\n        <span class=\"ets-icon ets-icon--svg\" [innerHTML]=\"svgIcon\"></span>\n      } @else {\n        <span\n          class=\"ets-icon\"\n          [ngClass]=\"iconClasses\"\n        >{{ displayIconText }}</span>\n      }\n    </button>\n  `,\n  styles: `\n    .ets-toggle-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      background: none;\n      border: none;\n      cursor: pointer;\n      padding: 8px;\n      border-radius: 50%;\n      transition: background-color 0.3s, color 0.3s;\n      color: inherit;\n      font-size: 1.25rem;\n      line-height: 1;\n    }\n    .ets-toggle-btn:hover {\n      background-color: rgba(128, 128, 128, 0.15);\n    }\n    .ets-icon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .ets-icon--svg {\n      line-height: 0;\n    }\n    .ets-icon--svg ::ng-deep svg {\n      width: 1.25rem;\n      height: 1.25rem;\n      fill: currentColor;\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ThemeToggleComponent implements OnInit, OnDestroy {\n  /** Icon font abbreviation (e.g. 'fas', 'material-icons', 'bi') */\n  @Input() iconFont?: IconFont;\n\n  /** Custom SVG markup (overrides iconFont if provided) */\n  @Input() svgIcon?: string;\n\n  /** Icon name for the first theme (default light) */\n  @Input() lightIcon?: string;\n\n  /** Icon name for the second theme (default dark) */\n  @Input() darkIcon?: string;\n\n  protected oppositeTheme = '';\n  protected iconClasses: Record<string, boolean> = {};\n  protected displayIconText = '';\n\n  private destroy$ = new Subject<void>();\n\n  constructor(\n    private themeService: ThemeService,\n    private cdr: ChangeDetectorRef,\n  ) {}\n\n  ngOnInit(): void {\n    this.updateState(this.themeService.currentTheme);\n    this.themeService.currentTheme$\n      .pipe(takeUntil(this.destroy$))\n      .subscribe((theme) => {\n        this.updateState(theme);\n        this.cdr.markForCheck();\n      });\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n\n  toggle(): void {\n    this.themeService.toggleTheme();\n  }\n\n  private updateState(currentTheme: string): void {\n    const [lightTheme, darkTheme] = this.themeService.themes;\n    const isLight = currentTheme === lightTheme;\n\n    this.oppositeTheme = currentTheme === lightTheme ? darkTheme : lightTheme;\n\n    const iconName = isLight\n      ? (this.darkIcon ?? 'fa-moon')\n      : (this.lightIcon ?? 'fa-sun');\n\n    const font = this.iconFont ?? 'fas';\n\n    if (font.startsWith('material')) {\n      this.iconClasses = { [font]: true };\n      this.displayIconText = iconName;\n    } else {\n      this.iconClasses = { [font]: true, [iconName]: true };\n      this.displayIconText = '';\n    }\n  }\n}\n","/*\r\n * Public API Surface of ngx-easy-theme-switcher\r\n */\r\n\r\nexport { ThemeService, THEME_CONFIG } from './lib/theme.service';\r\nexport type { ThemeConfig } from './lib/theme.service';\r\nexport { ThemeToggleComponent } from './lib/theme-toggle/theme-toggle.component';\r\nexport type { IconFont } from './lib/theme-toggle/theme-toggle.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.ThemeService"],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ngx-easy-theme-switcher" />
+export * from './public-api';

package/lib/theme-toggle/theme-toggle.component.d.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
+import { ThemeService } from '../theme.service';
+import * as i0 from "@angular/core";
+export type IconFont = 'fas' | 'far' | 'fal' | 'fab' | 'material-icons' | 'material-icons-outlined' | 'material-symbols-outlined' | 'bi' | 'pi' | 'ion-icon';
+export declare class ThemeToggleComponent implements OnInit, OnDestroy {
+    private themeService;
+    private cdr;
+    /** Icon font abbreviation (e.g. 'fas', 'material-icons', 'bi') */
+    iconFont?: IconFont;
+    /** Custom SVG markup (overrides iconFont if provided) */
+    svgIcon?: string;
+    /** Icon name for the first theme (default light) */
+    lightIcon?: string;
+    /** Icon name for the second theme (default dark) */
+    darkIcon?: string;
+    protected oppositeTheme: string;
+    protected iconClasses: Record<string, boolean>;
+    protected displayIconText: string;
+    private destroy$;
+    constructor(themeService: ThemeService, cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    toggle(): void;
+    private updateState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeToggleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ThemeToggleComponent, "ets-theme-toggle", never, { "iconFont": { "alias": "iconFont"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "lightIcon": { "alias": "lightIcon"; "required": false; }; "darkIcon": { "alias": "darkIcon"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/theme.service.d.ts

@@ -0,0 +1,33 @@
+import { InjectionToken } from '@angular/core';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export interface ThemeConfig {
+    /** Names of the two themes, e.g. ['light', 'dark'] */
+    themes?: [string, string];
+    /** CSS attribute/class to set on the document element */
+    attribute?: string;
+    /** Storage key for persisting theme preference */
+    storageKey?: string;
+    /** Default theme (index 0 or 1 from themes array) */
+    defaultTheme?: string;
+}
+export declare const THEME_CONFIG: InjectionToken<ThemeConfig>;
+export declare class ThemeService {
+    private config;
+    private currentThemeSubject;
+    currentTheme$: Observable<string>;
+    constructor(config?: ThemeConfig);
+    /** Get the current theme name */
+    get currentTheme(): string;
+    /** Get all available theme names */
+    get themes(): [string, string];
+    /** Toggle between the two configured themes */
+    toggleTheme(): void;
+    /** Set a specific theme by name */
+    setTheme(theme: string): void;
+    private applyTheme;
+    private getStoredTheme;
+    private storeTheme;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, [{ optional: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "ngx-easy-theme-switcher",
+  "version": "1.0.0",
+  "description": "A lightweight Angular service and component for seamless dark/light theme switching. Supports FontAwesome, Material Icons, Bootstrap Icons, custom SVG icons, and popular icon fonts out of the box. Persistent theme selection with localStorage.",
+  "keywords": [
+    "angular",
+    "theme",
+    "dark theme",
+    "utils",
+    "service",
+    "ng",
+    "typescript",
+    "theme-switcher",
+    "dark-mode",
+    "light-mode",
+    "themes",
+    "angular-library",
+    "dark",
+    "light",
+    "toggle",
+    "icon",
+    "fontawesome",
+    "material-icons",
+    "bootstrap-icons"
+  ],
+  "author": "Gennady Artamonov",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cyclon-b/ngx-easy-theme-switcher.git"
+  },
+  "peerDependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ngx-easy-theme-switcher.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/ngx-easy-theme-switcher.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,4 @@
+export { ThemeService, THEME_CONFIG } from './lib/theme.service';
+export type { ThemeConfig } from './lib/theme.service';
+export { ThemeToggleComponent } from './lib/theme-toggle/theme-toggle.component';
+export type { IconFont } from './lib/theme-toggle/theme-toggle.component';