The main color used throughout the UI, often for key interactive elements.
This is used for the main agent text bubble, and other primary buttons like the thread list and capability chooser.
Using color theme and customizing the agent UI colors
There are 2 ways to customize the agent UI colors:
Customizing the color values of each color token used in the agent UI
You can apply a harmonious color theme to the agent UI by just altering 3 parameters: brightness
, seedColor
, and dynamicSchemeVariant
.
It allows you to quickly set a color theme for the agent UI without having to customize each color token individually, and match your brand colors.
In order to apply a color theme to the agent UI, you need to pass a theme
parameter to the mindset.init()
method:
With only 3 key parameters, you can generate harmonious color palettes.
The theme
object looks like this:
brightness
The brightness
parameter can be either "light"
or "dark"
. It is used to set the overall brightness of the theme.
seedColor
The seedColor
parameter is the main color of the theme, and it is used to generate the other colors of the palette.
dynamicSchemeVariant
The dynamicSchemeVariant
parameter is used to influence the color generation algorithm, see the Play with the dynamicSchemeVariant option section below for more details.
seedColor
#C42A73 - Light Theme
#C42A73 - Dark Theme
The core purpose of dynamicSchemeVariant
is to allow you to select a specific aesthetic interpretation or “flavor” of the automatically generated color scheme.
The dynamicSchemeVariant
can take one of the following values:
Value | Description |
---|---|
tonalSpot | Default for Material theme colors. Builds pastel palettes with a low chroma. |
fidelity | The resulting color palettes match seed color, even if the seed color is very bright (high chroma). |
monochrome | All colors are grayscale, no chroma. |
neutral | Close to grayscale, a hint of chroma. |
expressive | Pastel colors, medium chroma palettes. The primary palette’s hue is different from the seed color, for variety. |
content | Almost identical to fidelity. Tokens and palettes match the seed color. ColorScheme.primaryContainer is the seed color, adjusted to ensure contrast with surfaces. The tertiary palette is analogue of the seed color. |
rainbow | A playful theme where the seed color’s hue does not appear in the theme’s generated colors. It aims for a broader spectrum of hues. |
fruitSalad | Another playful theme, similar to rainbow , where the seed color’s hue also typically does not appear in the generated theme. |
To achieve the best and most predictable results, you can precisely configure the color of each token in your palette. (See the All available color tokens section ).
You can also choose to specify only key colors such as primary
, secondary
and surface
and the rest of the colour palette will be generated using the dynamicSchemeVariant
and the generation algorithm.
surface
tokenWhen generating the color palette, the agent background color will be set with a tint.
Many web pages use the white
color as the background, in which case you can set the surface
token to white
to ensure the agent UI blends seamlessly with the page background.
You can of course set the surface
token to any color you want.
When configuring individually all tokens, the final theme
object which is passed to the mindset.init()
method looks like this:
To understand where each token is used in the agent system : Detailed breakdown of the color tokens
There are available visual tools that can help you to generate a harmonious palette of colour values for each token.
To ensure your agent’s UI effectively matches your brand, we recommend using Google’s Material 3 theme builder to generate a usable color palette. This web-based tool is easily accessible to developers and designers, and provides a robust starting point.
For those working in Figma, the Material Theme Builder plugin for Figma offers the added flexibility to make further manual adjustments to each color in the generated palette. This allows for fine-tuning to perfectly align with your brand’s aesthetic.
By leveraging these tools, you can create a consistent and brand-aligned visual experience across your agent’s user interface, enabling your customers to easily recognize and connect with your brand.
Visit the Material Theme Builder website
Choose the core colors
Choose the core colors of your theme.
Export the theme
Export the theme as the Material Theme (JSON) format
Open the material-theme.json file
Copy the light
and dark
theme objects from the material-theme.json
file.
Convert from JSON to Javascript
You can use any LLM to convert the JSON object to a Javascript object.
From :
To :
Paste the theme object in your code
Paste the final theme object in your code, and pass it to the mindset.init()
method.