JetTheme

A comprehensive Angular theme library providing dynamic theme switching functionality with support for light and dark modes, built with Angular Material and designed for Angular 19+.

Features

• 🎨 Dynamic theme switching (light/dark mode)
• 🔧 Employee-specific theme preferences via API
• 📱 Responsive design support
• ⚡ Built with Angular 19 and Angular Material
• 🚀 Easy integration with existing Angular projects
• 🎯 TypeScript support with full type definitions

Installation

npm install jet-theme

Dependencies

This library requires Angular Material. If you haven't installed it yet:

ng add @angular/material

Setup

1. Import the Module

Add JetThemeService to your app:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JetThemeService } from 'jet-theme';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [JetThemeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Import the Theme Styles

Add the theme styles to your global styles.scss file:

// Import jet-theme SCSS
@use '~jet-theme/src/lib/theme.scss';

Usage

Inject the Service

import { Component, OnInit } from '@angular/core';
import { JetThemeService } from 'jet-theme';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
  constructor(private jetThemeService: JetThemeService) {}

  async ngOnInit() {
    // Apply theme based on employee preferences
    await this.jetThemeService.applyTheme();
  }

  // Toggle theme manually
  onThemeToggle(event: any) {
    this.jetThemeService.toggleTheme(event);
  }

  // Get current theme mode
  async getCurrentTheme() {
    const themeMode = await this.jetThemeService.getThemeMode();
    console.log('Current theme:', themeMode); // 'light' or 'dark'
  }
}

Theme Toggle Component Example

<!-- Theme toggle switch -->
<mat-slide-toggle 
  [checked]="jetThemeService.themeMode()" 
  (change)="onThemeToggle($event)">
  Dark Mode
</mat-slide-toggle>

Service Methods

The JetThemeService provides the following methods:

applyTheme(): Promise<void>

Fetches employee theme preferences and applies the appropriate theme.

toggleTheme(event: any): void

Toggles between light and dark themes manually.

getThemeMode(): Promise<string>

Returns the current theme mode ('light' or 'dark').

Computed Properties

• themeMode() - Returns boolean indicating if dark mode is active
• backgroundcolor() - Returns current background color setting
• foregroundcolor() - Returns current foreground color setting
• headingfontcolor() - Returns current heading font color setting

API Integration

The service integrates with an employee information API to fetch personalized theme preferences:

// The service automatically fetches from:
// https://www.jet-airways-stl.com/gt5ws.nsf/ws_employeeInformation?openagent&function=employeeinfo&nocache=

interface EmployeeInfo {
  noteid: string;
  firstname: string;
  lastname: string;
  office: string;
  colorselections: {
    backgroundcolor: string; // 'light' or 'dark'
    foregroundcolor: string;
    headingfontcolor: string;
    dashboardheadingfontcolor: string;
  }
}

Customization

The library comes with pre-built Material Design themes. You can customize the colors by overriding the SCSS variables:

// Override theme variables before importing
$primary-color: #1976d2;
$accent-color: #ff4081;

// Import the theme
@use '~jet-theme/src/lib/theme.scss';

// Custom theme overrides
.dark-theme {
  --primary-color: #bb86fc;
  --surface-color: #121212;
  --on-surface-color: #ffffff;
}

Peer Dependencies

• @angular/core: ^19.0.0
• @angular/material: ^19.0.0
• @angular/common/http: ^19.0.0

Compatibility

• Angular 19+
• Angular Material 19+

Building

To build the library, run:

ng build jet-theme

Publishing

After building your library with ng build jet-theme, go to the dist folder cd dist/jet-theme and run npm publish.

License

MIT License

Support

For issues and feature requests, please create an issue on the project repository.

1. Navigate to the dist directory:

   cd dist/jet-theme

2. Run the npm publish command to publish your library to the npm registry:

   npm publish

Running unit tests

To execute unit tests with the Karma test runner, use the following command:

ng test

Running end-to-end tests

For end-to-end (e2e) testing, run:

ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.