npm - ngx-theme-stack - Versions diffs - 2.0.0 → 2.1.1 - Mend

ngx-theme-stack 2.0.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/README.md +133 -12
package/fesm2022/ngx-theme-stack.mjs +50 -32
package/fesm2022/ngx-theme-stack.mjs.map +1 -1
package/package.json +1 -1
package/schematics/ng-add/anti-flash.d.ts +2 -0
package/schematics/ng-add/anti-flash.js +53 -31
package/schematics/ng-add/anti-flash.js.map +1 -1
package/schematics/ng-add/app-config.js +5 -3
package/schematics/ng-add/app-config.js.map +1 -1
package/schematics/ng-add/constants.d.ts +1 -0
package/schematics/ng-add/constants.js +1 -0
package/schematics/ng-add/constants.js.map +1 -1
package/schematics/ng-add/index.js +89 -12
package/schematics/ng-add/index.js.map +1 -1
package/schematics/ng-add/schema.d.ts +2 -0
package/schematics/ng-add/schema.json +7 -2
package/schematics/ng-add/utils.d.ts +1 -6
package/schematics/ng-add/utils.js +11 -27
package/schematics/ng-add/utils.js.map +1 -1
package/schematics/sync/index.d.ts +0 -9
package/schematics/sync/index.js +208 -42
package/schematics/sync/index.js.map +1 -1
package/schematics/sync/schema.d.ts +2 -0
package/schematics/sync/schema.json +5 -0
package/types/ngx-theme-stack.d.ts +70 -31

package/README.md CHANGED Viewed

@@ -12,7 +12,7 @@ A simple and powerful headless theme manager for **Angular**. Built for performa
 - 🛠️ **Highly Customizable**: Support for custom themes, class prefixes, and configurable storage.
 - 🧱 **Modern Architecture**: Powered by Angular Signals for maximum reactivity and performance.
 - 🌍 **SSR Ready**: Safe to use in Server-Side Rendering environments.
-- 🚫 **Zero Flicker**: Includes an optimized anti-flash script to prevent theme jumps on load.
+- 🚫 **Zero Flicker**: Includes an optimized anti-flash script and the **Critters Trick** strategy to prevent theme jumps and network requests on load.
 ## 📦 Installation
@@ -31,12 +31,25 @@ When running `ng add`, you will be presented with two configuration options:
     - Initial theme: `system`.
     - Apply mode: `class` (adds the theme class to the `<html>` element).
     - Available themes: `['light', 'dark', 'system']`.
+    - **Strategy**: `critters` (Zero-flash via CSS inlining).
 2.  **Custom Mode**:
     - Choose which themes to include (e.g., if you have a `blue` or `high-contrast` theme).
     - Configure the default theme upon app startup.
     - Change the `localStorage` key where the theme choice is saved.
     - Decide how to apply themes: via classes (`class`), attributes (`data-theme`), or both.
+    - **Pick your strategy**: `critters` for modern SSR/SSG apps or `blocking` for standard CSS loading.
+## 🤖 What does `ng add` do for you?
+To provide a "Zero Config" experience, the installation command automates the following:
+1.  **`package.json`**: Adds a `"prebuild"` script that executes the synchronization automatically before every build.
+2.  **`angular.json`**:
+    - Adds `src/themes.css` to the global styles list.
+    - Configures the `inlineCritical` optimization based on your selected strategy.
+3.  **`index.html`**: Injects the marker and the blocking anti-flash script into the `<head>`.
+4.  **`themes.css`**: Creates a base file with selectors ready for you to define your variables.
 ## 🏗️ Architecture & Extensibility
@@ -64,6 +77,37 @@ For common use cases, we include three services with predefined logic:
 | **Angular 19**  | ✅ Stable |
 | **Angular 18**  | ✅ Stable |
+## ⚙️ Configuration
+The best way to configure the library is during installation, but you can also manually adjust the providers in your `app.config.ts`:
+```typescript
+import { provideThemeStack } from 'ngx-theme-stack';
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideThemeStack({
+      themes: ['light', 'dark', 'sunset'], // Your theme identifiers
+      defaultTheme: 'system',              // Initial fallback ('system' resolves via matchMedia)
+      mode: 'class',                       // 'class', 'attribute' or 'both'
+      strategy: 'critters',                // 'critters' (SSR) or 'blocking' (Standard SPA)
+      storageKey: 'ngx-theme-stack-theme'  // LocalStorage key
+    })
+  ]
+};
+```
+| Option | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `themes` | `string[]` | `['light', 'dark', 'system']` | List of supported theme identifiers. |
+| `defaultTheme` | `string` | `'system'` | Theme used on first visit or when no preference is saved. |
+| `mode` | `NgMode` | `'class'` | How the theme is applied: `class`, `attribute` (`data-theme`), or `both`. |
+| `strategy` | `NgStrategy`| `'critters'` | Anti-flash performance strategy: `critters` (inlined CSS) or `blocking`. |
+| `storageKey` | `string` | `'ngx-theme-stack-theme'` | Key used to persist theme preference in `localStorage`. |
+> [!IMPORTANT]
+> Whenever you update these settings, run `ng generate ngx-theme-stack:sync` to ensure your `index.html` is updated with the correct anti-flash script.
 ## 🛠️ Basic Usage
 ### CoreThemeService API
