Using dashboard themes

Using dashboard themes#

This guide explains how to configure and apply a theme to a dashboard, and how to choose the default dashboard theme for all dashboards in a workspace. To override theme settings for an individual widget or access other widget actions, see Working with widgets on a dashboard.

Introduction#

What is a dashboard theme?

A dashboard theme defines the colors, fonts, and visual style of your dashboard, including the background, widget colors, typography, and chart styling. Configure a theme to match the color scheme of a brand or organization.

What dashboard themes are available?

Adverity offers a range of preconfigured dashboard themes. You can also create custom themes and save them to the theme library to reuse across dashboards in your workspace.

What is the Theme Editor?

The Theme Editor opens as a side panel alongside your dashboard. Changes you make are reflected on the dashboard in real time, so you can see exactly how the theme looks without applying it first.

The Theme Editor is organized into collapsible sections — one for each part of the dashboard. Each section has a Reset to defaults action that reverts only that section’s settings.

What is the default dashboard theme in a workspace?

The default dashboard theme is applied to all newly created dashboards in the current workspace. Users with Workspace Admin permissions can change the default theme.

This setting is inherited - it applies to the current workspace and all child workspaces. Child workspaces can override it.

Prerequisites#

Before you complete the procedure in this guide, perform all of the following actions:

Choosing a preconfigured dashboard theme#

To apply a preconfigured theme to a dashboard, follow these steps:

  1. Go to the Present page.

  2. Click the dashboard.

  3. In the top right corner, click image2 Theme.

  4. In the theme drawer, select a preconfigured theme.

  5. Click Save.

As a result, the selected theme is applied to your dashboard.

Creating a custom dashboard theme#

The theme editor opens as a drawer alongside your dashboard, so you can see changes applied in real time as you configure settings.

Preconfigured themes can be used as-is or customized. Some color fields display a link icon indicating the color is derived from another setting. Hover over the icon to see the relationship. You can override any linked color.

Every setting in the theme editor supports a Revert to theme default action to revert only that configuration to the theme’s original values. You can also discard all modifications by clicking Discard changes or apply the workspace default theme.

