Angular Theme Library
ngx-ui
SSR-safe Angular theming primitives for dark/light mode, density, radius, and document-level UI state.
Extracted from ngx-core into a focused package so theme behavior can evolve independently from the wider utility library.
landing.ts
Project Overview
Package
ngx-ui
Focused Angular theme utilities with browser-only APIs guarded so SSR stays intact.
License
MIT
Published as a public package and designed for reuse across multiple apps.
Installation
Install the package
$ npm i --save ngx-uiUsage
Bootstrap with provideTheme()
import { provideTheme } from 'ngx-ui';
export const appConfig = {
providers: [provideTheme()],
};Configuration
Drive the theme service directly
Set mode, density, and radius through one service instead of scattering theme state across components and ad hoc storage helpers.
import { inject } from '@angular/core';
import { ThemeService, provideTheme } from 'ngx-ui';
export const appConfig = {
providers: [provideTheme()],
};
const themeService = inject(ThemeService);
themeService.setMode('dark');
themeService.setDensity('comfortable');
themeService.setRadius('rounded');Features
What ngx-ui includes
Bootstrap
Standalone-first setup centered on provideTheme() so theme state initializes once during app startup.
provideTheme() | environment initializer | SSR-safe startup defaults
Mode switching
Use one service to keep light and dark state in sync with the document and persisted storage.
ThemeService.mode() | setMode() | localStorage persistence
Density and radius
Theme controls go beyond mode so design systems can expose compact spacing and alternate corner styles.
setDensity() | setRadius() | html[data-density] and html[data-radius]
Theme cycling
Preview every supported mode, density, and radius combination from one utility method.
themeIndex signal | nextTheme() | design-system previews
Reference
Documented feature pages
The detailed page below documents the Theme API and its bootstrap pattern.