Skip to main content

Create a custom theme

Add a branded theme, Brand Night, to DIAL Chat, and replace the Chat logo and favicon, without building a new image. This guide is for platform engineers who run DIAL in Docker Compose. It assumes DIAL Chat 1.x and the DIAL Chat Themes service run in the same Compose project; see ai-dial-samples for a ready-made one.

Prerequisites​

  • DIAL Chat 1.x and the themes service in Docker Compose.
  • curl and jq.
  • Your logo as brand-logo.svg and your favicon as brand-favicon.png (32 × 32).

Steps​

1. Start from the default configuration​

A new theme takes Chat's built-in light value for every token it omits, so start from a complete theme. Download the default file of the themes release you run:

mkdir -p themes
curl -o themes/config.json \
  https://raw.githubusercontent.com/epam/ai-dial-chat-themes/0.21.1/static/config.json
cp brand-logo.svg brand-favicon.png themes/
themes/
├── brand-favicon.png
├── brand-logo.svg
└── config.json

2. Add the theme and the images​

Copy the dark theme as brand-night, change its accent colors, and point the Chat images at your files:

jq '
  .themes += [
    .themes[]
    | select(.id == "dark")
    | .id = "brand-night"
    | .displayName = "Brand Night"
    | .colors += {
        "bg-control-accent": "#7C5CFF",
        "bg-control-accent-hover": "#6A4AF0",
        "text-accent": "#A08BFF",
        "stroke-accent": "#7C5CFF",
        "stroke-accent-focus": "#A08BFF",
        "bg-gradient-1": "#7C5CFF",
        "bg-gradient-2": "#4F8CFF",
        "bg-entity-icon": "#F3F4F6"
      }
  ]
  | .images["chat-logo-light"] = "brand-logo.svg"
  | .images["chat-logo-dark"] = "brand-logo.svg"
  | .images["chat-favicon"] = "brand-favicon.png"
' themes/config.json > themes/config.new.json && mv themes/config.new.json themes/config.json

bg-entity-icon gives model and agent icons a light plate, so dark vendor logos stay visible. The logos are shared by every theme, and a theme other than dark shows chat-logo-light, so this example uses one logo for both. The token names are listed in Themes configuration.

3. Mount the files into the themes service​

Mount each file over its path in /var/www, so the default model icons stay in place:

themes:
  image: epam/ai-dial-chat-themes:0.21.1
  volumes:
    - ./themes/config.json:/var/www/config.json:ro
    - ./themes/brand-logo.svg:/var/www/brand-logo.svg:ro
    - ./themes/brand-favicon.png:/var/www/brand-favicon.png:ro

chat:
  environment:
    THEMES_CONFIG_URL: "http://themes:8080"

Apply the change:

docker compose up -d themes chat

4. Pick the theme​

Open DIAL Chat, go to Settings → Preferences, and select Brand Night. Chat caches the themes configuration for 5 minutes, so a later edit can take that long to appear.

Result​

The theme picker lists Light, Dark, Brand Night, and System. Brand Night uses the dark palette with your accent colors, and the header and the browser tab show your logo and favicon.

To open an embedded Chat in the new theme, pass its ID to the overlay:

const overlay = new ChatOverlay('#chat-root', {
  domain: 'https://chat.example.com',
  theme: 'brand-night',
});

Further reading​