@@ -123,24 +167,101 @@ export class ThemeToggleComponent {
 ## 🎨 Styling
-By default, the library adds the theme name as a class or attribute to the `<html>` element. Use this in your global styles:
+The `ng add` command automatically creates a **`src/themes.css`** file in your project. This is where you should define your theme-specific CSS variables.
+The library targets the `<html>` element. Based on your configured `mode`, you should define your variables like this:
 ```css
-/* Using Classes (Default) */
-html.dark {
-  background-color: #121212;
-  color: white;
+/* src/themes.css */
+/* Using Classes (Default Mode) */
+:root,
+.light {
+  --bg-color: #ffffff;
+  --text-color: #333333;
 }
-html.light {
-  background-color: #ffffff;
-  color: #333;
+.dark {
+  --bg-color: #121212;
+  --text-color: #ffffff;
 }
-/* Using Attributes */
-[data-theme='blue'] {
-  --primary-color: #0000ff;
+.sunset {
+  --bg-color: #ff5f6d;
+  --text-color: #ffffff;
 }
+/* Using Attributes (Attribute Mode) */
+[data-theme='light'] {
+  --bg-color: #ffffff;
+  --text-color: #333333;
+}
+[data-theme='dark'] {
+  --bg-color: #121212;
+  --text-color: #ffffff;
+}
+[data-theme='sunset'] {
+  --bg-color: #ff5f6d;
+  --text-color: #ffffff;
+}
+```
+## 🌪️ Tailwind CSS v4 Integration
+If you are using **Tailwind CSS v4**, you can achieve a much cleaner HTML by mapping your `themes.css` variables to your Tailwind theme. This avoids cluttering your components with `dark:` variants.
+### 1. Configure Custom Variants
+In your main `styles.css`, define how Tailwind should detect your themes:
+```css
+/* src/styles.css */
+@import 'tailwindcss';
+/* If using Class mode */
+@custom-variant dark (&:where(.dark, .dark *));
+/* If using Attribute mode */
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+```
+### 2. Map Semantic Variables
+Extend your Tailwind theme using the variables defined in `themes.css`:
+```css
+@theme {
+  --color-main-bg: var(--bg-color);
+  --color-main-text: var(--text-color);
+  --color-card-bg: var(--card-bg);
+}
+```
+### 3. Usage in Components
+Now, instead of writing `<div class="bg-white dark:bg-black">`, you simply write:
+```html
+<div class="bg-main-bg text-main-text shadow-xl">
+  <!-- This automatically changes colors based on the active theme -->
+</div>
+```
+This approach keeps your UI code clean, semantic, and fully synchronized with `ngx-theme-stack`.
+## ⚡ Performance Strategies
+`ngx-theme-stack` offers two ways to handle the initial theme application to prevent that annoying white flash:
+1.  **Critters (Default)**: Best for SSR/Static sites. It uses hidden markers to trick the Angular builder into inlining all your theme CSS variables directly in the HTML `<head>`. Result: **Zero network requests for CSS variables.**
+2.  **Blocking**: Best for standard SPAs. It loads the `themes.css` file as a traditional blocking resource.
+The `ng-add` schematic helps you configure the right one automatically. You can always use the **Sync Command** to refresh your `index.html` if you change your configuration:
+```bash
+ng generate ngx-theme-stack:sync --project YOUR_PROJECT_NAME
 ```
 ## 📄 License

package/fesm2022/ngx-theme-stack.mjs CHANGED Viewed

@@ -58,6 +58,7 @@ const DEFAULT_NG_CONFIG = {
     defaultTheme: 'system',
     storageKey: 'ngx-theme-stack-theme',
     mode: 'class',
+    strategy: 'critters',
     themes: [...DEFAULT_THEMES],
 };
 // The token uses NgConfig<string> because Angular DI resolves types at runtime
@@ -71,6 +72,14 @@ const NGX_THEME_STACK_CONFIG = new InjectionToken('NGX_THEME_STACK_CONFIG', {
  *
  * Custom `themes` are **merged** with the built-in defaults
  * (`'light'`, `'dark'`, `'system'`), so you never lose the base themes.
+ *
+ * **Defaults:**
+ * - `themes`: `['light', 'dark', 'system']`
+ * - `defaultTheme`: `'system'`
+ * - `storageKey`: `'ngx-theme-stack-theme'`
+ * - `mode`: `'class'`
+ * - `strategy`: `'critters'`
  *
  * The type parameter `T` is **inferred automatically** from the `themes` array
  * when passed as a `const` — no need to specify it manually.
@@ -90,6 +99,13 @@ const NGX_THEME_STACK_CONFIG = new InjectionToken('NGX_THEME_STACK_CONFIG', {
  * provideThemeStack()
  *
  * @example
+ * // SSR/SSG Optimization — uses Critters inlining strategy
+ * provideThemeStack({
+ *   strategy: 'critters',
+ *   mode: 'class',
+ * })
+ *
+ * @example
  * // Closed union: TypeScript infers 'sepia' | 'ocean' from the array
  * provideThemeStack({
  *   themes: ['sepia', 'ocean'] as const,
@@ -101,7 +117,7 @@ const NGX_THEME_STACK_CONFIG = new InjectionToken('NGX_THEME_STACK_CONFIG', {
  * // Custom storage key and mode
  * provideThemeStack({
  *   storageKey: 'my-app-theme',
- *   mode: 'class',
+ *   mode: 'attribute',
  * })
  */
 function provideThemeStack(config = {}) {
@@ -150,7 +166,11 @@ class CoreThemeService {
     availableThemes = this.#config.themes;
     /** Internal Set for O(1) existence checks. */
     #validThemes = new Set(this.availableThemes);
-    /** The anti-flash class to remove from the host element. */
+    /**
+     * The anti-flash class to remove from the host element.
+     * Internal mechanism to bridge the gap between the blocking script's
+     * initial DOM state and Angular's first effect run.
+     */
     #antiFlashClass = null;
     // ── System preference ─────────────────────────────────────────────────────
     /** MediaQueryList for OS color scheme, created once and reused. Null in SSR. */
@@ -176,18 +196,17 @@ class CoreThemeService {
     /**
      * Whether the service has completed client-side initialization.
      *
-     * `false` during SSR and on the very first render pass. Becomes `true`
-     * immediately after the first browser render, once the real persisted theme
-     * has been read from `localStorage`.
+     * `false` during SSR and on the very first render pass before the initial theme
+     * is resolved from `localStorage`. Becomes `true` immediately after the
+     * first browser render pass.
      *
-     * Use this to guard any template logic that depends on `selectedTheme` or
-     * `resolvedTheme` to avoid an SSR hydration-mismatch flash: the server
-     * renders the default (`'system'`) while the browser may have a different
-     * value stored.
+     * **Important:** Guard template elements that display `selectedTheme()` or
+     * `resolvedTheme()` behind this signal to prevent hydration-mismatch flashes
+     * (e.g. if the server renders the default 'system' but the user has 'dark' stored).
      *
      * @example
      * ```html
-     * {{ themeService.isHydrated() ? selectedTheme() : '—' }}
+     * {{ theme.isHydrated() ? theme.selectedTheme() : '...' }}
      * ```
      */
     isHydrated = signal(false, ...(ngDevMode ? [{ debugName: "isHydrated" }] : /* istanbul ignore next */ []));
@@ -335,21 +354,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
  */
 class ThemeCycleService {
     #core = inject(CoreThemeService);
-    /** List of all configured themes for cycling. Defaults to ['light', 'dark', 'system']. */
+    /** List of all configured themes for cycling. Defaults to `['light', 'dark', 'system']`. */
     #cycle = this.#core.availableThemes;
     /** The theme explicitly selected by the user. May be `'system'`. */
     selectedTheme = this.#core.selectedTheme;
-    /** Resolved theme applied to the DOM. Always concrete — never `'system'`. */
+    /** Resolved theme currently applied to the DOM. Always concrete — never `'system'`. */
     resolvedTheme = this.#core.resolvedTheme;
-    /** Whether the currently applied theme is dark. */
+    /** Whether the currently applied theme is `'dark'`. */
     isDark = this.#core.isDark;
-    /** Whether the currently applied theme is light. */
+    /** Whether the currently applied theme is `'light'`. */
     isLight = this.#core.isLight;
-    /** Whether the currently applied theme is system. */
+    /** Whether the user has explicitly selected `'system'` preference. */
     isSystem = this.#core.isSystem;
     /**
-     * Whether the service has completed client-side initialization.
-     * `false` during SSR. Becomes `true` after the first browser render.
+     * Whether the service has completed client-side initialization and
+     * resolved the real persisted theme. Use to prevent hydration flashes.
      */
     isHydrated = this.#core.isHydrated.asReadonly();
     /**
@@ -382,21 +401,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
  */
 class ThemeSelectService {
     #core = inject(CoreThemeService);
-    /** List of all configured themes. Defaults to ['light', 'dark', 'system']. */
+    /** List of all configured themes. Defaults to `['light', 'dark', 'system']`. */
     availableThemes = this.#core.availableThemes;
     /** The theme explicitly selected by the user. May be `'system'`. */
     selectedTheme = this.#core.selectedTheme;
-    /** Resolved theme applied to the DOM. Always concrete — never `'system'`. */
+    /** Resolved theme currently applied to the DOM. Always concrete — never `'system'`. */
     resolvedTheme = this.#core.resolvedTheme;
-    /** Whether the currently applied theme is dark. */
+    /** Whether the currently applied theme is `'dark'`. */
     isDark = this.#core.isDark;
-    /** Whether the currently applied theme is light. */
+    /** Whether the currently applied theme is `'light'`. */
     isLight = this.#core.isLight;
-    /** Whether the currently applied theme is system. */
+    /** Whether the user has explicitly selected `'system'` preference. */
     isSystem = this.#core.isSystem;
     /**
-     * Whether the service has completed client-side initialization.
-     * `false` during SSR. Becomes `true` after the first browser render.
+     * Whether the service has completed client-side initialization and
+     * resolved the real persisted theme. Use to prevent hydration flashes.
      */
     isHydrated = this.#core.isHydrated.asReadonly();
     /**
@@ -424,20 +443,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
  */
 class ThemeToggleService {
     #core = inject(CoreThemeService);
-    /** Resolved theme applied to the DOM. Always concrete — never `'system'`. */
+    /** Resolved theme currently applied to the DOM. Always concrete — never `'system'`. */
     resolvedTheme = this.#core.resolvedTheme;
+    /** The theme explicitly selected by the user. May be `'system'`. */
     selectedTheme = this.#core.selectedTheme;
-    /** Whether the currently applied theme is dark. */
+    /** Whether the currently applied theme is `'dark'`. */
     isDark = this.#core.isDark;
-    /** Whether the currently applied theme is light. */
+    /** Whether the currently applied theme is `'light'`. */
     isLight = this.#core.isLight;
-    /** Whether the currently applied theme is system. */
+    /** Whether the user has explicitly selected `'system'` preference. */
     isSystem = this.#core.isSystem;
     /**
-     * Whether the service has completed client-side initialization.
-     * `false` during SSR. Becomes `true` after the first browser render.
-     * Guard any template logic that shows `selectedTheme` or `resolvedTheme`
-     * behind this signal to avoid a hydration-mismatch flash.
+     * Whether the service has completed client-side initialization and
+     * resolved the real persisted theme. Use to prevent hydration flashes.
      */
     isHydrated = this.#core.isHydrated.asReadonly();
     /**

package/fesm2022/ngx-theme-stack.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ngx-theme-stack.mjs","sources":["../../../projects/ngx-theme-stack/src/lib/errors.ts","../../../projects/ngx-theme-stack/src/lib/types.ts","../../../projects/ngx-theme-stack/src/lib/config/index.ts","../../../projects/ngx-theme-stack/src/lib/core/core-theme.service.ts","../../../projects/ngx-theme-stack/src/lib/services/theme-cycle.service.ts","../../../projects/ngx-theme-stack/src/lib/services/theme-select.service.ts","../../../projects/ngx-theme-stack/src/lib/services/theme-toggle.service.ts","../../../projects/ngx-theme-stack/src/public-api.ts","../../../projects/ngx-theme-stack/src/ngx-theme-stack.ts"],"sourcesContent":["/*\n Base error class for `ngx-theme-stack`.\n \n Thrown when the library configuration is invalid.\n * Consumers can use `instanceof NgxThemeStackError` to catch only\n * errors originating from this library.\n \n @example\n * try {\n * bootstrapApplication(AppComponent, appConfig);\n * } catch (e) {\n * if (e instanceof NgxThemeStackError) {\n * console.error('Bad ngx-theme-stack config:', e.message);\n * }\n * }\n /\nexport class NgxThemeStackError extends Error {\n override readonly name = 'NgxThemeStackError';\n\n constructor(message: string) {\n super(`[ngx-theme-stack] ${message}`);\n // Restore prototype chain (required when targeting ES5 or older)\n Object.setPrototypeOf(this, new.target.prototype);\n }\n}\n","/\n Runtime list of built-in themes.\n \n Lives here (and not in config/index.ts) because it defines a type:\n * config/index.ts already imports from types.ts, so placing DEFAULT_THEMES\n * here avoids any circular dependency.\n \n ⚠ KEEP IN SYNC with the duplicate in:\n * projects/ngx-theme-stack/schematics/ng-add/constants.ts → DEFAULT_THEMES\n \n Schematics compile to CommonJS and cannot import from this ESM file,\n * so the values are intentionally duplicated. Change both at the same time.\n /\nexport const DEFAULT_THEMES = ['system', 'light', 'dark'] as const;\n\n/* Literal union of built-in themes: `'system' \| 'light' \| 'dark'`. /\nexport type DefaultNgTheme = (typeof DEFAULT_THEMES)[number];\n\n/\n Theme type.\n \n - Without `T`: open union — accepts any `string` with IDE autocomplete\n * hints for the built-in themes (`'system' \| 'light' \| 'dark'`).\n * - With `T`: closed union — exactly `DefaultNgTheme \| T`, enabling\n * full type-safety for custom theme sets.\n \n @example\n * NgTheme // 'system' \| 'light' \| 'dark' \| (string & {})\n * NgTheme<'sepia'> // 'system' \| 'light' \| 'dark' \| 'sepia'\n /\nexport type NgTheme<T extends string = string & {}> = DefaultNgTheme \| T;\n\n/\n Resolved theme — always `'light'` or `'dark'`, never `'system'`.\n * Represents the value that comes from `matchMedia`, not user selection.\n /\nexport type NgSystemTheme = Exclude<DefaultNgTheme, 'system'>;\n\nexport type NgMode = 'attribute' \| 'class' \| 'both';\n\n/\n Library configuration.\n \n @typeParam T - Custom theme literals. Defaults to open `string`, preserving\n * backwards compatibility. Pass specific literals (e.g. `'sepia' \| 'ocean'`)\n * via {@link provideThemeStack} to get a closed, type-safe theme union.\n /\nexport interface NgConfig<T extends string = string & {}> {\n defaultTheme: NgTheme<T>;\n storageKey: string;\n mode: NgMode;\n themes: NgTheme<T>[];\n}\n","import { InjectionToken } from '@angular/core';\nimport { NgxThemeStackError } from '../errors';\nimport { DEFAULT_THEMES, DefaultNgTheme, NgConfig } from '../types';\n\n/\n ⚠ ATTENTION: SHARED CONFIGURATION VALUES\n \n These defaults MUST match the schematic defaults in:\n * projects/ngx-theme-stack/schematics/ng-add/constants.ts → DEFAULTS\n \n Schematics compile to CommonJS and cannot import from this ESM file,\n * so the values are intentionally duplicated. Change both at the same time.\n \n If you change defaults here, also update:\n * schematics/ng-add/constants.ts → DEFAULTS + DEFAULT_THEMES\n /\n\nexport const DEFAULT_NG_CONFIG = {\n defaultTheme: 'system',\n storageKey: 'ngx-theme-stack-theme',\n mode: 'class',\n themes: [...DEFAULT_THEMES],\n} satisfies NgConfig;\n\n// The token uses NgConfig<string> because Angular DI resolves types at runtime\n// and cannot carry generic parameters. Type-safety is enforced at the\n// provideThemeStack() call site instead.\nexport const NGX_THEME_STACK_CONFIG = new InjectionToken<NgConfig<string>>(\n 'NGX_THEME_STACK_CONFIG',\n {\n factory: () => DEFAULT_NG_CONFIG,\n },\n);\n\n/\n Provides Theme Stack configuration to Angular's DI system.\n \n Custom `themes` are merged with the built-in defaults\n * (`'light'`, `'dark'`, `'system'`), so you never lose the base themes.\n \n The type parameter `T` is inferred automatically from the `themes` array\n * when passed as a `const` — no need to specify it manually.\n \n @typeParam T - Custom theme string literals, inferred from the `themes` option.\n \n @param config - Optional partial configuration. Omitted fields fall back to\n * {@link DEFAULT_NG_CONFIG}.\n \n @throws {@link NgxThemeStackError}\n * - If any entry in `themes` is an empty or whitespace-only string.\n * - If `defaultTheme` is not present in the resolved (merged) themes array.\n * - If `storageKey` is an empty or whitespace-only string.\n \n @example\n * // Default — uses built-in themes and sensible defaults\n * provideThemeStack()\n \n @example\n * // Closed union: TypeScript infers 'sepia' \| 'ocean' from the array\n * provideThemeStack({\n * themes: ['sepia', 'ocean'] as const,\n * defaultTheme: 'sepia', // ✅ in resolved themes\n * // defaultTheme: 'nope', // ❌ throws NgxThemeStackError at runtime\n * })\n \n @example\n * // Custom storage key and mode\n * provideThemeStack({\n * storageKey: 'my-app-theme',\n * mode: 'class',\n * })\n /\nexport function provideThemeStack<const T extends string = DefaultNgTheme>(\n config: Partial<NgConfig<T>> = {},\n) {\n config.themes?.forEach((t) => {\n if (t.trim() === '') throw new NgxThemeStackError('Theme cannot be empty or whitespace.');\n });\n\n const themes = config.themes\n ? Array.from(new Set([...DEFAULT_NG_CONFIG.themes, ...config.themes]))\n : DEFAULT_NG_CONFIG.themes;\n\n if (config.defaultTheme && !(themes as string[]).includes(config.defaultTheme as string)) {\n throw new NgxThemeStackError(\n `\"defaultTheme\" must be one of the resolved themes: [${themes.join(', ')}].`,\n );\n }\n\n if (config.storageKey !== undefined && config.storageKey.trim() === '') {\n throw new NgxThemeStackError('\"storageKey\" cannot be empty or whitespace.');\n }\n\n return {\n provide: NGX_THEME_STACK_CONFIG,\n useValue: {\n ...DEFAULT_NG_CONFIG,\n ...config,\n themes,\n } as NgConfig<string>,\n };\n}\n","import { isPlatformBrowser } from '@angular/common';\nimport {\n afterNextRender,\n computed,\n DestroyRef,\n DOCUMENT,\n effect,\n inject,\n Injectable,\n PLATFORM_ID,\n signal,\n} from '@angular/core';\nimport { NGX_THEME_STACK_CONFIG } from '../config';\nimport { NgxThemeStackError } from '../errors';\nimport { NgSystemTheme, NgTheme } from '../types';\n\n/\n Core service for managing the application's color theme.\n \n Handles theme persistence, system preference detection, and DOM updates.\n * Supports built-in themes ('dark', 'light', 'system') and custom extensions.\n /\n@Injectable({ providedIn: 'root' })\nexport class CoreThemeService {\n // ── Dependencies ──────────────────────────────────────────────────────────\n\n readonly #config = inject(NGX_THEME_STACK_CONFIG);\n readonly #destroyRef = inject(DestroyRef);\n readonly #document = inject(DOCUMENT);\n readonly #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n // ── Theme configuration ───────────────────────────────────────────────────\n\n /\n The initial stored theme read from localStorage.\n * This is used to determine the initial theme of the application.\n /\n readonly #initialStoredTheme = this.readStoredTheme();\n\n /* List of available themes for Select/Cycle services. Defaults to ['system', 'light', 'dark']. /\n readonly availableThemes = this.#config.themes;\n\n /* Internal Set for O(1) existence checks. /\n readonly #validThemes = new Set<NgTheme>(this.availableThemes);\n\n /* The anti-flash class to remove from the host element. /\n #antiFlashClass: string \| null = null;\n\n // ── System preference ─────────────────────────────────────────────────────\n\n /* MediaQueryList for OS color scheme, created once and reused. Null in SSR. /\n readonly #mediaQuery: MediaQueryList \| null = this.#isBrowser\n ? (this.#document.defaultView?.matchMedia('(prefers-color-scheme: dark)') ?? null)\n : null;\n\n readonly #systemPreference = signal<NgSystemTheme>(this.resolveSystemPreference());\n\n // ── Theme state ───────────────────────────────────────────────────────────\n\n readonly #selectedTheme = signal<NgTheme>(this.resolveInitialTheme());\n\n /* The theme explicitly selected by the user. May be `'system'`. /\n readonly selectedTheme = this.#selectedTheme.asReadonly();\n\n /* Resolved theme applied to the DOM. Always `'dark'` or `'light'` (or custom) — never `'system'`. /\n readonly resolvedTheme = computed(() => {\n const theme = this.#selectedTheme();\n return theme === 'system' ? this.#systemPreference() : theme;\n });\n\n /* Whether the currently applied theme is dark. /\n readonly isDark = computed(() => this.resolvedTheme() === 'dark');\n\n /* Whether the currently applied theme is light. /\n readonly isLight = computed(() => this.resolvedTheme() === 'light');\n\n /* Whether the currently applied theme is system. /\n readonly isSystem = computed(() => this.selectedTheme() === 'system');\n\n /\n Whether the service has completed client-side initialization.\n \n `false` during SSR and on the very first render pass. Becomes `true`\n * immediately after the first browser render, once the real persisted theme\n * has been read from `localStorage`.\n \n Use this to guard any template logic that depends on `selectedTheme` or\n * `resolvedTheme` to avoid an SSR hydration-mismatch flash: the server\n * renders the default (`'system'`) while the browser may have a different\n * value stored.\n \n @example\n * ```html\n * {{ themeService.isHydrated() ? selectedTheme() : '—' }}\n * ```\n /\n readonly isHydrated = signal(false);\n\n // ── Event handler ─────────────────────────────────────────────────────────\n\n readonly #onSystemPreferenceChange = () =>\n this.#systemPreference.set(this.resolveSystemPreference());\n\n // ── Lifecycle ─────────────────────────────────────────────────────────────\n\n constructor() {\n this.captureAntiFlashClass();\n\n if (this.#isBrowser && this.#selectedTheme() === 'system') {\n this.startSystemThemeListener();\n }\n\n effect(() => this.applyThemeToDOM(this.resolvedTheme()));\n afterNextRender(() => this.isHydrated.set(true));\n this.#destroyRef.onDestroy(() => this.stopSystemThemeListener());\n }\n\n // ── Public API ────────────────────────────────────────────────────────────\n\n /\n Changes the active theme.\n \n Persists the choice explicitly so that switching e.g. from `'system'` to\n * `'light'` is saved even when the resolved theme did not change\n * (system preference was already `'light'`).\n \n @param theme - The theme to apply: `'dark'`, `'light'`, `'system'`, or a custom theme name.\n * @throws If `theme` is not a valid theme according to library configuration.\n /\n public setTheme(theme: NgTheme): void {\n if (!this.#validThemes.has(theme)) {\n throw new NgxThemeStackError(\n `Invalid theme: \"${theme}\". Valid values are: ${[...this.#validThemes].join(', ')}.`,\n );\n }\n if (!this.#isBrowser) return;\n if (theme === this.#selectedTheme()) return;\n if (theme === 'system') {\n this.#systemPreference.set(this.resolveSystemPreference());\n this.startSystemThemeListener();\n } else {\n this.stopSystemThemeListener();\n }\n\n this.#selectedTheme.set(theme);\n this.saveTheme(theme);\n }\n\n // ── Private ───────────────────────────────────────────────────────────────\n\n private resolveSystemPreference(): NgSystemTheme {\n return this.#mediaQuery?.matches ? 'dark' : 'light';\n }\n\n private resolveInitialTheme(): NgTheme {\n const theme = this.#initialStoredTheme;\n if (theme && this.#validThemes.has(theme as NgTheme)) {\n return theme as NgTheme;\n }\n return this.#config.defaultTheme;\n }\n\n private startSystemThemeListener(): void {\n if (!this.#mediaQuery) return;\n this.stopSystemThemeListener();\n this.#mediaQuery.addEventListener('change', this.#onSystemPreferenceChange);\n }\n\n private stopSystemThemeListener(): void {\n this.#mediaQuery?.removeEventListener('change', this.#onSystemPreferenceChange);\n }\n\n private applyThemeToDOM(theme: NgTheme): void {\n if (!this.#isBrowser) return;\n\n const host = this.#document.documentElement;\n\n if (this.#antiFlashClass) {\n host.classList.remove(this.#antiFlashClass);\n this.#antiFlashClass = null;\n }\n\n const { mode } = this.#config;\n\n if (mode === 'attribute' \|\| mode === 'both') {\n this.applyThemeAttribute(host, theme);\n }\n\n if (mode === 'class' \|\| mode === 'both') {\n this.applyThemeClasses(host, theme);\n }\n\n this.applyColorSchemeHint(host, theme);\n }\n\n private applyThemeAttribute(host: HTMLElement, theme: NgTheme): void {\n host.setAttribute('data-theme', theme);\n }\n\n private applyThemeClasses(host: HTMLElement, theme: NgTheme): void {\n host.classList.remove(...this.availableThemes);\n host.classList.add(theme);\n }\n\n private applyColorSchemeHint(host: HTMLElement, theme: NgTheme): void {\n if (theme === 'dark' \|\| theme === 'light') {\n host.style.setProperty('color-scheme', theme);\n return;\n }\n\n host.style.removeProperty('color-scheme');\n }\n\n private captureAntiFlashClass(): void {\n if (!this.#isBrowser \|\| !this.#initialStoredTheme) return;\n\n if (!/^[a-zA-Z][a-zA-Z0-9_-]$/.test(this.#initialStoredTheme)) {\n this.#antiFlashClass = null;\n return;\n }\n\n if (this.#initialStoredTheme === 'system') {\n this.#antiFlashClass = this.resolveSystemPreference();\n return;\n }\n\n this.#antiFlashClass = this.#initialStoredTheme;\n }\n\n private readStoredTheme(): string \| null {\n if (!this.#isBrowser) return null;\n\n try {\n return localStorage.getItem(this.#config.storageKey);\n } catch (e) {\n console.warn('[ngx-theme-stack] Could not read theme from localStorage.', e);\n return null;\n }\n }\n\n private saveTheme(theme: NgTheme): void {\n if (!this.#isBrowser) return;\n\n try {\n localStorage.setItem(this.#config.storageKey, theme);\n } catch (e) {\n console.warn('[ngx-theme-stack] Could not save theme to localStorage.', e);\n }\n }\n}\n","import { inject, Injectable } from '@angular/core';\nimport { CoreThemeService } from '../core/core-theme.service';\n\n/*\n Convenience service for cycling through themes in a fixed order.\n \n Default cycle: `'system'` → `'light'` → `'dark'` → `'system'` → ...\n \n Use this when you want to offer users a single button that rotates\n * through all available theme options.\n /\n@Injectable({ providedIn: 'root' })\nexport class ThemeCycleService {\n readonly #core = inject(CoreThemeService);\n\n /* List of all configured themes for cycling. Defaults to ['light', 'dark', 'system']. /\n readonly #cycle = this.#core.availableThemes;\n\n /* The theme explicitly selected by the user. May be `'system'`. /\n readonly selectedTheme = this.#core.selectedTheme;\n\n /* Resolved theme applied to the DOM. Always concrete — never `'system'`. /\n readonly resolvedTheme = this.#core.resolvedTheme;\n\n /* Whether the currently applied theme is dark. /\n readonly isDark = this.#core.isDark;\n\n /* Whether the currently applied theme is light. /\n readonly isLight = this.#core.isLight;\n\n /* Whether the currently applied theme is system. /\n readonly isSystem = this.#core.isSystem;\n\n /\n Whether the service has completed client-side initialization.\n * `false` during SSR. Becomes `true` after the first browser render.\n /\n readonly isHydrated = this.#core.isHydrated.asReadonly();\n\n /\n Advances to the next theme in the cycle.\n \n Cycle order is determined by the configured `themes` property in `NgConfig`.\n \n If the current theme is not found in the cycle (e.g. set externally),\n * the cycle restarts from the first theme.\n /\n cycle(): void {\n const current = this.#core.selectedTheme();\n const index = this.#cycle.indexOf(current);\n const next = this.#cycle[(index + 1) % this.#cycle.length];\n this.#core.setTheme(next);\n }\n}\n","import { inject, Injectable } from '@angular/core';\nimport { CoreThemeService } from '../core/core-theme.service';\nimport { NgTheme } from '../types';\n\n/\n Convenience service for selecting a theme from a list.\n \n Use this when you want to bind a `<select>` or a group of radio/tab\n * buttons to the full set of available themes.\n /\n@Injectable({ providedIn: 'root' })\nexport class ThemeSelectService {\n readonly #core = inject(CoreThemeService);\n\n /* List of all configured themes. Defaults to ['light', 'dark', 'system']. /\n readonly availableThemes = this.#core.availableThemes;\n\n /* The theme explicitly selected by the user. May be `'system'`. /\n readonly selectedTheme = this.#core.selectedTheme;\n\n /* Resolved theme applied to the DOM. Always concrete — never `'system'`. /\n readonly resolvedTheme = this.#core.resolvedTheme;\n\n /* Whether the currently applied theme is dark. /\n readonly isDark = this.#core.isDark;\n\n /* Whether the currently applied theme is light. /\n readonly isLight = this.#core.isLight;\n\n /* Whether the currently applied theme is system. /\n readonly isSystem = this.#core.isSystem;\n\n /\n Whether the service has completed client-side initialization.\n * `false` during SSR. Becomes `true` after the first browser render.\n /\n readonly isHydrated = this.#core.isHydrated.asReadonly();\n\n /\n Applies the given theme.\n \n @param theme - The theme to apply: `'dark'`, `'light'`, `'system'`, or custom.\n * @throws If `theme` is not a valid theme according to library configuration.\n /\n select(theme: NgTheme): void {\n this.#core.setTheme(theme);\n }\n}\n","import { inject, Injectable } from '@angular/core';\nimport { CoreThemeService } from '../core/core-theme.service';\n\n/\n Convenience service for toggling between `'dark'` and `'light'`.\n \n Use this when you only need a simple on/off switch and do not\n * need to manage `'system'` or cycle through themes.\n /\n@Injectable({ providedIn: 'root' })\nexport class ThemeToggleService {\n readonly #core = inject(CoreThemeService);\n\n /* Resolved theme applied to the DOM. Always concrete — never `'system'`. /\n readonly resolvedTheme = this.#core.resolvedTheme;\n\n readonly selectedTheme = this.#core.selectedTheme;\n\n /* Whether the currently applied theme is dark. /\n readonly isDark = this.#core.isDark;\n\n /* Whether the currently applied theme is light. /\n readonly isLight = this.#core.isLight;\n\n /* Whether the currently applied theme is system. /\n readonly isSystem = this.#core.isSystem;\n\n /\n Whether the service has completed client-side initialization.\n * `false` during SSR. Becomes `true` after the first browser render.\n * Guard any template logic that shows `selectedTheme` or `resolvedTheme`\n * behind this signal to avoid a hydration-mismatch flash.\n /\n readonly isHydrated = this.#core.isHydrated.asReadonly();\n\n /\n Toggles between `'dark'` and `'light'`.\n \n If the selected theme is explicitly `'dark'`, switches to `'light'`.\n * Otherwise (including `'system'`), switches to `'dark'`.\n /\n toggle(): void {\n const next = this.#core.resolvedTheme() === 'dark' ? 'light' : 'dark';\n this.#core.setTheme(next);\n }\n}\n","/\n * Public API Surface of ngx-theme-stack\n /\n\nexport from './lib/core/core-theme.service';\nexport * from './lib/config';\nexport * from './lib/services/theme-cycle.service';\nexport * from './lib/services/theme-select.service';\nexport * from './lib/services/theme-toggle.service';\nexport * from './lib/types';\nexport * from './lib/errors';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ngx-theme-stack.mjs","sources":["../../../projects/ngx-theme-stack/src/lib/errors.ts","../../../projects/ngx-theme-stack/src/lib/types.ts","../../../projects/ngx-theme-stack/src/lib/config/index.ts","../../../projects/ngx-theme-stack/src/lib/core/core-theme.service.ts","../../../projects/ngx-theme-stack/src/lib/services/theme-cycle.service.ts","../../../projects/ngx-theme-stack/src/lib/services/theme-select.service.ts","../../../projects/ngx-theme-stack/src/lib/services/theme-toggle.service.ts","../../../projects/ngx-theme-stack/src/public-api.ts","../../../projects/ngx-theme-stack/src/ngx-theme-stack.ts"],"sourcesContent":["/*\n Base error class for `ngx-theme-stack`.\n \n Thrown when the library configuration is invalid.\n * Consumers can use `instanceof NgxThemeStackError` to catch only\n * errors originating from this library.\n \n @example\n * try {\n * bootstrapApplication(AppComponent, appConfig);\n * } catch (e) {\n * if (e instanceof NgxThemeStackError) {\n * console.error('Bad ngx-theme-stack config:', e.message);\n * }\n * }\n /\nexport class NgxThemeStackError extends Error {\n override readonly name = 'NgxThemeStackError';\n\n constructor(message: string) {\n super(`[ngx-theme-stack] ${message}`);\n // Restore prototype chain (required when targeting ES5 or older)\n Object.setPrototypeOf(this, new.target.prototype);\n }\n}\n","/\n Runtime list of built-in themes.\n \n Lives here (and not in config/index.ts) because it defines a type:\n * config/index.ts already imports from types.ts, so placing DEFAULT_THEMES\n * here avoids any circular dependency.\n \n ⚠ KEEP IN SYNC with the duplicate in:\n * projects/ngx-theme-stack/schematics/ng-add/constants.ts → DEFAULT_THEMES\n \n Schematics compile to CommonJS and cannot import from this ESM file,\n * so the values are intentionally duplicated. Change both at the same time.\n /\nexport const DEFAULT_THEMES = ['system', 'light', 'dark'] as const;\n\n/* Literal union of built-in themes: `'system' \| 'light' \| 'dark'`. /\nexport type DefaultNgTheme = (typeof DEFAULT_THEMES)[number];\n\n/\n Theme type.\n \n - Without `T`: open union — accepts any `string` with IDE autocomplete\n * hints for the built-in themes (`'system' \| 'light' \| 'dark'`).\n * - With `T`: closed union — exactly `DefaultNgTheme \| T`, enabling\n * full type-safety for custom theme sets.\n \n @example\n * NgTheme // 'system' \| 'light' \| 'dark' \| (string & {})\n * NgTheme<'sepia'> // 'system' \| 'light' \| 'dark' \| 'sepia'\n /\nexport type NgTheme<T extends string = string & {}> = DefaultNgTheme \| T;\n\n/\n Resolved theme — always `'light'` or `'dark'`, never `'system'`.\n * Represents the value that comes from `matchMedia`, not user selection.\n /\nexport type NgSystemTheme = Exclude<DefaultNgTheme, 'system'>;\n\n/\n Theme application mode.\n * - `'attribute'`: sets `data-theme` attribute on `<html>`\n * - `'class'`: adds theme class to `<html>`\n * - `'both'`: uses both attribute and class\n /\nexport type NgMode = 'attribute' \| 'class' \| 'both';\n\n/\n Theme application strategy.\n * - `'blocking'`: theme CSS is loaded synchronously before rendering\n * - `'critters'`: theme CSS is inlined using Critters for SSR/SSG\n /\nexport type NgStrategy = 'blocking' \| 'critters';\n\n/\n Library configuration.\n \n @typeParam T - Custom theme literals. Defaults to open `string`, preserving\n * backwards compatibility. Pass specific literals (e.g. `'sepia' \| 'ocean'`)\n * via {@link provideThemeStack} to get a closed, type-safe theme union.\n /\nexport interface NgConfig<T extends string = string & {}> {\n /* The theme to use on first visit or when no preference is saved. Default: 'system'. /\n defaultTheme: NgTheme<T>;\n\n /* Key used to persist theme preference in localStorage. Default: 'ngx-theme-stack-theme'. /\n storageKey: string;\n\n /* \n * How the theme should be applied to the document (via class, attribute or both). \n * Default: 'class'.\n /\n mode: NgMode;\n\n /* \n * Performance strategy for anti-flash. \n * Use 'critters' for SSG/SSR builds with inlined CSS, 'blocking' for standard CSS files.\n * Default: 'critters'.\n /\n strategy: NgStrategy;\n\n /* List of supported theme identifiers. Default: ['light', 'dark', 'system']. /\n themes: NgTheme<T>[];\n}\n","import { InjectionToken } from '@angular/core';\nimport { NgxThemeStackError } from '../errors';\nimport { DEFAULT_THEMES, DefaultNgTheme, NgConfig } from '../types';\n\n/\n ⚠ ATTENTION: SHARED CONFIGURATION VALUES\n \n These defaults MUST match the schematic defaults in:\n * projects/ngx-theme-stack/schematics/ng-add/constants.ts → DEFAULTS\n \n Schematics compile to CommonJS and cannot import from this ESM file,\n * so the values are intentionally duplicated. Change both at the same time.\n \n If you change defaults here, also update:\n * schematics/ng-add/constants.ts → DEFAULTS + DEFAULT_THEMES\n /\n\nexport const DEFAULT_NG_CONFIG = {\n defaultTheme: 'system',\n storageKey: 'ngx-theme-stack-theme',\n mode: 'class',\n strategy: 'critters',\n themes: [...DEFAULT_THEMES],\n} satisfies NgConfig;\n\n// The token uses NgConfig<string> because Angular DI resolves types at runtime\n// and cannot carry generic parameters. Type-safety is enforced at the\n// provideThemeStack() call site instead.\nexport const NGX_THEME_STACK_CONFIG = new InjectionToken<NgConfig<string>>(\n 'NGX_THEME_STACK_CONFIG',\n {\n factory: () => DEFAULT_NG_CONFIG,\n },\n);\n\n/\n Provides Theme Stack configuration to Angular's DI system.\n \n Custom `themes` are merged with the built-in defaults\n * (`'light'`, `'dark'`, `'system'`), so you never lose the base themes.\n \n Defaults:\n * - `themes`: `['light', 'dark', 'system']`\n * - `defaultTheme`: `'system'`\n * - `storageKey`: `'ngx-theme-stack-theme'`\n * - `mode`: `'class'`\n * - `strategy`: `'critters'`\n\n \n The type parameter `T` is inferred automatically from the `themes` array\n * when passed as a `const` — no need to specify it manually.\n \n @typeParam T - Custom theme string literals, inferred from the `themes` option.\n \n @param config - Optional partial configuration. Omitted fields fall back to\n * {@link DEFAULT_NG_CONFIG}.\n \n @throws {@link NgxThemeStackError}\n * - If any entry in `themes` is an empty or whitespace-only string.\n * - If `defaultTheme` is not present in the resolved (merged) themes array.\n * - If `storageKey` is an empty or whitespace-only string.\n \n @example\n * // Default — uses built-in themes and sensible defaults\n * provideThemeStack()\n \n @example\n * // SSR/SSG Optimization — uses Critters inlining strategy\n * provideThemeStack({\n * strategy: 'critters',\n * mode: 'class',\n * })\n \n @example\n * // Closed union: TypeScript infers 'sepia' \| 'ocean' from the array\n * provideThemeStack({\n * themes: ['sepia', 'ocean'] as const,\n * defaultTheme: 'sepia', // ✅ in resolved themes\n * // defaultTheme: 'nope', // ❌ throws NgxThemeStackError at runtime\n * })\n \n @example\n * // Custom storage key and mode\n * provideThemeStack({\n * storageKey: 'my-app-theme',\n * mode: 'attribute',\n * })\n /\nexport function provideThemeStack<const T extends string = DefaultNgTheme>(\n config: Partial<NgConfig<T>> = {},\n) {\n config.themes?.forEach((t) => {\n if (t.trim() === '') throw new NgxThemeStackError('Theme cannot be empty or whitespace.');\n });\n\n const themes = config.themes\n ? Array.from(new Set([...DEFAULT_NG_CONFIG.themes, ...config.themes]))\n : DEFAULT_NG_CONFIG.themes;\n\n if (config.defaultTheme && !(themes as string[]).includes(config.defaultTheme as string)) {\n throw new NgxThemeStackError(\n `\"defaultTheme\" must be one of the resolved themes: [${themes.join(', ')}].`,\n );\n }\n\n if (config.storageKey !== undefined && config.storageKey.trim() === '') {\n throw new NgxThemeStackError('\"storageKey\" cannot be empty or whitespace.');\n }\n\n return {\n provide: NGX_THEME_STACK_CONFIG,\n useValue: {\n ...DEFAULT_NG_CONFIG,\n ...config,\n themes,\n } as NgConfig<string>,\n };\n}\n","import { isPlatformBrowser } from '@angular/common';\nimport {\n afterNextRender,\n computed,\n DestroyRef,\n DOCUMENT,\n effect,\n inject,\n Injectable,\n PLATFORM_ID,\n signal,\n} from '@angular/core';\nimport { NGX_THEME_STACK_CONFIG } from '../config';\nimport { NgxThemeStackError } from '../errors';\nimport { NgSystemTheme, NgTheme } from '../types';\n\n/\n Core service for managing the application's color theme.\n \n Handles theme persistence, system preference detection, and DOM updates.\n * Supports built-in themes ('dark', 'light', 'system') and custom extensions.\n /\n@Injectable({ providedIn: 'root' })\nexport class CoreThemeService {\n // ── Dependencies ──────────────────────────────────────────────────────────\n\n readonly #config = inject(NGX_THEME_STACK_CONFIG);\n readonly #destroyRef = inject(DestroyRef);\n readonly #document = inject(DOCUMENT);\n readonly #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n // ── Theme configuration ───────────────────────────────────────────────────\n\n /\n The initial stored theme read from localStorage.\n * This is used to determine the initial theme of the application.\n /\n readonly #initialStoredTheme = this.readStoredTheme();\n\n /* List of available themes for Select/Cycle services. Defaults to ['system', 'light', 'dark']. /\n readonly availableThemes = this.#config.themes;\n\n /* Internal Set for O(1) existence checks. /\n readonly #validThemes = new Set<NgTheme>(this.availableThemes);\n\n /\n The anti-flash class to remove from the host element.\n * Internal mechanism to bridge the gap between the blocking script's\n * initial DOM state and Angular's first effect run.\n /\n #antiFlashClass: string \| null = null;\n\n // ── System preference ─────────────────────────────────────────────────────\n\n /* MediaQueryList for OS color scheme, created once and reused. Null in SSR. /\n readonly #mediaQuery: MediaQueryList \| null = this.#isBrowser\n ? (this.#document.defaultView?.matchMedia('(prefers-color-scheme: dark)') ?? null)\n : null;\n\n readonly #systemPreference = signal<NgSystemTheme>(this.resolveSystemPreference());\n\n // ── Theme state ───────────────────────────────────────────────────────────\n\n readonly #selectedTheme = signal<NgTheme>(this.resolveInitialTheme());\n\n /* The theme explicitly selected by the user. May be `'system'`. /\n readonly selectedTheme = this.#selectedTheme.asReadonly();\n\n /* Resolved theme applied to the DOM. Always `'dark'` or `'light'` (or custom) — never `'system'`. /\n readonly resolvedTheme = computed(() => {\n const theme = this.#selectedTheme();\n return theme === 'system' ? this.#systemPreference() : theme;\n });\n\n /* Whether the currently applied theme is dark. /\n readonly isDark = computed(() => this.resolvedTheme() === 'dark');\n\n /* Whether the currently applied theme is light. /\n readonly isLight = computed(() => this.resolvedTheme() === 'light');\n\n /* Whether the currently applied theme is system. /\n readonly isSystem = computed(() => this.selectedTheme() === 'system');\n\n /\n Whether the service has completed client-side initialization.\n \n `false` during SSR and on the very first render pass before the initial theme\n * is resolved from `localStorage`. Becomes `true` immediately after the\n * first browser render pass.\n \n Important: Guard template elements that display `selectedTheme()` or\n * `resolvedTheme()` behind this signal to prevent hydration-mismatch flashes\n * (e.g. if the server renders the default 'system' but the user has 'dark' stored).\n \n @example\n * ```html\n * {{ theme.isHydrated() ? theme.selectedTheme() : '...' }}\n * ```\n /\n readonly isHydrated = signal(false);\n\n // ── Event handler ─────────────────────────────────────────────────────────\n\n readonly #onSystemPreferenceChange = () =>\n this.#systemPreference.set(this.resolveSystemPreference());\n\n // ── Lifecycle ─────────────────────────────────────────────────────────────\n\n constructor() {\n this.captureAntiFlashClass();\n\n if (this.#isBrowser && this.#selectedTheme() === 'system') {\n this.startSystemThemeListener();\n }\n\n effect(() => this.applyThemeToDOM(this.resolvedTheme()));\n afterNextRender(() => this.isHydrated.set(true));\n this.#destroyRef.onDestroy(() => this.stopSystemThemeListener());\n }\n\n // ── Public API ────────────────────────────────────────────────────────────\n\n /\n Changes the active theme.\n \n Persists the choice explicitly so that switching e.g. from `'system'` to\n * `'light'` is saved even when the resolved theme did not change\n * (system preference was already `'light'`).\n \n @param theme - The theme to apply: `'dark'`, `'light'`, `'system'`, or a custom theme name.\n * @throws If `theme` is not a valid theme according to library configuration.\n /\n public setTheme(theme: NgTheme): void {\n if (!this.#validThemes.has(theme)) {\n throw new NgxThemeStackError(\n `Invalid theme: \"${theme}\". Valid values are: ${[...this.#validThemes].join(', ')}.`,\n );\n }\n if (!this.#isBrowser) return;\n if (theme === this.#selectedTheme()) return;\n if (theme === 'system') {\n this.#systemPreference.set(this.resolveSystemPreference());\n this.startSystemThemeListener();\n } else {\n this.stopSystemThemeListener();\n }\n\n this.#selectedTheme.set(theme);\n this.saveTheme(theme);\n }\n\n // ── Private ───────────────────────────────────────────────────────────────\n\n private resolveSystemPreference(): NgSystemTheme {\n return this.#mediaQuery?.matches ? 'dark' : 'light';\n }\n\n private resolveInitialTheme(): NgTheme {\n const theme = this.#initialStoredTheme;\n if (theme && this.#validThemes.has(theme as NgTheme)) {\n return theme as NgTheme;\n }\n return this.#config.defaultTheme;\n }\n\n private startSystemThemeListener(): void {\n if (!this.#mediaQuery) return;\n this.stopSystemThemeListener();\n this.#mediaQuery.addEventListener('change', this.#onSystemPreferenceChange);\n }\n\n private stopSystemThemeListener(): void {\n this.#mediaQuery?.removeEventListener('change', this.#onSystemPreferenceChange);\n }\n\n private applyThemeToDOM(theme: NgTheme): void {\n if (!this.#isBrowser) return;\n\n const host = this.#document.documentElement;\n\n if (this.#antiFlashClass) {\n host.classList.remove(this.#antiFlashClass);\n this.#antiFlashClass = null;\n }\n\n const { mode } = this.#config;\n\n if (mode === 'attribute' \|\| mode === 'both') {\n this.applyThemeAttribute(host, theme);\n }\n\n if (mode === 'class' \|\| mode === 'both') {\n this.applyThemeClasses(host, theme);\n }\n\n this.applyColorSchemeHint(host, theme);\n }\n\n private applyThemeAttribute(host: HTMLElement, theme: NgTheme): void {\n host.setAttribute('data-theme', theme);\n }\n\n private applyThemeClasses(host: HTMLElement, theme: NgTheme): void {\n host.classList.remove(...this.availableThemes);\n host.classList.add(theme);\n }\n\n private applyColorSchemeHint(host: HTMLElement, theme: NgTheme): void {\n if (theme === 'dark' \|\| theme === 'light') {\n host.style.setProperty('color-scheme', theme);\n return;\n }\n\n host.style.removeProperty('color-scheme');\n }\n\n private captureAntiFlashClass(): void {\n if (!this.#isBrowser \|\| !this.#initialStoredTheme) return;\n\n if (!/^[a-zA-Z][a-zA-Z0-9_-]$/.test(this.#initialStoredTheme)) {\n this.#antiFlashClass = null;\n return;\n }\n\n if (this.#initialStoredTheme === 'system') {\n this.#antiFlashClass = this.resolveSystemPreference();\n return;\n }\n\n this.#antiFlashClass = this.#initialStoredTheme;\n }\n\n private readStoredTheme(): string \| null {\n if (!this.#isBrowser) return null;\n\n try {\n return localStorage.getItem(this.#config.storageKey);\n } catch (e) {\n console.warn('[ngx-theme-stack] Could not read theme from localStorage.', e);\n return null;\n }\n }\n\n private saveTheme(theme: NgTheme): void {\n if (!this.#isBrowser) return;\n\n try {\n localStorage.setItem(this.#config.storageKey, theme);\n } catch (e) {\n console.warn('[ngx-theme-stack] Could not save theme to localStorage.', e);\n }\n }\n}\n","import { inject, Injectable } from '@angular/core';\nimport { CoreThemeService } from '../core/core-theme.service';\n\n/*\n Convenience service for cycling through themes in a fixed order.\n \n Default cycle: `'system'` → `'light'` → `'dark'` → `'system'` → ...\n \n Use this when you want to offer users a single button that rotates\n * through all available theme options.\n /\n@Injectable({ providedIn: 'root' })\nexport class ThemeCycleService {\n readonly #core = inject(CoreThemeService);\n\n /* List of all configured themes for cycling. Defaults to `['light', 'dark', 'system']`. /\n readonly #cycle = this.#core.availableThemes;\n\n /* The theme explicitly selected by the user. May be `'system'`. /\n readonly selectedTheme = this.#core.selectedTheme;\n\n /* Resolved theme currently applied to the DOM. Always concrete — never `'system'`. /\n readonly resolvedTheme = this.#core.resolvedTheme;\n\n /* Whether the currently applied theme is `'dark'`. /\n readonly isDark = this.#core.isDark;\n\n /* Whether the currently applied theme is `'light'`. /\n readonly isLight = this.#core.isLight;\n\n /* Whether the user has explicitly selected `'system'` preference. /\n readonly isSystem = this.#core.isSystem;\n\n /\n Whether the service has completed client-side initialization and \n * resolved the real persisted theme. Use to prevent hydration flashes.\n /\n readonly isHydrated = this.#core.isHydrated.asReadonly();\n\n /\n Advances to the next theme in the cycle.\n \n Cycle order is determined by the configured `themes` property in `NgConfig`.\n \n If the current theme is not found in the cycle (e.g. set externally),\n * the cycle restarts from the first theme.\n /\n cycle(): void {\n const current = this.#core.selectedTheme();\n const index = this.#cycle.indexOf(current);\n const next = this.#cycle[(index + 1) % this.#cycle.length];\n this.#core.setTheme(next);\n }\n}\n","import { inject, Injectable } from '@angular/core';\nimport { CoreThemeService } from '../core/core-theme.service';\nimport { NgTheme } from '../types';\n\n/\n Convenience service for selecting a theme from a list.\n \n Use this when you want to bind a `<select>` or a group of radio/tab\n * buttons to the full set of available themes.\n /\n@Injectable({ providedIn: 'root' })\nexport class ThemeSelectService {\n readonly #core = inject(CoreThemeService);\n\n /* List of all configured themes. Defaults to `['light', 'dark', 'system']`. /\n readonly availableThemes = this.#core.availableThemes;\n\n /* The theme explicitly selected by the user. May be `'system'`. /\n readonly selectedTheme = this.#core.selectedTheme;\n\n /* Resolved theme currently applied to the DOM. Always concrete — never `'system'`. /\n readonly resolvedTheme = this.#core.resolvedTheme;\n\n /* Whether the currently applied theme is `'dark'`. /\n readonly isDark = this.#core.isDark;\n\n /* Whether the currently applied theme is `'light'`. /\n readonly isLight = this.#core.isLight;\n\n /* Whether the user has explicitly selected `'system'` preference. /\n readonly isSystem = this.#core.isSystem;\n\n /\n Whether the service has completed client-side initialization and \n * resolved the real persisted theme. Use to prevent hydration flashes.\n /\n readonly isHydrated = this.#core.isHydrated.asReadonly();\n\n /\n Applies the given theme.\n \n @param theme - The theme to apply: `'dark'`, `'light'`, `'system'`, or custom.\n * @throws If `theme` is not a valid theme according to library configuration.\n /\n select(theme: NgTheme): void {\n this.#core.setTheme(theme);\n }\n}\n","import { inject, Injectable } from '@angular/core';\nimport { CoreThemeService } from '../core/core-theme.service';\n\n/\n Convenience service for toggling between `'dark'` and `'light'`.\n \n Use this when you only need a simple on/off switch and do not\n * need to manage `'system'` or cycle through themes.\n /\n@Injectable({ providedIn: 'root' })\nexport class ThemeToggleService {\n readonly #core = inject(CoreThemeService);\n\n /* Resolved theme currently applied to the DOM. Always concrete — never `'system'`. /\n readonly resolvedTheme = this.#core.resolvedTheme;\n\n /* The theme explicitly selected by the user. May be `'system'`. /\n readonly selectedTheme = this.#core.selectedTheme;\n\n /* Whether the currently applied theme is `'dark'`. /\n readonly isDark = this.#core.isDark;\n\n /* Whether the currently applied theme is `'light'`. /\n readonly isLight = this.#core.isLight;\n\n /* Whether the user has explicitly selected `'system'` preference. /\n readonly isSystem = this.#core.isSystem;\n\n /\n Whether the service has completed client-side initialization and \n * resolved the real persisted theme. Use to prevent hydration flashes.\n /\n readonly isHydrated = this.#core.isHydrated.asReadonly();\n\n /\n Toggles between `'dark'` and `'light'`.\n \n If the selected theme is explicitly `'dark'`, switches to `'light'`.\n * Otherwise (including `'system'`), switches to `'dark'`.\n /\n toggle(): void {\n const next = this.#core.resolvedTheme() === 'dark' ? 'light' : 'dark';\n this.#core.setTheme(next);\n }\n}\n","/\n * Public API Surface of ngx-theme-stack\n /\n\nexport from './lib/core/core-theme.service';\nexport * from './lib/config';\nexport * from './lib/services/theme-cycle.service';\nexport * from './lib/services/theme-select.service';\nexport * from './lib/services/theme-toggle.service';\nexport * from './lib/types';\nexport * from './lib/errors';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "ngx-theme-stack",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "A stack of themes for Angular applications.",
   "schematics": "./schematics/collection.json",
   "ng-add": {

package/schematics/ng-add/anti-flash.d.ts CHANGED Viewed

@@ -21,4 +21,6 @@ export declare function patchIndexHtml(tree: Tree, context: SchematicContext, so
     storageKey: string;
     defaultTheme: string;
     mode: string;
+    themes: string[];
+    strategy: 'critters' | 'blocking';
 }): void;

package/schematics/ng-add/anti-flash.js CHANGED Viewed

@@ -55,44 +55,66 @@ function patchIndexHtml(tree, context, sourceRoot, options) {
         if (!tree.exists(path))
             continue;
         const content = tree.readText(path);
-        // Guard: idempotent — skip if script is already present
-        if (content.includes('ngx-theme-stack-theme') ||
-            content.includes('ngx-theme-stack anti-flash')) {
-            context.logger.info(`✔ Anti-flash script already present in ${path} — skipping.`);
-            return;
-        }
-        const script = buildAntiFlashScript({
+        const scriptTag = `\n  <!-- ngx-theme-stack anti-flash -->\n  <script>${buildAntiFlashScript({
             storageKey: options.storageKey,
             defaultTheme: options.defaultTheme,
             mode: options.mode,
-        });
-        // ── CSP Detection ────────────────────────────────────────────────────────
-        // If the project uses a Content-Security-Policy meta tag, inline scripts
-        // are blocked by default unless 'unsafe-inline' or a nonce is allowed.
-        // We warn here; the user must add a nonce manually or adjust their CSP.
-        const hasCspMeta = content.includes('Content-Security-Policy') || content.includes('content-security-policy');
-        if (hasCspMeta) {
-            context.logger.warn(`⚠ A Content-Security-Policy meta tag was detected in ${path}.\n` +
-                `  Inline scripts may be blocked by your CSP.\n` +
-                `  Options:\n` +
-                `    1. Add a nonce to the injected <script> tag and allow it in your CSP.\n` +
-                `    2. Add the script hash to your CSP: script-src 'sha256-<HASH>'.\n` +
-                `    3. Allow 'unsafe-inline' (not recommended for production).\n` +
-                `  See: https://angular.dev/guide/security#content-security-policy`);
+        })}</script>`;
+        let updated = content;
+        // ── 1. Update Anti-Flash Script ──────────────────────────────────────────
+        const SCRIPT_BLOCK_RE = /<!--\s*ngx-theme-stack\s*anti-flash\s*-->\s*<script[^>]*>[\s\S]*?<\/script>/;
+        if (SCRIPT_BLOCK_RE.test(updated)) {
+            updated = updated.replace(SCRIPT_BLOCK_RE, scriptTag);
+            context.logger.info(`✔ Updated anti-flash script in ${path}`);
         }
-        // Inject immediately after <head> so it blocks rendering before any CSS.
-        // If your project uses CSP nonces, add nonce="<%= CSP_NONCE %>" to the tag.
-        const scriptTag = `\n  <!-- ngx-theme-stack anti-flash -->\n  <script>${script}</script>`;
-        const updated = content.replace('<head>', `<head>${scriptTag}`);
-        tree.overwrite(path, updated);
-        context.logger.info(`✔ Anti-flash script injected into ${path}`);
-        if (hasCspMeta) {
-            context.logger.warn(`  → Remember to allow the inline script in your CSP before deploying.`);
+        else {
+            updated = updated.replace('<head>', `<head>${scriptTag}`);
+            context.logger.info(`✔ Injected anti-flash script into ${path}`);
+        }
+        // ── 2. Update Critters Trick ─────────────────────────────────────────────
+        const CRITTERS_BLOCK_RE = /<!-- ngx-theme-stack critters-trick -->[\s\S]*?<!-- \/ngx-theme-stack critters-trick -->/;
+        const CRITTERS_ID_RE = /<div id="ngx-theme-stack-critters-trick"[\s\S]*?<\/div>/;
+        if (options.strategy === 'critters') {
+            const renderableThemes = options.themes.filter((t) => t !== 'system');
+            const innerDivs = renderableThemes
+                .map((theme) => {
+                if (options.mode === 'class')
+                    return `      <div class="${theme}"></div>`;
+                if (options.mode === 'attribute')
+                    return `      <div data-theme="${theme}"></div>`;
+                return `      <div class="${theme}" data-theme="${theme}"></div>`;
+            })
+                .join('\n');
+            const crittersBlock = `<!-- ngx-theme-stack critters-trick -->\n` +
+                `    <div id="ngx-theme-stack-critters-trick" hidden aria-hidden="true" style="display: none; overflow: hidden; clip-path: inset(50%); position: absolute;">\n${innerDivs}\n    </div>\n` +
+                `    <!-- /ngx-theme-stack critters-trick -->`;
+            if (CRITTERS_BLOCK_RE.test(updated)) {
+                updated = updated.replace(CRITTERS_BLOCK_RE, crittersBlock);
+                context.logger.info(`✔ Updated Critters-trick block in ${path}`);
+            }
+            else if (CRITTERS_ID_RE.test(updated)) {
+                updated = updated.replace(CRITTERS_ID_RE, crittersBlock);
+                context.logger.info(`✔ Wrapped existing Critters-trick div with markers in ${path}`);
+            }
+            else {
+                updated = updated.replace('</body>', `  ${crittersBlock}\n  </body>`);
+                context.logger.info(`✔ Injected Critters-trick block before </body> in ${path}`);
+            }
         }
+        else {
+            // If switching to blocking strategy, remove existing trick
+            if (CRITTERS_BLOCK_RE.test(updated)) {
+                updated = updated.replace(CRITTERS_BLOCK_RE, '');
+            }
+            else if (CRITTERS_ID_RE.test(updated)) {
+                updated = updated.replace(CRITTERS_ID_RE, '');
+            }
+            context.logger.info(`✔ Removed Critters-trick from ${path}`);
+        }
+        tree.overwrite(path, updated);
         return;
     }
     context.logger.warn(`⚠ Could not find index.html (tried: ${candidates.join(', ')}).\n` +
-        `  Add the anti-flash script manually to the <head> of your index.html.\n` +
-        `  See: https://github.com/your-org/ngx-theme-stack#anti-flash`);
+        `  Add the anti-flash script manually to the <head> of your index.html.`);
 }
 //# sourceMappingURL=anti-flash.js.map