Theming

Theme colors, light and dark color modes, and customizing Bootstrap in an Angular application.

Theme colors

Bootstrap 6 colors a component with a .theme-* class. Components that support it have a theme input that sets this class for you, and you can bind it like any other input:

<div bsAlert theme="success">…</div>
<button type="button" bsButton="outline" theme="danger">Delete</button>
<span bsBadge [theme]="status() === 'failed' ? 'danger' : 'secondary'">…</span>

The themes are primary, accent, success, danger, warning, info, inverse and secondary. Use the BsTheme type to pass a theme through your own components:

import { BsTheme } from 'bootstrap-ng';

readonly theme = input<BsTheme>('primary');

Color modes

Bootstrap 6 builds its colors with the CSS light-dark() function, so every page follows the visitor's system setting for light or dark mode with no extra code. bootstrap-ng components use Bootstrap's color tokens, so they switch with the page.

To force a mode for the whole application, set data-bs-theme on the <html> element in src/index.html:

<!doctype html>
<html lang="en" data-bs-theme="dark">
  …
</html>

Set it on any other element to force a mode for just that part of the page:

<div data-bs-theme="dark" class="p-5 bg-body fg-body">
  <div class="card">…</div>
</div>

Popups such as the datepicker calendar open in the top layer, outside the element they belong to. The datepicker's colorMode input forces a mode for its calendar.

Switching modes

To let people choose a mode, set the attribute from a component. Keep the choice in a signal and write it to the document in an effect():

import { Component, DOCUMENT, effect, inject, signal } from '@angular/core';
import { BsButton } from 'bootstrap-ng';

@Component({
  selector: 'app-color-mode',
  imports: [BsButton],
  template: `
    <button type="button" bsButton="text" (click)="toggle()">
      {{ mode() === 'dark' ? 'Light mode' : 'Dark mode' }}
    </button>
  `,
})
export class ColorMode {
  private readonly document = inject(DOCUMENT);
  protected readonly mode = signal<'light' | 'dark'>('light');

  constructor() {
    effect(() => this.document.documentElement.setAttribute('data-bs-theme', this.mode()));
  }

  protected toggle(): void {
    this.mode.update((mode) => (mode === 'dark' ? 'light' : 'dark'));
  }
}

If you save the choice, for example in localStorage, read it back before Angular starts. Otherwise a server-rendered or prerendered page paints in the system mode first and then flashes. A small inline script in src/index.html does this:

<script>
  (() => {
    let mode;
    try {
      mode = localStorage.getItem('color-mode');
    } catch {}
    if (mode === 'light' || mode === 'dark') {
      document.documentElement.setAttribute('data-bs-theme', mode);
    }
  })();
</script>

The theme toggle on this site works this way. See Server-side rendering for other code that should only run in the browser.

Customize with Sass

To change Bootstrap's design tokens at build time, import its Sass source in src/styles.scss instead of adding the compiled CSS to angular.json. Pass the tokens you want to change with with (), and Bootstrap merges them with its defaults:

@use 'bootstrap/scss/bootstrap' with (
  $root-tokens: (
    --spacer: 1.5rem,
  ),
  $alert-tokens: (
    --alert-padding-x: 2rem,
    --alert-border-radius: 1rem,
  )
);

The Angular CLI resolves bootstrap/scss/bootstrap from node_modules, so no extra configuration is needed. To add a theme color of your own, pass a $theme-colors map the same way. Bootstrap then generates a .theme-<name> class, which you add to a component yourself because the theme input only accepts the built-in names:

<button type="button" bsButton class="theme-brand">Upgrade</button>

Customize with CSS variables

Bootstrap outputs every token as a CSS variable with a --bs- prefix, so you can also change them in plain CSS, with no Sass build. Set them on a component's class to change every instance, or on one element:

.alert {
  --bs-alert-padding-x: 2rem;
  --bs-alert-border-radius: 1rem;
}

Bootstrap's own documentation lists every token: Theme, Color modes and Sass.