Summary

The Theme tab in the Playground lets you control the colour palette and typography of your Grevon AI chat widget. You can match the widget’s visual style to your website or brand guidelines by setting primary, secondary, and accent colours, text and background colours, font family, and base font size. All changes are previewed live before you save.

Where to find it

From the left-hand navigation menu, go to Playground, then click the Theme tab. The Live Widget Preview on the right updates as you adjust colours and typography, so you can see the result in real time before committing your changes.

Theme Fields Explained

Primary — The dominant colour used for key interactive elements such as buttons, link highlights, and the chat header. This should typically be your main brand colour.

Secondary — A complementary colour used for supporting UI elements and accents. Use a colour that pairs well with your Primary but provides visual contrast.

Accent — A highlight colour applied to small interactive details such as active states, hover effects, and focused elements. Typically a tertiary brand colour.

Text colour — The colour of all body copy and labels inside the chat widget. Defaults to a near-black (#0f0f0f). Ensure sufficient contrast against your Background colour for readability.

Background colour — The background fill of the chat window. Defaults to white (#ffffff). Adjust this to match your website’s background or preferred widget aesthetic.

Font family — Select the font used for all text within the chat widget from the dropdown. Choose a font that aligns with your website’s typography for a seamless look.

Base Font size — Set the default text size for the widget. The default is 12px. Increase this for improved readability or to match your site’s body text size.

How to Set Up Your Theme

1. In the left-hand navigation, go to Playground and click the Theme tab.

2. Click the colour swatch next to Primary to open the colour picker. Enter your brand’s primary hex code or select a colour, then confirm.

3. Repeat for Secondary and Accent colours.

4. Set the Text colour to ensure readability against your chosen Background colour. High contrast (e.g. dark text on a light background) is recommended.

5. Set the Background colour to match your website’s background or widget design preference.

6. Select your preferred Font family from the dropdown list.

7. Select a Base Font size from the dropdown. The default is 12px.

8. Review your changes in the Live Widget Preview panel on the right.

9. Click Save Theme to apply your changes. To discard all changes and return to the system defaults, click Reset To Default.

FAQs

Below are common questions about the Theme tab. If your question isn’t answered here, please contact Grevon support.

What format should I use for colour values?

Colours are entered as hex codes (e.g. #70d6f0 for a teal). You can also use the colour picker to select visually. Each field displays the current hex value.

How do I reset the theme back to the default colours?

Click the Reset To Default button in the top-right of the Theme tab. This will revert all colour and typography settings to the Grevon system defaults.

Does the font I select apply to the entire widget?

Yes. The Font family and Base Font size apply globally to all text rendered inside the chat widget, including the greeting, bot messages, and user messages.

Does the Theme affect the FAB button as well?

The Primary colour typically influences the FAB button background. The FAB icon image itself is set separately in the Branding tab.