ngx-theme-stack 3.8.0 โ 3.8.2
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.
- package/README.md +5 -6
- package/package.json +1 -1
- package/schematics/skill/index.js +12 -31
- package/schematics/skill/index.js.map +1 -1
package/README.md
CHANGED
|
@@ -105,7 +105,7 @@ The installation command automates the following:
|
|
|
105
105
|
| `package.json` | Adds a `"prebuild"` script for theme synchronization |
|
|
106
106
|
| `angular.json` | Registers `themes.css` and optimizes build config |
|
|
107
107
|
| `themes.css` | Scaffolds base theme tokens if they don't exist |
|
|
108
|
-
| `SKILL.md` | Generates an AI Agent Skill under `.agents/skills/` (optional)
|
|
108
|
+
| `SKILL.md` | Generates an AI Agent Skill under `.agents/skills/` (optional) |
|
|
109
109
|
|
|
110
110
|
> [!TIP]
|
|
111
111
|
> **Re-configuration support:** Run `ng add` multiple times freely. The schematic updates existing code without duplicating it.
|
|
@@ -207,9 +207,7 @@ import { ThemeCycleService } from 'ngx-theme-stack';
|
|
|
207
207
|
selector: 'app-theme-cycle',
|
|
208
208
|
template: `
|
|
209
209
|
@if (theme.isHydrated()) {
|
|
210
|
-
<button (click)="theme.cycle()">
|
|
211
|
-
๐ Cycle Theme
|
|
212
|
-
</button>
|
|
210
|
+
<button (click)="theme.cycle()">๐ Cycle Theme</button>
|
|
213
211
|
} @else {
|
|
214
212
|
<div class="theme-cycle-skeleton"></div>
|
|
215
213
|
}
|
|
@@ -290,7 +288,7 @@ export class MyAdvancedComponent {
|
|
|
290
288
|
>
|
|
291
289
|
> ```html
|
|
292
290
|
> @if (theme.isHydrated()) {
|
|
293
|
-
>
|
|
291
|
+
> <img [src]="theme.isDark() ? darkLogo : lightLogo" />
|
|
294
292
|
> }
|
|
295
293
|
> ```
|
|
296
294
|
|
|
@@ -364,6 +362,7 @@ Only needed if you want `dark:` utilities tied to ngx-theme-stack's toggle:
|
|
|
364
362
|
</details>
|
|
365
363
|
|
|
366
364
|
---
|
|
365
|
+
|
|
367
366
|
## ๐ค AI Code Assistants Integration
|
|
368
367
|
|
|
369
368
|
`ngx-theme-stack` includes out-of-the-box support for AI coding assistants (such as Google Antigravity, Gemini, Claude Code, and other agents that support the open `SKILL.md` standard).
|
|
@@ -404,7 +403,7 @@ Once the skill is in your workspace, your AI assistant will automatically read i
|
|
|
404
403
|
| **Network requests** | Zero | One (then cached) |
|
|
405
404
|
| **Flash risk** | None | None |
|
|
406
405
|
| **Works with CSR** | โ
| โ
|
|
|
407
|
-
| **Works with SSR/SSG** | โ
| โ ๏ธ May flash on SSG
|
|
406
|
+
| **Works with SSR/SSG** | โ
| โ ๏ธ May flash on SSG |
|
|
408
407
|
| **Strict CSP compatible** | โ requires `unsafe-inline` | โ
|
|
|
409
408
|
| **Best for** | Most apps | Strict CSP, many themes |
|
|
410
409
|
|
package/package.json
CHANGED
|
@@ -111,8 +111,9 @@ export const appConfig: ApplicationConfig = {
|
|
|
111
111
|
|
|
112
112
|
All services expose these signals: \`selectedTheme()\`, \`resolvedTheme()\`, \`isDark()\`, \`isLight()\`, \`isSystem()\`, \`isHydrated()\`.
|
|
113
113
|
|
|
114
|
-
|
|
115
|
-
|
|
114
|
+
Ver [ejemplo Toggle](assets/theme-toggle.ts) ยท [ejemplo Cycle](assets/theme-cycle.ts) ยท [ejemplo Select](assets/theme-select.ts)
|
|
115
|
+
|
|
116
|
+
For full API details, read [references/api-reference.md](references/api-reference.md).
|
|
116
117
|
|
|
117
118
|
## SSR Hydration Guard & Layout Stability
|
|
118
119
|
|
|
@@ -120,7 +121,7 @@ Guard theme-dependent template content behind \`isHydrated()\` in SSR to prevent
|
|
|
120
121
|
|
|
121
122
|
\`\`\`html
|
|
122
123
|
@if (theme.isHydrated()) {
|
|
123
|
-
<img [src]="theme.isDark() ?
|
|
124
|
+
<img [src]="theme.isDark() ? darkLogo : lightLogo">
|
|
124
125
|
} @else {
|
|
125
126
|
<!-- The placeholder/skeleton MUST match the exact size and spacing of the hydrated image -->
|
|
126
127
|
<div class="logo-skeleton" style="width: 150px; height: 40px; display: inline-block;"></div>
|
|
@@ -303,13 +304,8 @@ Inherits: \`selectedTheme()\`, \`resolvedTheme()\`, \`isDark()\`, \`isLight()\`,
|
|
|
303
304
|
|
|
304
305
|
Catch with: \`if (e instanceof NgxThemeStackError) { ... }\`
|
|
305
306
|
`;
|
|
306
|
-
// โโ assets/
|
|
307
|
-
const TEMPLATE_TOGGLE =
|
|
308
|
-
|
|
309
|
-
A simple button component to toggle between light and dark themes.
|
|
310
|
-
|
|
311
|
-
\`\`\`typescript
|
|
312
|
-
import { inject, Component } from '@angular/core';
|
|
307
|
+
// โโ assets/ component examples (Tier 3 โ pure TypeScript, read on demand) โโโ
|
|
308
|
+
const TEMPLATE_TOGGLE = `import { inject, Component } from '@angular/core';
|
|
313
309
|
import { ThemeToggleService } from 'ngx-theme-stack';
|
|
314
310
|
|
|
315
311
|
@Component({
|
|
@@ -327,23 +323,15 @@ import { ThemeToggleService } from 'ngx-theme-stack';
|
|
|
327
323
|
export class ThemeToggle {
|
|
328
324
|
protected readonly theme = inject(ThemeToggleService);
|
|
329
325
|
}
|
|
330
|
-
\`\`\`
|
|
331
326
|
`;
|
|
332
|
-
const TEMPLATE_CYCLE =
|
|
333
|
-
|
|
334
|
-
A button component to cycle through all available themes.
|
|
335
|
-
|
|
336
|
-
\`\`\`typescript
|
|
337
|
-
import { inject, Component } from '@angular/core';
|
|
327
|
+
const TEMPLATE_CYCLE = `import { inject, Component } from '@angular/core';
|
|
338
328
|
import { ThemeCycleService } from 'ngx-theme-stack';
|
|
339
329
|
|
|
340
330
|
@Component({
|
|
341
331
|
selector: 'app-theme-cycle',
|
|
342
332
|
template: \`
|
|
343
333
|
@if (theme.isHydrated()) {
|
|
344
|
-
<button (click)="theme.cycle()">
|
|
345
|
-
๐ Cycle Theme
|
|
346
|
-
</button>
|
|
334
|
+
<button (click)="theme.cycle()">๐ Cycle Theme</button>
|
|
347
335
|
} @else {
|
|
348
336
|
<div class="theme-cycle-skeleton"></div>
|
|
349
337
|
}
|
|
@@ -352,14 +340,8 @@ import { ThemeCycleService } from 'ngx-theme-stack';
|
|
|
352
340
|
export class ThemeCycle {
|
|
353
341
|
protected readonly theme = inject(ThemeCycleService);
|
|
354
342
|
}
|
|
355
|
-
\`\`\`
|
|
356
343
|
`;
|
|
357
|
-
const TEMPLATE_SELECT =
|
|
358
|
-
|
|
359
|
-
A dropdown select component to choose any available theme.
|
|
360
|
-
|
|
361
|
-
\`\`\`typescript
|
|
362
|
-
import { inject, Component } from '@angular/core';
|
|
344
|
+
const TEMPLATE_SELECT = `import { inject, Component } from '@angular/core';
|
|
363
345
|
import { ThemeSelectService } from 'ngx-theme-stack';
|
|
364
346
|
|
|
365
347
|
@Component({
|
|
@@ -386,16 +368,15 @@ export class ThemeSelect {
|
|
|
386
368
|
this.theme.select(value);
|
|
387
369
|
}
|
|
388
370
|
}
|
|
389
|
-
\`\`\`
|
|
390
371
|
`;
|
|
391
372
|
// โโ Schematic logic โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
|
|
392
373
|
const SKILL_ROOT = '.agents/skills/ngx-theme-stack';
|
|
393
374
|
const FILES = [
|
|
394
375
|
{ path: `${SKILL_ROOT}/SKILL.md`, content: SKILL_CONTENT },
|
|
395
376
|
{ path: `${SKILL_ROOT}/references/api-reference.md`, content: API_REFERENCE },
|
|
396
|
-
{ path: `${SKILL_ROOT}/assets/theme-toggle.
|
|
397
|
-
{ path: `${SKILL_ROOT}/assets/theme-cycle.
|
|
398
|
-
{ path: `${SKILL_ROOT}/assets/theme-select.
|
|
377
|
+
{ path: `${SKILL_ROOT}/assets/theme-toggle.ts`, content: TEMPLATE_TOGGLE },
|
|
378
|
+
{ path: `${SKILL_ROOT}/assets/theme-cycle.ts`, content: TEMPLATE_CYCLE },
|
|
379
|
+
{ path: `${SKILL_ROOT}/assets/theme-select.ts`, content: TEMPLATE_SELECT },
|
|
399
380
|
];
|
|
400
381
|
function generateSkill(tree, context) {
|
|
401
382
|
for (const file of FILES) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../projects/ngx-theme-stack/schematics/skill/index.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../projects/ngx-theme-stack/schematics/skill/index.ts"],"names":[],"mappings":";;AAyYA,sCAUC;AAED,sBAMC;AAxZD,+EAA+E;AAE/E,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkKrB,CAAC;AAEF,+EAA+E;AAE/E,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIrB,CAAC;AAEF,+EAA+E;AAE/E,MAAM,eAAe,GACrB;;;;;;;;;;;;;;;;;;CAkBC,CAAC;AAEF,MAAM,cAAc,GACpB;;;;;;;;;;;;;;;;CAgBC,CAAC;AAEF,MAAM,eAAe,GACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,CAAC;AAEF,+EAA+E;AAE/E,MAAM,UAAU,GAAG,gCAAgC,CAAC;AAEpD,MAAM,KAAK,GAAwC;IACjD,EAAE,IAAI,EAAE,GAAG,UAAU,WAAW,EAAE,OAAO,EAAE,aAAa,EAAE;IAC1D,EAAE,IAAI,EAAE,GAAG,UAAU,8BAA8B,EAAE,OAAO,EAAE,aAAa,EAAE;IAC7E,EAAE,IAAI,EAAE,GAAG,UAAU,yBAAyB,EAAE,OAAO,EAAE,eAAe,EAAE;IAC1E,EAAE,IAAI,EAAE,GAAG,UAAU,wBAAwB,EAAE,OAAO,EAAE,cAAc,EAAE;IACxE,EAAE,IAAI,EAAE,GAAG,UAAU,yBAAyB,EAAE,OAAO,EAAE,eAAe,EAAE;CAC3E,CAAC;AAEF,SAAgB,aAAa,CAAC,IAAU,EAAE,OAAyB;IACjE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACxC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,yBAAyB,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC;QACtE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACrC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,yBAAyB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC5D,CAAC;IACH,CAAC;AACH,CAAC;AAED,SAAgB,KAAK,CAAC,OAAe;IACnC,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,0CAA0C,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;QACjF,aAAa,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC7B,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC"}
|