Theming

Five built-in themes, all driven by the same token layer. Switch below to see every component respond instantly — no per-component overrides needed. To customize colors or shape, override semantic tokens after the import. Full token reference →

Buttons

Badges & chips

Default

Success

Warning

Danger

Info

Purple

Angular

Signals

SSR

Beta

Alerts

Themes persist to localStorage automatically.

Every token updates in one repaint — no reload.

Warning uses dark text on amber — passes WCAG AA.

Progress

Avatars

Form controls

Notifications

Remember me

How to set it up

Four steps from install to theme-switched runtime.

Import global styles
Loads every token tier and all five theme definitions in one line.
styles.scssscss
```
@use 'zyra-ng-ui';
```

Register the theme provider

Picks the initial theme and wires up ZyraThemeService before first render.

import { provideZyra } from 'zyra-ng-ui';

export const appConfig: ApplicationConfig = {
  providers: [provideZyra({ theme: 'dark' })],
};

Switch themes at runtime

Inject the service anywhere — every component repaints instantly, no reload.

import { Component, inject } from '@angular/core';
import { ZyraThemeService } from 'zyra-ng-ui';

@Component({ /* ... */ })
export class MyComponent {
  private theme = inject(ZyraThemeService);

  switchTheme() {
    this.theme.setTheme('ocean'); // 'dark' | 'light' | 'ocean' | 'amber' | 'rose'
  }
}

Override tokens (optional)

Set any token after the Zyra import to customize without forking a theme file.

:root {
  --zyra-color-primary: #7c3aed; /* semantic Tier 2 — propagates everywhere */
  --zyra-radius-md: 6px;         /* dimension Tier 1 — affects all md-radius components */
}

ZyraThemeService API

Signal-based, SSR-safe, tree-shakeable.

Member	Returns	Description
`theme`	`Signal<ZyraTheme>`	Read-only signal with the currently active theme name.
`setTheme(theme: ZyraTheme)`	`void`	Switch to a named theme. Persists to localStorage automatically.
`toggleTheme()`	`void`	Cycle through all available themes in order.
`isDark`	`Signal<boolean>`	True when the active theme uses a dark color scheme.

provideZyra() options

Passed once in app.config.ts. All fields optional.

Option	Type	Default	Description
`theme`	`'dark' \| 'light' \| 'ocean' \| 'amber' \| 'rose'`	`'dark'`	Initial theme applied before Angular hydrates.
`respectSystemTheme`	`boolean`	`false`	Use OS prefers-color-scheme when no localStorage value is saved.
`storageKey`	`string`	`'zyra-theme'`	localStorage key used to persist the user's last choice.

Live preview