Using color theme and customizing the agent UI colors
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.
theme
parameter to the mindset.init()
method:
theme
object looks like this:
brightness
brightness
parameter can be either "light"
or "dark"
. It is used to set the overall brightness of the theme.seedColor
seedColor
parameter is the main color of the theme, and it is used to generate the other colors of the palette.dynamicSchemeVariant
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
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. |
primary
, secondary
and surface
and the rest of the colour palette will be generated using the dynamicSchemeVariant
and the generation algorithm.
surface
tokenwhite
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.
theme
object which is passed to the mindset.init()
method looks like this:
Visit the Material Theme Builder website
Choose the core colors
Export the theme
Open the material-theme.json file
light
and dark
theme objects from the material-theme.json
file.Convert from JSON to Javascript
Paste the theme object in your code
mindset.init()
method.brightness
surface
is set to black in dark mode and white in light mode, but if a specific surface color is used then this will be used regardless of what dark and light determine.dynamicSchemeVariant
seedColor
.Check the Play with the dynamicSchemeVariant option section above for more details.seedColor
seedColor
parameter is the main color of the theme, and it is used to generate the other colors of the palette.primary
surface
surfaceTint
onPrimary
primary
color.primaryContainer
primary
color used for container backgrounds.onPrimaryContainer
primaryContainer
color.secondary
onSecondary
secondary
color.secondaryContainer
secondary
color used for container backgrounds.onSecondaryContainer
secondaryContainer
color.tertiary
onTertiary
tertiary
color.tertiaryContainer
tertiary
color used for container backgrounds.onTertiaryContainer
tertiaryContainer
color.error
onError
error
color.errorContainer
error
color used for error message containers.onErrorContainer
errorContainer
color.onSurface
surface
color.surfaceVariant
surface
color.surfaceContainerHighest
outlineVariant
outline
color.shadow
scrim
inverseSurface
onInverseSurface
inverseSurface
color.inversePrimary
inverseSurface
.primaryFixed, onPrimaryFixed, primaryFixedDim, onPrimaryFixedVariant, secondaryFixed, onSecondaryFixed, secondaryFixedDim, onSecondaryFixedVariant, tertiaryFixed, onTertiaryFixed, tertiaryFixedDim, onTertiaryFixedVariant
surfaceDim, surfaceBright, surfaceContainerLowest, surfaceContainerLow, surfaceContainer, surfaceContainerHigh