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 and 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.
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 dashboard themes in their organization by navigating to Settings > Themes > Dashboard 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 peaks 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 existing palette | |||
| Continuous | Any existing 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 |
