This library provides foundational services and components for NettyApps Angular applications.
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.
``bash`
npm install @nettyapps/ntybase
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
#### 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);
}
`
#### 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');
}
``