patch: handling theme selection persistent + docs (#97)

Author: eksrha

docs/assets/theme-menu-shot.png

@@ -10,6 +10,7 @@ The `FsThemeMenu` component provides a user-friendly theme switcher for Angular
 - **Material 3 theming** support
 - **Accessible menu** with clear icons and labels
 - **Easy integration** into toolbars or navigation frames
+- **Persistent theme selection** using `localStorage` (see `localStorageKey` input)
 
 ---
 
@@ -30,7 +31,7 @@ import { FsThemeMenu } from '@fullstack-devops/ngx-mat-components';
 ## Usage Example
 
 ```html
-<fs-theme-menu>
+<fs-theme-menu [localStorageKey]="'my-theme-key'">
   <i-lucide [img]="PaintBucketIcon"></i-lucide>
 </fs-theme-menu>
 ```
@@ -44,6 +45,9 @@ You can place `<fs-theme-menu>` inside your toolbar or anywhere in your layout.
 - `@Input() theme: FsThemeColorSchemes`  
   Set the current theme (`'auto'`, `'light-mode'`, `'dark-mode'`).
 
+- `@Input() localStorageKey: string`  
+  (Optional) The key used for storing the selected theme in `localStorage`. Defaults to `'fs-selected-theme'`. Use this if you want to scope the theme preference to a specific part of your app or avoid conflicts with other components.
+
 - `@Output() themeChange: EventEmitter<FsThemeColorSchemes>`  
   Emits when the user selects a new theme.
 
@@ -69,6 +73,8 @@ export enum FsThemeColorSchemes {
 - When `'auto'` is selected, the theme follows the user's system preference.
 - The menu uses Material Design and includes icons for each theme option.
 - Works only with Angular Material 3.
+- The selected theme is persisted in `localStorage` under the key specified by `localStorageKey` (default: `'fs-selected-theme'`). Only explicit selections of `'light-mode'` or `'dark-mode'` are stored; selecting `'auto'` removes the key and follows the system preference.
+- On initialization, the component reads the value from `localStorage` (if present) and applies it.
 - Prepare the `style.scss` file in your project to include the theme styles.
 
 ```scss
@@ -92,6 +98,7 @@ body.dark-mode {
 body.light-mode {
   color-scheme: light;
 }
+```
 
 ---
 
@@ -116,7 +123,9 @@ body.light-mode {
 
 ## Example Screenshot
 
-![Theme Menu Example](../projects/lib-workspace/src/assets/theme-menu-shot.png)
+> **Note:** The colors shown in the theme icon reflect your currently selected theme, providing a visual preview that matches your actual color scheme.
+
+![Theme Menu Example](./assets/theme-menu-shot.png)
 
 ---
 

docs/theme-menu.md

@@ -1,8 +1,10 @@
 {
   "name": "@fullstack-devops/ngx-mat-components",
   "version": "0.0.0-PLACEHOLDER",
+  "description": "An addon library for Angular Material that provides additional components and utilities, including a calendar date picker, theme switcher, and navigation frame.",
+  "license": "Apache-2.0",
   "engines": {
-    "node": ">=20.0.0",
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
     "yarn": "^1.22.17",
     "npm": "Please use Yarn instead of NPM to install dependencies. See: https://yarnpkg.com/lang/en/docs/install/"
   },

package.json

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { version } from 'packageJson';
+import { Component, HostBinding } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -63,9 +64,11 @@ export class App {
   readonly CogIcon = CogIcon;
   readonly PaintBucketIcon = PaintBucketIcon;
 
+  @HostBinding('attr.app-version') appVersion = version;
+
   navFrameConfig: NavFrameConfig = {
     appName: 'Demo App',
-    appVersion: '0.0.0',
+    appVersion: version,
     // logoSrc: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1024px-Angular_full_color_logo.svg.png',
   };
   sizing: NavFrameSizing = {

projects/lib-workspace/src/app/app.ts

@@ -1,24 +1,37 @@
 {
   "name": "@fullstack-devops/ngx-mat-components",
   "version": "0.0.0-PLACEHOLDER",
+  "description": "An addon library for Angular Material that provides additional components and utilities, including a calendar date picker, theme switcher, and navigation frame.",
   "license": "Apache-2.0",
+  "keywords": [
+    "angular",
+    "material",
+    "components",
+    "ui",
+    "ngx-mat-components",
+    "fullstack-devops",
+    "calendar",
+    "date-picker",
+    "theme-switcher",
+    "nav-frame",
+    "nav-menu"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fullstack-devops/ngx-mat-components.git"
+  },
+  "homepage": "https://github.com/fullstack-devops/ngx-mat-components",
   "peerDependencies": {
     "@angular/common": "^19.0.0",
     "@angular/core": "^19.0.0",
     "@angular/material": "^19.0.0",
-    "date-fns": "^2.29.3"
+    "date-fns": "^4.0.0"
   },
   "dependencies": {
     "tslib": "^2.8.1"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/fullstack-devops/ngx-mat-components.git"
-  },
-  "homepage": "https://github.com/fullstack-devops/ngx-mat-components",
-  "description": "Central component repo for angular applications",
   "engines": {
-    "node": ">= 20.0.0",
+    "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
     "npm": ">= 9.8.0",
     "yarn": ">= 1.22.0"
   },

projects/ngx-mat-components/package.json

@@ -27,8 +27,12 @@
     </button>
   </div>
   <div class="app-info-wrapper" [class.opened]="!isClosed">
-    <span class="app-name" *ngIf="!isClosed">{{ navFrameConfig.appName }}</span>
-    <span class="app-version" *ngIf="!isClosed">{{ navFrameConfig.appVersion }}</span>
+    @if (!isClosed) {
+      <span class="app-name">{{ navFrameConfig.appName }}</span>
+      @if (navFrameConfig.appVersion) {
+        <span class="app-version">{{ navFrameConfig.appVersion }}</span>
+      }
+    }
   </div>
 </div>
 

projects/ngx-mat-components/src/fs-nav-frame/fs-nav-frame.component.html

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { MatMenuModule } from '@angular/material/menu';
 import { FsCheckSvg } from './fs-check-svg';
 import { FsThemeIcon } from './fs-theme-icon/fs-theme-icon';
@@ -16,17 +16,23 @@ export enum FsThemeColorSchemes {
   templateUrl: './fs-theme-menu.html',
   styleUrls: ['./fs-theme-menu.scss'],
 })
-export class FsThemeMenu {
+export class FsThemeMenu implements OnInit {
   private _theme: FsThemeColorSchemes = FsThemeColorSchemes.Auto;
   readonly FsThemeColorSchemes = FsThemeColorSchemes;
 
+  @Input() localStorageKey = 'fs-selected-theme';
   @Input()
   set theme(value: FsThemeColorSchemes) {
     this._theme = value;
     const body = document.body;
     body.classList.remove(FsThemeColorSchemes.Light, FsThemeColorSchemes.Dark);
+
+    // Persist only if not auto
     if (value && value !== FsThemeColorSchemes.Auto) {
       body.classList.add(value);
+      localStorage.setItem(this.localStorageKey, value);
+    } else {
+      localStorage.removeItem(this.localStorageKey);
     }
     this.themeChange.emit(value);
   }
@@ -35,11 +41,25 @@ export class FsThemeMenu {
   }
   @Output() themeChange = new EventEmitter<FsThemeColorSchemes>();
 
+  ngOnInit() {
+    this.loadThemeFromStorage();
+  }
+
   isSelected(requested: FsThemeColorSchemes): boolean {
     return this.theme === requested;
   }
 
   onColorSchemeChange(value: FsThemeColorSchemes): void {
     this.theme = value;
   }
+
+  // Call this in ngOnInit or constructor
+  loadThemeFromStorage() {
+    const stored = localStorage.getItem(this.localStorageKey) as FsThemeColorSchemes;
+    if (stored === FsThemeColorSchemes.Light || stored === FsThemeColorSchemes.Dark) {
+      this.theme = stored;
+    } else {
+      this.theme = FsThemeColorSchemes.Auto;
+    }
+  }
 }

projects/ngx-mat-components/src/fs-theme-menu/fs-theme-menu.ts

@@ -11,8 +11,10 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true,
     "sourceMap": true,
     "paths": {
+      "packageJson": ["./package.json"],
       "ngx-mat-components": ["dist/ngx-mat-components"]
     },
     "declaration": false,