Omni Admins can create document themes to customize the look and feel of dashboards. Once a theme is created, it can be reused on any dashboard. For internal dashboards it is available under File > Theming and for embedded dashboards it is available as a URL parameter.Documentation Index
Fetch the complete documentation index at: https://docs.omni.co/llms.txt
Use this file to discover all available pages before exploring further.
Creating themes
There are four main areas that can be controlled by themes: background, titles, borders, and elements. Changes are automatically applied when a user interacts with the theme builder, but are only saved by pressing the Save button in the bottom right-hand corner of the panel.Using CSS in theme components
Omni leverages the power of CSS in themes. For example themable items that use CSS <color> value syntax support any valid CSS color value:| Named colors | salmon |
|---|---|
| Hex codes | #ff4794 |
| Color functions | rgb(255 71 148) or hsl(334.89deg 100% 63.92%) |
| Gradients | linear-gradient (#ff4794, #faaa6f) |
|---|
Importing themes
If you’ve already created a theme for your embedded dashboards you can import the theme by pasting the JSON into the Import modal.
Setting and customizing default color palettes for themes
When creating or editing a theme, you can set default color palettes for discrete and continuous data. These settings control the default colors applied to charts in dashboards using the theme. Both built-in palettes (such as Omni Blues, Viridis, and Category 10) and custom palettes created by your organization are available in the palette dropdowns. The selected palettes will be automatically applied to charts in the dashboard based on the data type.Only palettes that are visible in your organization settings will appear in the theme editor palette selection.
Editing themes
To make changes to the theme, use the (three dots icon) and select Edit. Any changes made to the theme will impact other internal dashboards that are using the theme.Managing themes
Organization Admins can manage document themes in their organization by navigating to Settings > Themes > Document themes.Appearance settings
Themes are not designed to work with the Appearance settings for individuals. For instance if an individual user has selected dark mode, for their appearance settings, some themes might look a little off.Themable components
This table highlights the elements currently available (and some sneak peeks for what is going to be available soon). For a visual example, you can toggle between light and dark mode to see how the different elements are impacted by themes and how that lines up with the CSS.| Category | Element | Sub-element | Default light | Default Dark | Accepts |
|---|---|---|---|---|---|
| Page | Dashboard Background | #FAFAFA | #262B36 | CSS background values | |
| Padding | 16px | 16px | CSS <length> value [Shorthand or individual side] | ||
| Palettes | Discrete | Any built-in or custom palette | |||
| Continuous | Any built-in or custom palette | ||||
| Tiles | Background | #ffffff | #161A22 | CSS background values | |
| Shadow | CSS box-shadow values | ||||
| Margin | 8px | 8px | CSS <length> value | ||
| Titles | Color | #373D48 | #CCD0D7 | CSS <color> value | |
| Font Size | 20px | 20px | CSS <length> value | ||
| Font Weight | 500 | 500 | CSS <number> value | ||
| Font Family | system | system | URL to remote woff2 file | ||
| Text | Color | #373D48 | #CCD0D7 | CSS <color> value | |
| Secondary Color | #676F7E | #B7BDC8 | CSS <color> value | ||
| Body Font Family | system | system | URL to remote woff2 file | ||
| Code Font Family | JetBrains Mono | JetBrains Mono | URL to remote woff2 file | ||
| Borders | Color | #EAECF1 | #2d343e | CSS <color> value | |
| Radius | 5px | 5px | CSS <length> value [Shorthand or individual side] | ||
| Style | Solid | Solid | CSS <line-style> value | ||
| Width | 1px | 1px | CSS <length> value | ||
| Controls | Background | #ffffff | #161A22 | CSS background values | |
| Border color | #D1D7E0 | #424857 | CSS <color> value | ||
| Text color | #070808 | #EBEDEF | CSS <color> value | ||
| Placeholder color | #6F7780 | #8F96A3 | CSS <color> value | ||
| Label color | #070808 | #EBEDEF | CSS <color> value | ||
| Radius | 5px | 5px | CSS <length> value [Shorthand or individual side] | ||
| Focus outline color | #3F78E9 | #3F78E9 | CSS <color> value | ||
| Control popover | Background | #ffffff | #22252A | CSS background values | |
| Text color | #070808 | #EBEDEF | CSS <color> value | ||
| Secondary text color | #6F7780 | #8F96A3 | CSS <color> value | ||
| Link color | #006CBA | #64A4DF | CSS <color> value | ||
| Border color | #D1D7E0 | #424857 | CSS <color> value | ||
| Radius | 5px | 5px | CSS <length> value [Shorthand or individual side] | ||
| Divider color | #E0E4EB | #343B46 | CSS <color> value | ||
| Inputs | Background | #FFFFFF | #161A22 | CSS background values | |
| Border color | #D1D7E0 | #424857 | CSS <color> value | ||
| Text color | #070808 | #EBEDEF | CSS <color> value | ||
| Placeholder color | #6F7780 | #8F96A3 | CSS <color> value | ||
| Icon color | #676F7E | #B7BDC8 | CSS <color> value | ||
| Radius | 5px | 5px | CSS <length> value [Shorthand or individual side] | ||
| Focus outline color | #3F78E9 | #3F78E9 | CSS <color> value | ||
| Accent color | #3F78E9 | #3F78E9 | CSS <color> value | ||
| Accent invert color | #FFFFFF | #080808 | CSS <color> value | ||
| Tokens | Background | #F0F6FF | #1A2432 | CSS background values | |
| Text color | #070808 | #EBEDEF | CSS <color> value | ||
| Buttons | Radius | 10rem | 10rem | CSS <length> value [Shorthand or individual side] | |
| Primary button | Background | #FF4794 | #F787AD | CSS <color> value | |
| Text color | #FFFFFF | #080808 | CSS <color> value | ||
| Transparent button | Text color | #373D48 | #CCD0D7 | CSS <color> value | |
| Hover background | rgba(115,123,140,.08) | rgba(115,123,140,.24) | CSS <color> value | ||
| Menu item | Hover background | rgba(115,123,140,.08) | rgba(115,123,140,.24) | CSS <color> value |