To create a custom dashboard theme, follow these steps:

  1. Go to the Present page.

  2. Click the dashboard.

  3. In the top right corner, click image4 Theme.

  4. (Optional) Select a preconfigured theme to use as a starting point.

  5. Expand each section of the theme editor and configure the settings:

    Dashboard layout

    Configure the overall appearance of the dashboard:

    • Brand: the primary brand color. Other linked colors update automatically when this changes.

    • Dashboard background: background color of the dashboard canvas.

    • Widget background: default background color for all widgets.

    • Grid gap: spacing between widgets on the dashboard grid.

    • Quickfilter widget background: background color of the quick filter widget.

    • Quickfilter header background: background color of the quick filter header.

    To change a color:

    1. Click the color to open the color picker.

    2. Select a color using the visual picker, or enter a HEX code, RGB, or HSL values.

    3. Click anywhere outside the picker to confirm.

    Color palettes

    Configure the colors used in visualizations and heat maps:

    • For visualizations: the sequence of colors used in chart widgets. Adverity cycles through the palette when a chart requires more colors than are defined. Click a color to edit it, click image8 to add a color, and click image9 to remove a color.

    • For heat maps: three colors for heat map widgets, corresponding to the minimum, median, and maximum values.

    Typography

    Configure fonts for the entire dashboard:

    • Body font: the default font used throughout the dashboard. Select from the available fonts, or choose Custom and enter any Google Fonts name to load it dynamically.

    • Title font: the font used for widget titles. Can inherit from the body font, be selected from the available fonts, or set to a custom Google Font.

    • Primary font color: used for titles and prominent text.

    • Secondary font color: used for subtitles and secondary text.

    Note

    Google Font names are case-sensitive. Use the exact name as it appears on the Google Fonts website (for example, Playfair Display).

    Widget card

    Configure the appearance of the widget container:

    • Border color: color of the widget border.

    • Border thickness: thickness of the border.

    • Round corners: corner radius of the widget card.

    • Shadow: drop shadow applied to widget cards.

    • Content padding: inner padding of the widget content area.

    Widget title

    Configure the appearance of widget titles:

    • Title color: text color of the widget title.

    • Font weight: for example, regular or bold.

    • Font size: size of the title text.

    • Alignment: left, center, or right.

    • Underline color: color (with transparency) of a decorative underline below the title.

    • Underline thickness: thickness of the underline.

    • Underline offset: vertical distance between the text and the underline.

    • Underline length: whether the underline spans only the title text or the full widget width.

    Widget subtitle

    Configure the appearance of the secondary header area:

    • Date range color: color of the date range label.

    • Date range font size: size of the date range text.

    • Date range alignment: left, center, or right, independently of the title alignment.

    • Description color: color of the widget description text.

    Charts

    Configure the visual style of chart widgets:

    • Gridline color: color of the chart gridlines.

    • Axis line color: color of the chart axes.

    • Axis label color: color of the axis tick labels.

    • Tooltip background: background color of the data tooltip.

    • Tooltip text color: text color inside the tooltip.

    • Legend color: color of the chart legend text.

    • Series gradient: apply a gradient to data series: none, vertical, or horizontal.

    Data table

    Configure how table widgets are displayed:

    Colors:

    • Brand: main brand color for data tables.

    • Header: background color of the table header.

    • Header text: text color of the table header.

    • Font color and font size: color and size of table body text.

    To link a color to the Brand color, click the image13 icon so that it changes to the image14 icon.

    Header options:

    • Hide header: hides the table header row.

    • Hide dimension name: hides dimension column headers.

    • Bold header: renders header text in bold.

    • Italic header: renders header text in italic.

    Styling options:

    • Row stripes: alternating row background colors.

    • Vertical borders: borders between columns.

    • Horizontal borders: borders between rows.

    KPI box

    Configure KPI box widgets:

    • Background: background color of the KPI box.

    • Foreground color: text and icon color.

    • Separator color: color of the line separating the header from the body.

    • Metric font size: size of the primary metric value.

    • Dimension font size: size of the dimension label.

    To link a KPI color to the Brand color, click the image15 icon so that it changes to the image16 icon.

    Page navigation buttons

    Configure the page navigation widget:

    • Background current page: button background for the currently active page.

    • Background other pages: button background for inactive pages.

    • Text color current page: label color for the active page button.

    • Text color other pages: label color for inactive page buttons.

    • Round corners: corner radius for navigation buttons.

    For more information, see Using dashboard pages.

    Heading widget

    Configure the default appearance of heading widgets:

    • Title size: font size of the heading text.

    • Title color: text color of the heading.

    • Font weight: for example, regular or bold.

    • Alignment: left, center, or right.

    • Icon circle color: background color of the icon circle displayed alongside the heading.

    Quickfilters and switchers

    Configure the appearance of quickfilter and dimension/metric switcher widgets:

    • Quickfilter background: background color of quickfilter elements.

    • Quickfilter foreground: text and icon color for quickfilter elements.

    • Switcher background: background color for switcher widgets.

    • Switcher foreground: text and icon color for switcher widgets.

    Placeholder widget

    Configure the appearance of placeholder widgets:

    • Horizontal padding: horizontal inner padding. Set to Inherit from content padding to use the value from Widget card > Content padding.

  6. Click Save and choose one of the following options:

    Update existing theme

    Saves changes to the current theme. The updated theme is reflected immediately on all dashboards that use it.

    Save as new theme

    Creates a new theme with the current settings and applies it to this dashboard only. Other dashboards using the original theme are not affected. Enter a name for the new theme.

    Save for this dashboard only

    Saves the customized settings as a local override for this dashboard only. The original theme is not modified and other dashboards using it are not affected.

  7. Click Save.

As a result, the custom theme is applied to your dashboard.

Using the AI theme editor#

The AI theme editor lets you generate a custom theme from a natural language description, CSS variables, a website URL, or an image. You can then refine the result with follow-up prompts or adjust settings manually.

