ng-blatui
GitHubnpm

Theming

Every visual decision is a CSS variable. Override the tokens, flip data-attributes, or drive it all at runtime with ThemeStore.

Design tokens

Override any token under :root (and .dark for dark mode). Colors are oklch; the radius/spacing/shadow scales derive from a single value. 

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --radius: 0.625rem;
}
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
}

Presets via data-attributes

Set data-* attributes on <html> to switch base color, accent, radius, fonts, etc. The bundled tokens ship rules for each. 

<html data-base="stone" data-theme="violet" data-radius="1" class="dark">

Runtime: ThemeStore

A signals-based, SSR-safe service that powers the Customize toolbar. Tune the theme in code and export a paste-ready stylesheet. 

import { inject } from '@angular/core';
import { ThemeStore } from 'ng-blatui';

const theme = inject(ThemeStore);
theme.setPreset('violet');   // accent
theme.setBase('stone');      // base color
theme.toggle();              // light <-> dark
const css = theme.exportCss(); // complete, paste-ready stylesheet