In Omni you can customize the look and feel of your dashboards by creating custom themes. Our documentation here covers the basics of theming and the CSS elements you can update to create your own stylings of your dashboards. If you are not experienced in creating custom webpages, this process may take some time to get right and have the dashboard presented the way you want. In the age of AI that doesn’t need to be the case! In this article we will cover how we can easily create dashboard themes with the help of ChatGPT.
Getting the Theme config:
First, we need a starting point. Omni allows for importing of a theme config, but first we need a default config as a starting point. Below is a starting config with a place holder for every input possible minus series palettes that you can add later.
{
"dashboard-key-color": "1",
"dashboard-background": "1",
"dashboard-tile-margin": "1",
"dashboard-tile-shadow": "1",
"dashboard-page-padding": "1",
"dashboard-control-radius": "1",
"dashboard-key-text-color": "1",
"dashboard-tile-background": "1",
"dashboard-tile-border-color": "1",
"dashboard-tile-border-style": "1",
"dashboard-tile-border-width": "1",
"dashboard-control-background": "1",
"dashboard-control-text-color": "1",
"dashboard-tile-border-radius": "1",
"dashboard-control-label-color": "1",
"dashboard-filter-input-radius": "1",
"dashboard-control-border-color": "1",
"dashboard-tile-text-body-color": "1",
"dashboard-tile-title-font-size": "1",
"dashboard-control-outline-color": "1",
"dashboard-tile-title-text-color": "1",
"dashboard-control-popover-radius": "1",
"dashboard-tile-title-font-family": "1",
"dashboard-tile-title-font-weight": "1",
"dashboard-filter-input-background": "1",
"dashboard-filter-input-icon-color": "1",
"dashboard-filter-input-text-color": "1",
"dashboard-filter-input-token-color": "1",
"dashboard-control-placeholder-color": "1",
"dashboard-filter-input-accent-color": "1",
"dashboard-filter-input-border-color": "1",
"dashboard-tile-text-secondary-color": "1",
"dashboard-control-popover-background": "1",
"dashboard-control-popover-link-color": "1",
"dashboard-control-popover-text-color": "1",
"dashboard-filter-input-outline-color": "1",
"dashboard-tile-text-body-font-family": "1",
"dashboard-tile-text-code-font-family": "1",
"dashboard-menu-item-interactive-color": "1",
"dashboard-control-popover-border-color": "1",
"dashboard-button-transparent-text-color": "1",
"dashboard-control-popover-divider-color": "1",
"dashboard-filter-input-token-text-color": "1",
"dashboard-filter-input-placeholder-color": "1",
"dashboard-filter-input-accent-invert-color": "1",
"dashboard-button-transparent-interactive-color": "1",
"dashboard-control-popover-secondary-text-color": "1"
}
First Prompt:
Now that we have the config we can give ChatGPT a prompt to update this config to match the style you want. For example, “I want a fun and funky style that feels like I am drinking a mai tai at sunset in Hawaii while checking my company pulse dashboard on vacation”. We can take this config and create a new theme in Omni. In the bottom left corner you can select the Import option and copy and paste this config into it and save.
This is the resulting vis config and dashboard
{
"dashboard-background": "linear-gradient(to top, #ff7e5f, #feb47b, #ffcc33);",
"dashboard-tile-margin": "",
"dashboard-tile-shadow": "#ff5733",
"dashboard-page-padding": "100",
"dashboard-tile-background": "#ffcc33",
"dashboard-tile-border-color": "#ff5733",
"dashboard-control-background": "#ff7e5f",
"dashboard-control-text-color": "#fff8dc",
"dashboard-tile-border-radius": "16px",
"dashboard-control-label-color": "#ffebcd",
"dashboard-control-border-color": "#ffebcd",
"dashboard-tile-text-body-color": "#007acc",
"dashboard-control-outline-color": "#007acc",
"dashboard-tile-title-text-color": "#ff4500",
"dashboard-filter-input-background": "#fbd786",
"dashboard-control-placeholder-color": "#fff8dc",
"dashboard-filter-input-accent-color": "#32cd32",
"dashboard-filter-input-border-color": "#fff8dc",
"dashboard-tile-text-secondary-color": "#ff6347",
"dashboard-control-popover-background": "#ffcc33",
"dashboard-control-popover-text-color": "#ff4500",
"dashboard-filter-input-outline-color": "#ff4500",
"dashboard-menu-item-interactive-color": "#32cd32",
"dashboard-control-popover-border-color": "#ff7e5f",
"dashboard-control-popover-divider-color": "#ff5733",
"dashboard-button-transparent-interactive-color": "#32cd32",
"dashboard-control-popover-secondary-text-color": "#ff7e5f"
}
Second Prompt:
I can continue to refine my theme with prompts like, “Can i get it updated as if the sun has gone below the horizon with a lighter background and the tiles pop more like the stars at night". This updated theming to this:
{
"dashboard-background": "linear-gradient(to top, #1e3c72, #2a5298, #6a82fb);",
"dashboard-tile-margin": "12px",
"dashboard-tile-shadow": "rgba(255, 223, 186, 0.5) 0px 4px 12px",
"dashboard-page-padding": "80",
"dashboard-tile-background": "rgba(255, 223, 186, 0.9)",
"dashboard-tile-border-color": "#ffd700",
"dashboard-control-background": "rgba(255, 239, 213, 0.85)",
"dashboard-control-text-color": "#1e3c72",
"dashboard-tile-border-radius": "18px",
"dashboard-control-label-color": "#ffd700",
"dashboard-control-border-color": "#ffd700",
"dashboard-tile-text-body-color": "#00bfff",
"dashboard-control-outline-color": "#00bfff",
"dashboard-tile-title-text-color": "#ff4500",
"dashboard-filter-input-background": "#ffdead",
"dashboard-control-placeholder-color": "#ffebcd",
"dashboard-filter-input-accent-color": "#ff4500",
"dashboard-filter-input-border-color": "#ffebcd",
"dashboard-tile-text-secondary-color": "#ff6347",
"dashboard-control-popover-background": "rgba(255, 223, 186, 0.9)",
"dashboard-control-popover-text-color": "#ff4500",
"dashboard-filter-input-outline-color": "#ff4500",
"dashboard-menu-item-interactive-color": "#ff4500",
"dashboard-control-popover-border-color": "#ffd700",
"dashboard-control-popover-divider-color": "#ffa500",
"dashboard-button-transparent-interactive-color": "#ffa500",
"dashboard-control-popover-secondary-text-color": "#ff7e5f"
}
Dashboard
Final Real World Use Case
Those are fun, but maybe you want to design your dashboard to be very sleek and professional with your company colors. We can also tell ChatGPT what our company’s hex colors are and to theme it based on that. For example, say I was a data analyst at Starbucks and I was tasked to theme our dashboards professionally for the executive team. We would like to have the Starbucks font, rich classic Starbucks green, and some nice notes of Pikes Place coffee on the edges. Please use the Starbucks company hex colors, #0b421a, #fffcfc, #eac784, #362415, #604c4c”
This resulted in this professional looking dashboard:
Give it a try with your company colors or fun prompts. Please share any beautiful themes you create, we would love to see them!