You can apply a custom theme to your embedded Omni instance to make it blend with the look and feel of your own application. Themes let you control colors, typography, and overall styling so the analytics experience matches your brand, not the other way around.
Whether you’re going for subtle alignment or a fully bespoke look, embedding with a custom theme helps create a seamless, cohesive experience for your users.
Customizing application themes
To have this feature enabled, reach out to Omni support.
Customizing dashboard themes
There are two ways to create and use custom dashboard themes: directly on a dashboard or through the URL.
To make your theme dynamic using some external logic, you can adjust the URL theme properties using the customTheme parameter. Page properties
| Property Name | Description | Accepts |
|---|
| dashboard-background | The background of the embedded dashboard. | background |
| dashboard-page-padding | The padding of the embedded dashboard page. | padding |
Tile properties
| Property Name | Description | Accepts |
|---|
| dashboard-tile-margin | The spacing around tile elements on the embedded dashboard. | padding |
| dashboard-tile-background | The background of the embedded dashboard’s tiles. | background |
| dashboard-tile-shadow | The box shadow of the embedded dashboard’s tiles. | box-shadow |
| dashboard-tile-text-body-color | The text color of primary text in the embedded dashboard’s tiles. Primary text refers to the tile title of most tiles or the single value tiles. | color |
| dashboard-tile-text-secondary-color | The text color of secondary text in the embedded dashboard’s tiles. | color |
| dashboard-tile-border-color | The border color of the embedded dashboard’s tiles. | color |
| dashboard-tile-border-radius | The border radius of the embedded dashboard’s tiles. | border-radius |
| dashboard-tile-border-style | The border style of the embedded dashboard’s tiles. | border-style |
| dashboard-tile-border-width | The border width of the embedded dashboard’s tiles. | border-width |
| dashboard-tile-title-font-size | The font size of the embedded dashboard tiles’ titles. | font-size |
| dashboard-tile-title-font-weight | The font weight of embedded dashboard tiles’ titles. | font-weight |
| dashboard-tile-title-text-color | The text color of title text in the embedded dashboard’s tiles. | color |
| dashboard-tile-title-font-family | The font family of title text in the embedded dashboard’s tiles. Pass a link to a remote woff2 file to use a custom font. | woff2 url |
| dashboard-tile-text-body-font-family | The font family of the body text in the embedded dashboard’s tiles. Pass a link to a remote woff2 file to use a custom font. | woff2 url |
| dashboard-tile-text-code-font-family | The font family of a markdown <code> element in the embedded dashboard’s markdown tiles. Pass a link to a remote woff2 file for custom font usage. | woff2 url |
Controls
Page-level controls like filters, field switchers, and period-over-period.
| Property Name | Description | Accepts |
|---|
| dashboard-control-background | The background of filter controls in the embedded dashboard. | background |
| dashboard-control-radius | The border radius of controls. | border-radius |
| dashboard-control-border-color | The border color of filter controls in the embedded dashboard. | color |
| dashboard-control-text-color | The text color of filter controls in the embedded dashboard. | color |
| dashboard-control-placeholder-color | The text color of placeholder text inside controls. | color |
| dashboard-control-label-color | The text color of labels above filter controls in the embedded dashboard. | color |
| dashboard-control-outline-color | The outline color for controls when they have focus. | outline-color |
Control popover properties
Styles applied to control popovers and the inputs inside of them.
| Property Name | Description | Accepts |
|---|
| dashboard-control-popover-background | The background of filter control popovers in the embedded dashboard. | background |
| dashboard-control-popover-text-color | The base text color in control popovers. | color |
| dashboard-control-popover-secondary-text-color | The secondary text color in control popovers. | color |
| dashboard-control-popover-link-color | The color of links in control popovers. | color |
| dashboard-control-popover-divider-color | The color of dividers in control popovers. | color |
| dashboard-control-popover-radius | The border radius of control popovers. | border-radius |
| dashboard-control-popover-border-color | The border color of control popovers. | color |
| dashboard-filter-input-background | The background of filter inputs inside of the popover. | background |
| dashboard-filter-input-radius | The border radius of filter inputs inside the popover. | border-radius |
| dashboard-filter-input-border-color | The border color of filter inputs inside the popover. | color |
| dashboard-filter-input-text-color | The text color of filter inputs inside the popover in the embedded dashboard. | color |
| dashboard-filter-input-placeholder-color | The color of placeholder text inside filter inputs. | color |
| dashboard-filter-input-icon-color | The color of icons inside filter inputs. | color |
| dashboard-filter-input-outline-color | The outline color inputs when they have focus. | outline-color |
| dashboard-filter-input-accent-color | The color of checkbox, radio, and toggle inputs. | color |
| dashboard-filter-input-accent-invert-color | The invert color of elements in checkbox and radio inputs. | color |
| dashboard-filter-input-token-color | The background color of tokens in multi-select inputs. | color |
| dashboard-filter-input-token-text-color | The text color of tokens in multi-select inputs. | color |
| Property Name | Description | Accepts |
|---|
| dashboard-key-color | The key color of the embedded dashboard, used on filter Update buttons and other key elements. | color |
| dashboard-key-text-color | The key text color of the embedded dashboard, used on the text of filter Update buttons and other key elements. | color |
| dashboard-button-radius | The border radius of buttons in popover controls. | border-radius |
| dashboard-button-transparent-text-color | The text color of transparent buttons in filter control popovers. | color |
| dashboard-button-transparent-interactive-color | The background color of transparent buttons in filter control popovers when the user hovers over the button. | color |
| dashboard-menu-item-interactive-color | The background color of menu items in filter control popovers when the user hovers over it. | color |
Retrieving woff2 file links from Google Fonts
If you have a woff2 file link like this:https://fonts.gstatic.com/s/libertinuskeyboard/v2/NaPEcYrQAP5Z2JsyIac0i2DYHaapaf43dru5tEg8zfg.woff2You must wrap it with the css url function when used in Omni, like so:url(https://fonts.gstatic.com/s/libertinuskeyboard/v2/NaPEcYrQAP5Z2JsyIac0i2DYHaapaf43dru5tEg8zfg.woff2)
dashboard-tile-title-font-family support links to a remote woff2 file. A typical use case is to link to a woff2 file from a Google Font. To grab the link to a Google Font woff2 file, perform the following steps:
- Navigate fonts.google.com and click on your font of choice. For this example, we’ll be using the “Yarndings 12” font.
- That click should take you to a font specimen page. On that font specimen page, click the “Get font” button.
- After pressing “Get font” you’ll be taken to a selection page. On that selection page, click the “Get embed code” button.
- Go to the fonts.googleapis.com link that appears in the third <link> element of the example embed code. Note that some Google Fonts allow you to customize font weight and font style in the left panel so feel free to filter down to the exact font styling you’d like.
- Find the @font-face at-rule under labeled “latin” and copy the src property url(…).
- Pass that
url(...) value into the appropriate customTheme property when generating your Omni SSO embed link.
{ "dashboard-tile-title-font-family": "url(https://fonts.gstatic.com/s/yarndings12/v2/55xreyp2N8T5P2LJbZAlkY9s9pjNAWZEnA.woff2)", }
- And voilà!
