Core

Theming

The Theming service provides the color system used across BuilderKit. It enables dynamic theming with support for light and dark modes, generates CSS variables for primary, neutral, and error colors, and integrates directly with Angular Material’s styling system.

It is required for both custom component styles and Angular Material compatibility.

The service automatically creates CSS variables for every color scale and injects them into the DOM. These tokens are used throughout BuilderKit components and styles to ensure consistency.

Provides a single source of truth for theme colors
Generates palette variables for light and dark modes
Adds scheme-aware classes to the <html> element
Supports system-based dark mode via media queries
Allows dynamic updates to colors and schemes at runtime
Compatible with Angular Material's CSS custom property system

Provider Setup

To enable theming capabilities, add the provideTheming function to your application configuration:

import { provideTheming } from '@/app/core/theming';

export const appConfig: ApplicationConfig = {
  providers: [
    provideTheming({
      scheme: 'light',
      primary: '#3E63DD',
      error: '#E5484D',
      neutral: '#8B8D98',
    }),
    // ...other providers
  ],
};

Configuration

The theme configuration accepts the following options:

{
  scheme: 'light',        // 'light' | 'dark' | 'system'
  primary: '#3E63DD',     // Primary color (hex)
  error: '#E5484D',       // Error color (hex)
  neutral: '#8B8D98',     // Neutral color (hex)
}

Dynamic Scheme Updates

The current color scheme can be accessed and updated at runtime using the Theming service:

protected theming = inject(Theming);

updateScheme(scheme: Scheme) {
  this.theming.scheme.set(scheme);
}

Dynamic Theme Updates

The entire theme can also be accessed and updated dynamically at runtime:

protected theming = inject(Theming);

updateTheme(theme: Theme) {
  this.theming.theme.set(theme);
}