@nettyapps/ntybase

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

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

Adding New Color Themes

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:

npm install @angular/material @angular/cdk

2. Generate a Custom Palette

Use the Angular CLI to generate a custom palette:

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:

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

styles.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

/* 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);
}

Configuring ColorPalette Service

Define Your Theme Colors

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

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');
}