Quick Start

The fastest way to add theme management to your Angular 20+ application.

1. Install

Run the following command to install the library and automate the initial configuration:

ng add ngx-theme-stack

During installation, choose the Quick Mode for instant setup with default themes (light, dark, system).

Since ng add is currently not supported for Bun environments, please use this two-step process:

Install:
Terminal window
```
bun add ngx-theme-stack
```
Configure:
Terminal window
```
ng generate ngx-theme-stack:ng-add
```

This ensures Bun handles the dependency management while the schematic automates the code configuration (providers, index.html, tokens, etc.).

2. Define your styles

The installation creates a src/themes.css file. This is where you define your theme variables:

:root {
  --primary: #6c00f9;
}

[data-theme='dark'] {
  --primary: #ff0069;
}

3. Toggle themes

Inject the ThemeToggleService anywhere in your application to switch between themes:

import { Component, inject } from '@angular/core';
import { ThemeToggleService } from 'ngx-theme-stack';

@Component({
  selector: 'app-theme-toggle',
  template: `
    @if (themeToggle.isHydrated()) {
      <button (click)="themeToggle.toggle()">
        Theme: {{ themeToggle.resolvedTheme() }}
      </button>
    } @else {
      <!-- Skeleton loader while the app hydrates -->
      <div class="skeleton-toggle"></div>
    }
  `
})
export class ThemeToggleComponent {
  protected themeToggle = inject(ThemeToggleService);
}

Next Steps

Want to know more? Check out the full guide or explore specific utilities.

Getting Started Deep dive into all features and architecture.

Utilities Explore all available theme services.