Knowi's Themes feature lets you customize the visual appearance of your dashboards, widgets, and the Knowi interface to match your brand. Themes can be applied at the account, dashboard, or widget level.
Note: Access to theme management requires the appropriate user permissions. Contact your account admin if the Themes tab is not visible in your User Settings.
Built-in Themes
Knowi includes two built-in themes available to all accounts:
- Light - the default theme with a light background
- Dark - a dark background theme
Built-in themes cannot be edited or deleted, but can be cloned as a starting point for a custom theme.
Setting the Account Default Theme
The account default theme applies across all dashboards and widgets for all users in your account, unless overridden at the dashboard or widget level.
To set the account default, navigate to User Settings > Themes, click on a theme card, and select Set as Default. The active theme is indicated on its card.
Creating a Custom Theme
- In the Themes tab, click Create Custom Theme.
- The theme editor panel will slide out from the right.
- Enter a name for your theme.
- Optionally, add a Logo URL to replace the default Knowi logo throughout the interface.
- Configure colors across each section (see Theme Color Settings below).
- Click Save.
Your new theme will appear in the Themes tab and can be set as the account default or applied at the dashboard or widget level.
Editing a Custom Theme
- Edit - reopen the theme editor with current values pre-filled. Make your changes and click Save. If the theme is currently active, changes apply immediately.
- Clone - create a copy of the theme as a starting point for a new custom theme. Useful for creating variations of built-in or existing themes.
- Delete - remove the theme. Built-in themes cannot be deleted. If the deleted theme was the active account theme, the account will fall back to the Light theme.
Theme Color Settings
The theme editor is organized into the following sections:
Global Colors
| Setting | Description |
|---|---|
| Brand Color | Primary brand color used throughout the interface |
| Primary Color | Main accent color for interactive elements |
| Primary Foreground | Text/icon color on primary-colored backgrounds |
| Primary Background | Main background color of the interface |
| Border Color | Color of borders and dividers |
Sidebar Colors
| Setting | Description |
|---|---|
| Sidebar Background | Background color of the sidebar |
| Sidebar Icon Color | Color of navigation icons |
| Sidebar Text Color | Color of navigation labels |
Typography
| Setting | Description |
|---|---|
| Font Family | Font applied across the interface (e.g. Inter, Roboto, or any Google Font name) |
Extended Colors
| Setting | Description |
|---|---|
| Titles Color | Color for headings and titles |
| Body Text Color | Primary body text color |
| Secondary Text Color | Muted/secondary text |
| Links Color | Color for hyperlinks |
| Primary Button Background | Background of primary action buttons |
| Primary Button Text | Text color on primary buttons |
| Secondary Button Background | Background of secondary buttons |
| Secondary Button Text | Text color on secondary buttons |
| Code Editor Background | Background of code/query editor panels |
| Code Editor Text | Text color in code/query editors |
Dashboard Colors
| Setting | Description |
|---|---|
| Dashboard Header Background | Background color of the dashboard header bar |
| Dashboard Header Title Color | Color of the dashboard name in the header |
| Dashboard Header Title Font Size | Font size of the dashboard title |
| Dashboard Background | Background color of the dashboard canvas |
| Dashboard Scrollbar Color | Color of the dashboard scrollbar |
Filter Colors
| Setting | Description |
|---|---|
| Filter Bar Color | Background color of the dashboard filter bar |
| Filter Pills Color | Color of applied filter tags/pills |
| Filter Text Color | Text color within filters |
Widget Colors
| Setting | Description |
|---|---|
| Widget Background | Widget card background color |
| Widget Icon Color | Color of widget action icons |
| Widget Title Color | Color of widget title text |
| Widget Column Header Font Color | Font color of data grid column headers |
| Widget Column Header Font Size | Font size of data grid column headers |
| Widget Column Header Background | Background color of data grid column headers |
| Widget Border Color | Color of widget borders |
| Widget Scrollbar Color | Color of widget scrollbars |
| Widget Drop Shadow | Shadow effect on widget cards |
Chart Colors
| Setting | Description |
|---|---|
| Chart Color Palette | A numbered sequence of hex color values (Color 1, Color 2, etc.) that defines the default order of colors applied to chart series. Each color can be set and deleted individually. |
| Field Colors | Map specific colors to specific data fields. Enter a Column Name and a hex color Value, then click + Add Field Color to add additional mappings. This ensures consistent color coding for specific fields across all charts. |
Global Brand
The Global Brand setting lets you set a logo that appears throughout the Knowi interface. Changes are applied on top of any theme the user has selected.
To set a logo, navigate to User Settings > Themes and scroll to the Global Brand section. Click Set / Upload Logo to input your logo URL, then Save to apply changes.
Global Custom Code
Global Custom Code lets you inject custom HTML into the header and footer of the Knowi interface across all dashboards. Changes are applied on top of any theme the user has selected.
To add custom code, paste your HTML into the Global Header and/or Global Footer fields and click Save Header and/or Save Footer respectively.
Applying a Theme to a Dashboard
A theme can be applied to a specific dashboard, overriding the account default for all widgets on that dashboard that don't have their own theme set.
- Open the dashboard and click the menu icon in the top right.
- Select Settings.
- Scroll down to Dashboard Theme.
- Select a theme and click Save Changes.
Applying a Theme to a Widget
Individual widgets can have their own theme applied, overriding both the account default and the dashboard theme.
- Open the widget and navigate to the Visualization Tab.
- Under Display & Formatting, find Display Theme.
- Select a theme and save the widget.
Theme Precedence
When multiple themes are in play, Knowi applies them in the following order (highest priority first):
- Custom CSS - CSS injected via Dashboard Settings or the JS API
- Widget-level color overrides - individual color settings configured directly on a widget
- Widget theme - a theme assigned to a specific widget via Display & Formatting
- Dashboard theme - a theme applied to the dashboard via Dashboard Settings
- Account default theme - the active theme set in User Settings > Themes
The themeId parameter (passed via shareable URL or JS API embed) overrides the dashboard-level theme but not widget-level settings.
For example: if your account default is Light, your dashboard is set to Navy, and one widget is set to Dark - that widget shows Dark, all other widgets show Navy, and the account default is ignored entirely. If you then pass ?themeId=light in the URL, widgets without an explicit theme will switch to Light, but the Dark widget remains unchanged.
Applying a Theme via URL or Embed
A theme can be applied to a shared dashboard URL by appending the themeId parameter:
https://www.knowi.com/d/YOUR_SHARE_URL?themeId=dark https://www.knowi.com/d/YOUR_SHARE_URL?themeId=YOUR_CUSTOM_THEME_ID
For JS API embeds, pass themeId as a top-level configuration parameter:
Knowi.render('#knowi-div', {
type: 'single',
token: 'YOUR_SESSION_TOKEN',
themeId: 'YOUR_THEME_ID',
view: { ... }
}, function() {});
For more information, see Embedding with JavaScript API.