---
title: Widget Appearance
slug: technical-docs/widget-appearance
docTags: 
createdAt: 2024-10-09T07:05:23.499Z
---

## Customize the look and feel of Elements to match the design of your site.

IntelliProve Widgets support visual customisation, which allows you to match the design of your site with the `themeOverrides` option. The layout of each Widget remains consistent, but you can modify colors and fonts.

::::WorkflowBlock
:::WorkflowBlockItem
Configure your [customer theming](docId:2kL5Bnrb-6uIcQrFAqsiG) 
:::

:::WorkflowBlockItem
If needed, fine-tune individual widgets by overriding [theming variables](docId:2kL5Bnrb-6uIcQrFAqsiG) 
:::
::::

# Customer Theming



![](https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/aO3tEuCN7tagURDxCZYQJ_image.png)

::::VerticalSplit{layout="right"}
:::VerticalSplitItem
The widgets share the same customer theming as configured for the Plug-in.

By default they will visually match with the rest of the design.

For more information on how the customer theming is configured, refer to the [web plug-in documentation](docId\:RJgsa73GTgnCTKQ9ufeUg).
:::

:::VerticalSplitItem
![](https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/u-yvb4P6VSVJ2NWXeHmaj_colors.jpg)
:::
::::

# Theming variables

The appearance of each individual widget can be fine-tuned by overriding the customer-level theming variables.

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
**Colors**

Each individual color in the customer theme can be overridden for an individual widget by passing the `themeOverrides` object when [creating the widget](docId\:fmag0nP7LDLer92Db4X_I).

Set the color value for a theme variable to the color HEX code, prefixed with "#".
:::

:::VerticalSplitItem
```javascript
const themeOverrides = {
    "surface_primary": "#FFFFFF",
    "surface_primary_support": "#EAEDF1",
    "surface_neutral": "#DBE1E7",
    "surface_focus": "#3A79FF",
    "surface_positive": "#3BD66F",
    "surface_positive_support": "#EDFCF2",
    "surface_warning": "#F5B71E",
    "surface_warning_support": "#FEF8E8",
    "surface_error": "#FF4667",
    "surface_error_support": "#FFEBEF",
    "surface_shadow": "#09218719",
    "surface_hover": "#00000019",
    "surface_video_overlay_button": "#00000019",
    "surface_modal_overlay": "#FFFFFFEB",
    "border_primary": "#DBE1E7",
    "border_disabled": "#EAEDF1",
    "text_heading": "#092187",
    "text_body": "#092187",
    "text_secondary": "#7186A0",
    "text_focus": "#FFFFFF",
    "text_disabled": "#DBE1E7",
    "text_overlay_disabled": "#FFFFFF33"
}
```
:::
::::

**Fonts**

:::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
The IntelliProve widgets automatically inherit the  font family from the CSS of the enclosing container.

This script configures the font family for the whole website `body`. 👉
:::

::::VerticalSplitItem
:::CodeblockTabs
Set global font

```css
/* Set font for the entire page */
body {
    font-family: 'Arial', sans-serif; /* Specify the font family */
}
```
:::
::::
:::::