To create a theme using the AI theme editor, follow these steps:

  1. Go to the Present page.

  2. Click the dashboard for which you want to configure the theme.

  3. In the top right corner, click image4 Theme.

  4. In the theme drawer, select AI Generated.

    The AI theme editor opens.

  5. In the text area, enter your prompt. You can:

    • Describe a theme in natural language, for example: dark corporate with blue accents.

    • Build on an existing theme, for example: based on the Bright Blue theme but darker. This creates a new theme; the referenced theme is not modified.

    • Paste CSS variables or design tokens — colors and fonts are extracted automatically.

    • Enter a URL — Adverity extracts the design from that website.

    • Drag and drop an image onto the text area, or press Ctrl+V (⌘+V on Mac) to paste one — Adverity derives colors and fonts from the image.

  6. Press Enter or click Send.

  7. (Optional) To refine the generated theme, enter a follow-up prompt, for example: make corners rounder or change font to Poppins.

  8. (Optional) To make further manual adjustments, expand any section in the theme editor and change the settings.

  9. Click Save and choose a save option as described in Creating a custom dashboard theme.

As a result, the AI-generated theme is applied to your dashboard.

Discarding a custom theme#

To discard a custom theme and reset the dashboard to the default dashboard theme for this workspace, follow these steps:

  1. Go to the Present page.

  2. Click the dashboard for which you want to configure the theme.

  3. In the top right corner, click image18 Theme.

  4. In the Edit theme pop-up window, click Reset to workspace theme.

  5. In the pop-up confirmation window that appears, click Yes, reset.

    Warning

    Following these steps will discard your custom theme. All custom theme settings will be lost. If you have not saved the custom theme, you will not be able to restore this theme after clicking Yes, reset.

As a result, the currently applied custom dashboard theme is removed, and the default theme is applied to the dashboard.

Customizing widget styling#

In addition to theme-level settings, you can override the appearance of individual widgets using the Widget Styling panel. widget-level overrides take precedence over the theme for that widget only.

For details, see Working with widgets on a dashboard.

Choosing a default dashboard theme#

If you have Workspace Admin (WA) permissions in a workspace, you can choose the default dashboard theme that is applied to all new dashboards in this workspace. For more information about permissions, see Roles and permissions in Explore & Present.

Note

This setting is inherited. It will be applied to the current workspace and all of its child workspaces. Child workspaces can override the configuration.

For more information about managing dashboard themes, see Managing your dashboard themes.

To choose the default dashboard theme for a workspace, follow these steps:

  1. Go to the Explore page.

  2. In the top left corner, click image19 Select workspace, then image20 Administration.

  3. In the Workspace section of the administration menu, click Set dashboard theme.

  4. In the drop-down menu, select a dashboard theme for this workspace.

    Note

    This list contains all preconfigured dashboard themes, and all custom dashboard themes that are saved in the theme library.

  5. Click image21 Update.

As a result, you have changed the default dashboard theme for this workspace. This theme will be applied when a dashboard is created in this workspace, and when a user clicks Apply default theme.

Managing your dashboard themes#

You can view, create, edit and clone dashboard themes in the Present settings. To do this, follow these steps:

  1. Go to the Present page.

  2. In the top left corner, click image22 Select workspace, then image23 Administration.

  3. In the Manage section of the administration menu, click Dashboard themes.

This page displays information about the dashboard themes available in your workspace in the following columns:

  • Name - the name of the dashboard theme

  • Read only - if there is a check in this column, the dashboard theme cannot be edited.

  • Workspaces - the number of workspaces that use this theme.

  • Dashboards - the number of dashboards that use this theme.

You can perform the following actions in this page:

  • To view the details about a read-only theme, click Show.

  • To create a new dashboard theme, in the top right corner, click + New theme. Configure your new dashboard theme as described in Creating a custom dashboard theme.

  • To edit a dashboard theme, click Edit. Make any changes to the theme, and then click image24 Update.

    Any changes you make are immediately applied to all dashboards that use this dashboard theme.

  • To clone a dashboard theme, click Clone. This is useful if you want to create a new theme that is very similar to an existing theme - simply clone the existing dashboard theme, then edit it.

  • To delete a dashboard theme, click Delete. You can only delete dashboard themes that are not used in any dashboards.

Contents