Set the theme parameters

In order to apply a color theme to the agent UI, you need to pass a theme parameter to the mindset.init() method:

const lightTheme = {
    brightness: 'light',
    seedColor: '#8E004E',
    dynamicSchemeVariant:'fidelity'
    }

mindset.init({
    fetchAuthentication: getAuthToken, 
    appUid: "YOUR-APP-UID",
    theme: lightTheme
    })

Adjust your theme palette

With only 3 key parameters, you can generate harmonious color palettes.

The theme object looks like this:

const Theme = {
    brightness: 'light',
    seedColor: '#8E004E',
    dynamicSchemeVariant:'fidelity'
    }

1. brightness

   The brightness parameter can be either "light" or "dark". It is used to set the overall brightness of the theme.

2. seedColor

   The seedColor parameter is the main color of the theme, and it is used to generate the other colors of the palette.

3. dynamicSchemeVariant

   The dynamicSchemeVariant parameter is used to influence the color generation algorithm, see the Play with the dynamicSchemeVariant option section below for more details.

Examples of theme palette using only seedColor

Play with the dynamicSchemeVariant option

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:

Customizing the color values of each color token used in the agent UI

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.

const Theme = {
    brightness: 'light',
    seedColor: '#8E004E',
    primary: "#8F4C38",
    secondary: "#77574E",
    surface: "#FFFFFF",
    dynamicSchemeVariant:'fidelity'
    }

The surface token

When 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.

const Theme = {
    brightness: 'light',
    seedColor: '#8E004E',
    surface: "#FFFFFF",
    dynamicSchemeVariant:'fidelity'
    }

All available color tokens

When configuring individually all tokens, the final theme object which is passed to the mindset.init() method looks like this:

const Theme = {
    brightness: "light",
    primary: "#8F4C38",
    surfaceTint: "#8F4C38",
    onPrimary: "#FFFFFF",
    primaryContainer: "#FFDBD1",
    onPrimaryContainer: "#723523",
    secondary: "#77574E",
    onSecondary: "#FFFFFF",
    secondaryContainer: "#FFDBD1",
    onSecondaryContainer: "#5D4037",
    tertiary: "#6C5D2F",
    onTertiary: "#FFFFFF",
    tertiaryContainer: "#F5E1A7",
    onTertiaryContainer: "#534619",
    error: "#BA1A1A",
    onError: "#FFFFFF",
    errorContainer: "#FFDAD6",
    onErrorContainer: "#93000A",
    background: "#FFF8F6",
    onBackground: "#231917",
    surface: "#FFF8F6",
    onSurface: "#231917",
    surfaceVariant: "#F5DED8",
    onSurfaceVariant: "#53433F",
    outline: "#85736E",
    outlineVariant: "#D8C2BC",
    shadow: "#000000",
    scrim: "#000000",
    inverseSurface: "#392E2B",
    inverseOnSurface: "#FFEDE8",
    inversePrimary: "#FFB5A0",
    primaryFixed: "#FFDBD1",
    onPrimaryFixed: "#3A0B01",
    primaryFixedDim: "#FFB5A0",
    onPrimaryFixedVariant: "#723523",
    secondaryFixed: "#FFDBD1",
    onSecondaryFixed: "#2C150F",
    secondaryFixedDim: "#E7BDB2",
    onSecondaryFixedVariant: "#5D4037",
    tertiaryFixed: "#F5E1A7",
    onTertiaryFixed: "#231B00",
    tertiaryFixedDim: "#D8C58D",
    onTertiaryFixedVariant: "#534619",
    surfaceDim: "#E8D6D2",
    surfaceBright: "#FFF8F6",
    surfaceContainerLowest: "#FFFFFF",
    surfaceContainerLow: "#FFF1ED",
    surfaceContainer: "#FCEAE5",
    surfaceContainerHigh: "#F7E4E0",
    surfaceContainerHighest: "#F1DFDA"
}

There are available visual tools that can help you to generate a harmonious palette of colour values for each token.

Tools you can use to generate a color palette

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.

Google's Material 3 theme builder

1. Visit the Material Theme Builder website

   

2. Choose the core colors

   Choose the core colors of your theme.

3. Export the theme

   Export the theme as the Material Theme (JSON) format

4. Open the material-theme.json file

   Copy the light and dark theme objects from the material-theme.json file.

5. Convert from JSON to Javascript

   You can use any LLM to convert the JSON object to a Javascript object.

   From :

   javascriptCopy

       const Theme = {
           "primary": "#8F4C38",
           "surfaceTint": "#8F4C38",
           "onPrimary": "#FFFFFF",
           ....

   To :

   javascriptCopy

       const Theme = {
           primary: "#8F4C38",
           surfaceTint: "#8F4C38",
           onPrimary: "#FFFFFF",
           ....

6. Paste the theme object in your code

   Paste the final theme object in your code, and pass it to the mindset.init() method.

Detailed breakdown of the color tokens