Netty Base Library

Netty Base Library
The @nettyapps/ntybase library provides foundational services and components for Angular applications, including theme management, authentication, alerts, menus, and AG-Grid integration.

Installation

``bash
npm install @nettyapps/ntybase
`

Theme Management Systems

The @nettyapps/ntybase library provides flexible theme management through two complementary systems:

1. Color Palette - For primary/secondary color schemes
2. App Theme - For light/dark mode system

$3

#### Generating Custom Color Palettes with Angular Material

Angular Material provides a powerful schematic for automatically generating complete color palettes from base colors, eliminating the need to manually create theme files.

#### 1. Install Required Packages

First ensure you have @angular/material and @angular/cdk installed:

`bash
npm install @angular/material @angular/cdk
`

##### 2. Generate a Custom Palette

Use the Angular CLI to generate a custom palette:

`bash
ng generate @angular/material:theme-color
`

#### 3. Output Structure

The schematic will generate:

`
src/
└── app/
└── themes/
├── custom-themes.css # Your custom palette definition
└── deep-bluetheme.css # Generated palette variables
`

#### 4. Using the Generated Theme

Import and use your theme:

custom-themes.css:

`scss
@import "./deep-bluetheme.css";
`

styles.scss:

`scss
@use "@angular/material" as mat;
@include mat.core();
@import "./app/themes/custom-themes.css";
`

Here's an example of the generated theme CSS that will be available in deep-blue-theme.css

`scss
/ Note: Color palettes are generated from primary: #1976D2 /
.deep-blue-theme {
/ COLOR SYSTEM VARIABLES /
color-scheme: dark;

/ Required field /
--mat-sys-required: light-dark(var(--mat-sys-secondary-container), var(--mat-sys-inverse-primary));
--mat-nty-save-record-header-bar: light-dark(var(--mat-sys-secondary-container), var(--mat-sys-primary));
--mat-nty-save-record-identifier: light-dark(var(--mat-sys-on-primary-container), var(--mat-sys-on-primary));

/ Primary palette variables /
--mat-sys-primary: light-dark(#005faf, #a5c8ff);
--mat-sys-on-primary: light-dark(#ffffff, #00315f);
--mat-sys-primary-container: light-dark(#d4e3ff, #004786);
--mat-sys-on-primary-container: light-dark(#001c3a, #d4e3ff);
--mat-sys-inverse-primary: light-dark(#a5c8ff, #005faf);
--mat-sys-primary-fixed: light-dark(#d4e3ff, #d4e3ff);
--mat-sys-primary-fixed-dim: light-dark(#a5c8ff, #a5c8ff);
--mat-sys-on-primary-fixed: light-dark(#001c3a, #001c3a);
--mat-sys-on-primary-fixed-variant: light-dark(#004786, #004786);

/ Secondary palette variables /
--mat-sys-secondary: light-dark(#475f84, #afc8f1);
--mat-sys-on-secondary: light-dark(#ffffff, #163153);
--mat-sys-secondary-container: light-dark(#d4e3ff, #2f486a);
--mat-sys-on-secondary-container: light-dark(#001c3a, #d4e3ff);
--mat-sys-secondary-fixed: light-dark(#d4e3ff, #d4e3ff);
--mat-sys-secondary-fixed-dim: light-dark(#afc8f1, #afc8f1);
--mat-sys-on-secondary-fixed: light-dark(#001c3a, #001c3a);
--mat-sys-on-secondary-fixed-variant: light-dark(#2f486a, #2f486a);
}
`

$3

#### Define Your Theme Colors

After generating your palettes, integrate them with the ColorPalette service:

`typescript
import { ColorPalette } from '@nettyapps/ntybase';

private colorPalette = inject(ColorPalette);

constructor() {
this.loadCustomThemes();
}

private loadCustomThemes(): void {
const customThemes = [
{
id: 'deep-blue',
primary: '#1976D2',
displayName: 'Deep Blue',
},
{
id: 'green',
primary: '#00796B',
displayName: 'Green'
},
{
id: 'orange',
primary: '#E65100',
displayName: 'Orange'
},
{
id: 'purple',
primary: '#6200EE',
displayName: 'Purple'
},
{
id: 'red',
primary: '#C2185B',
displayName: 'Red'
},
{
id: 'blue-orange',
primary: '#0D5EA6',
displayName: 'Blue/Orange'
},
{
id: 'gray',
primary: '#555',
displayName: 'Gray'
},
];

this.colorPalette.setThemes(customThemes);

// Set default theme
this.colorPalette.setTheme('green');
}
``