Star5

Theming

Zyra UI ships five themes built on the same token layer — switch below to preview how every component responds instantly, with no per-component changes required. For the full token catalog and override rules, see Theme tokens →.

Live preview

Buttons

Badges

DefaultSuccessWarningDangerInfoPurple

Alerts

Form controls

Active theme tokens

  • Background--zyra-color-bg-app
  • Surface--zyra-color-surface
  • Text--zyra-color-text
  • Text muted--zyra-color-text-muted
  • Border--zyra-color-border
  • Border strong--zyra-color-border-strong
  • Primary--zyra-color-accent
  • Primary hover--zyra-color-accent-hover
  • Accent secondary--zyra-color-accent-secondary
  • Accent tertiary--zyra-color-accent-tertiary
  • Success--zyra-color-success
  • Warning--zyra-color-warning
  • Danger--zyra-color-danger
  • Info--zyra-color-info

How to set it up

Step 01

Import global styles

Loads every token tier and all five theme definitions in one line.

// styles.scss
@use 'zyra-ng-ui';

Step 02

Register the theme provider

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

// app.config.ts
import { provideZyra } from 'zyra-ng-ui';

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

Step 03

Switch themes at runtime

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

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

const theme = inject(ZyraThemeService);
theme.setTheme('ocean'); // 'dark' | 'light' | 'ocean' | 'amber' | 'rose'

Step 04

Override tokens (optional)

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

// styles.scss — after @use 'zyra-ng-ui'
:root {
  --zyra-color-accent: #7c3aed;
  --zyra-radius-md: 6px;
}