Theme

A theme is a named set of CSS custom properties — one value per color role (primary, background, destructive, …), in a light and a dark variant. ThemeStore holds every registered theme and, for each scope you define, which one is currently active and in which mode.

Minimal example

import { bootstrapApplication } from "@angular/platform-browser";
import { withThemeBodyHook, withThemes, type Theme } from "@sinequa/atomic-angular";
import { AppComponent } from "./app.component";
import { appConfig } from "./app.config";

// A theme repeats every color role of the built-in "Default" theme (see the
// exported `Theme` type) — only `primary` is shown here for brevity.
const THEMES = [{ name: "Ruby", colors: { primary: "0 84% 45%" } }] as unknown as Theme[];

bootstrapApplication(AppComponent, appConfig)
  .then((app) => withThemes(app, THEMES))
  .then((app) => withThemeBodyHook(app, { scope: "application", theme: "Ruby" }))
  .catch((err) => console.error(err));

Exporting THEMES from its own file is worth doing as soon as a theme carries more than a couple of colors — a full color set is a large literal, and keeping it out of app.config.ts keeps the bootstrap file readable.

How it works

withThemes() pushes your themes into a module-level array read by ThemeStore — it does nothing else, and order relative to withThemeBodyHook() matters: the hook reads that array through setCurrentTheme(), so it must run after withThemes() in the bootstrap chain. withThemeBodyHook() is the one integration that targets document.body directly, through the fixed scope name "application" (or whatever scope you pass it) — every other scope is applied through [themeProvider] on a specific element instead (see ThemeProvider).

Options

Pitfalls

What's next