Theming

@ngaf/chat uses CSS custom properties (variables) for all visual styling. Every color, radius, font, and spacing value is controlled by a variable prefixed with --ngaf-chat-, making it straightforward to match your application's design system.

#How Theming Works

Chat components define all design tokens using CSS custom properties on the :host element. The token system supports automatic light/dark switching via prefers-color-scheme and explicit override via a [data-ngaf-chat-theme] attribute.

No imported stylesheet is needed - tokens are applied automatically by each component's encapsulated styles. An optional global stylesheet (@ngaf/chat/chat.css) is available if you want to customize tokens at the :root level.

#CSS Custom Properties Reference

#Colors

#Shape & Layout

#Typography

#Light and Dark Mode

Tokens default to light values. Dark mode activates automatically when the user's system preference is prefers-color-scheme: dark, unless the host element has data-ngaf-chat-theme="light" set.

The switching logic is:

1. Light variables are applied by default on :host
2. @media (prefers-color-scheme: dark) overrides with dark variables, unless data-ngaf-chat-theme="light" is set
3. [data-ngaf-chat-theme="dark"] forces dark variables regardless of system preference

#Customizing the Theme

#Override a single token at app root

/* src/styles.css */
:root {
  --ngaf-chat-primary: oklch(0.55 0.22 264);
}

#Force a theme via attribute

<!-- Force dark mode regardless of system preference -->
<chat data-ngaf-chat-theme="dark" [agent]="agent" />
 
<!-- Force light mode regardless of system preference -->
<chat data-ngaf-chat-theme="light" [agent]="agent" />

#Deep override via the optional global stylesheet

Import @ngaf/chat/chat.css in your global styles to get a :root-level baseline you can override:

/* src/styles.css */
@import '@ngaf/chat/chat.css';
 
:root {
  --ngaf-chat-primary: oklch(0.55 0.22 264);
  --ngaf-chat-radius-bubble: 10px;
}

#Brand Color Example

:root {
  /* Brand blues */
  --ngaf-chat-primary: #2563eb;
  --ngaf-chat-on-primary: #ffffff;
 
  /* Softer corners */
  --ngaf-chat-radius-bubble: 12px;
  --ngaf-chat-radius-input: 16px;
 
  /* Wider content area */
  --ngaf-chat-max-width: 56rem;
}

#Migration from --chat-* Tokens

If you previously customized --chat-* tokens, rename them to --ngaf-chat-*. Examples: