Colours and theming

The chat is an HTML page, so its colours are CSS — but you never write CSS. The page defines everything through --hc-* variables, and the component fills them from the framework your application already uses.

VCL: it follows your style

With FollowVclStyle := True (the default) the panel is coloured after the active VCL style, and follows a style change at runtime, including while the chat is open:

TStyleManager.TrySetStyle('Windows11 Modern Dark');   // the chat follows

Seven base colours are derived from the style — background, surface, text, border, accent, and the light/dark decision — using the same per-style table that StyledComponents curates for the styles shipped with Delphi (117 of them). For a style that is not in the table, the values come from StyleServices. The accent is the more saturated of the style's hot and hot-border colours, because several styles use a pale hover and keep the brand colour on the border.

Everything else — bubbles, muted text, code background, the contrast text on the accent — is derived from those, so a style you never heard of still produces a readable chat.

FollowVclStyle := False leaves the page with its own light/dark defaults, which follow the operating system preference.

FMX: ThemeMode

There are no VCL styles, so you choose:

HelpChatAI.ThemeMode := tmAuto;    // page defaults, following the system (default)
HelpChatAI.ThemeMode := tmLight;
HelpChatAI.ThemeMode := tmDark;

Adjusting the result

OnGetTheme receives the theme just before it is applied. Change what you want, leave the rest:

procedure TMainForm.HelpChatGetTheme(Sender: TObject; var ATheme: THelpChatTheme);
begin
  ATheme.Accent := '#c8102e';          // our brand red on the send button and user bubbles
  ATheme.FontFamily := 'Segoe UI, sans-serif';
end;

Every colour is a #rrggbb string. Set only the base ones and the derived ones are recomputed; empty the whole record and the page keeps its defaults.

// a theme of your own, ignoring the framework entirely
procedure TMainForm.HelpChatGetTheme(Sender: TObject; var ATheme: THelpChatTheme);
begin
  ATheme := THelpChatTheme.Dark;
  ATheme.Accent := '#00a3a3';
end;

How it reaches the page

Two paths, so that a page never appears with the wrong colours:

• at load, the theme is rendered as a :root { --hc-bg: ...; } rule placed after the stylesheet, so it wins;
• at runtime, a style change pushes the new values into the open page with window.hcApplyTheme({...}) — no reload, no flicker.

A VCL style change recreates windows, which makes the WebView reload the page; the component stores the new theme before that happens, so the reload already asks for the right colours.

Changing the page itself

The page (resources/panel.html, panel.css, panel.js plus htmx) is compiled into source/HelpChatAI.Panel.res. Edit the files, run Tools\BuildResources.cmd and rebuild: the whole chat is one self-contained page, with no external asset to deploy.

Two rules if you touch it:

• never hard-code a colour outside the --hc-* definitions, or theming stops working;
• a new outbound call must be named in the page's Content-Security-Policy, otherwise the browser drops it before it reaches the network.