File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -6,7 +6,7 @@ This is the workspace (monorepo) for the **ngx-theme-stack** project. It contain
66
77- ** ` projects/ngx-theme-stack/ ` ** : The Angular library source code.
88- ** ` projects/ngx-theme-stack/schematics/ ` ** : Angular CLI schematics to automate installation (` ng add ` ).
9- - ** ` projects/demo-app / ` ** * (Upcoming) * : Example application for testing and demonstrating library features .
9+ - ** ` projects/demo-ngx-theme-stack / ` ** : Official demonstration app showcasing Zero-Flash themes and signals .
1010
1111## 🚀 Quick Commands
1212
Original file line number Diff line number Diff line change 1+ # ngx-theme-stack Demo App 🚀
2+
3+ This is the official demonstration application for the ** ngx-theme-stack** library. It showcases:
4+
5+ - ** Critters Strategy** : Zero-flash theme application using inlined CSS variables.
6+ - ** Utility Services** : Implementation of ` ThemeToggleService ` , ` ThemeCycleService ` , and ` ThemeSelectService ` .
7+ - ** Dynamic Theming** : Support for ` light ` , ` dark ` , and a custom ` sunset ` theme.
8+ - ** Signals-based UI** : Reactive interface that updates instantly on theme changes.
9+
10+ ## 🛠️ Development
11+
12+ ### Running the Demo
13+ From the root of the workspace:
14+ ``` bash
15+ pnpm start
16+ ```
17+ Or specifically:
18+ ``` bash
19+ ng serve demo-ngx-theme-stack
20+ ```
21+
22+ ### Syncing Configuration
23+ If you modify the themes in ` appConfig ` , run the sync command to refresh ` index.html ` :
24+ ``` bash
25+ pnpm prebuild
26+ ```
27+
28+ ## 🏗️ Structure
29+ - ` src/app/app.config.ts ` : Library configuration.
30+ - ` src/themes.css ` : Theme tokens and variables.
31+ - ` src/index.html ` : Injected anti-flash script and critters trick.
Original file line number Diff line number Diff line change 4646
4747
4848 <!-- ngx-theme-stack critters-trick -->
49- < div id ="ngx-theme-stack-critters-trick " hidden >
49+ < div id ="ngx-theme-stack-critters-trick " hidden aria-hidden =" true " style =" display: none; overflow: hidden; clip-path: inset(50%); position: absolute; " >
5050 < div class ="light "> </ div >
5151 < div class ="dark "> </ div >
5252 < div class ="sunset "> </ div >
You can’t perform that action at this time.
0 commit comments