Skip to main content
Version: 9.3

Colors and Themes

The default visualization colors and font styles are set by a theme that applies to the entire Qrvey app. You can modify the default theme as well as customize themes for individuals charts and panels.

Chart Colors​

Colors

Certain charts (for example, Bar and Line) use a single color by default, focusing attention on data values rather than categories. You can change the current the default single color (Main color) for the current chart from the Chart Builder toolbar or the Styles configuration panel.

To use different colors to distinguish categories, select Color Type > By Category from the Color Type dropdown in the Styles panel. To assign colors to fixed categories, select Match colors across charts. For more information, see Assign Fixed Colors to Categories.

Certain charts (such as Pie or Funnel) always use a color sequence, similar to single-color charts set to By Category.

Assign Fixed Color to a Category​

When colors carry specific meaning in your data, you can assign fixed colors to categories instead of using the defaults. For example, in an ice cream sales chart, you could assign pink to strawberry, brown to chocolate, and cream to vanilla.

  1. Select the Match colors across charts checkbox in the Styles section of the Configuration Panel.
  2. From the Theme section, select the palette to display the assigned colors for each category.
  3. Select a category and modify it color as needed.
  4. Select Apply Changes to save your changes.

These selections persist across all charts created based on the same dataset.

Themes​

In Chart Builder, you can customize chart colors. Customizations apply only to the chart being edited and do not affect defaults for other charts. The Match colors across charts setting is an exception, but it only applies to charts based on the same dataset. These selections affect only colors, not panel style, fonts, or other settings.

To give all your charts a unified look and feel, use the Style Themes feature to create a customized theme that replaces the default theme settings. Beginning with version 8.1, this feature provides the following default themes:

  • Qrvey Theme. A legacy default theme.
  • Qrvey Theme 2. The default theme introduced in version 8.1. This expands the number of colors provided in the Data Visualization section from 20 to 100.
  • Qrvey Dark Theme. Applies a dark mode to the dashboard, charts, and chart panels.

Create a Theme​

  1. Select the Style Themes icon in the toolbar of a Dashboard, Workflow, or Pixel perfect Report. The Style Themes dialog displays.
  2. Select Create New Theme. The Create New Theme dialog displays.
  3. Follow the steps described in "To modify theme settings" below.

Edit a Theme​

  1. Select the Style Themes icon in the toolbar. The Style Themes dialog displays.
  2. Locate the theme you want to edit, select its three-dot menu, and select Edit. The Edit Theme dialog displays.
  3. Follow the steps described in "To modify theme settings" below.

Modify Theme Settings​

  1. Create a new theme or edit an existing theme. The Create New/Edit Theme dialog displays.

  2. To apply this theme to all applications, select Use Theme in All Apps.

  3. Select the Typeface drop-down menu and select a font to use in the application. To use the default font, select (Default).

    Note: If you intend to use CSS to modify the typeface, select (Default). For more information, see Customizing the Appearance Using CSS.

  4. Under Workspace Settings, select the following colors:

    • Canvas Background Color
    • Panel Icons and Foreground Color

  5. Under Panel Styles, select whether to display or hide the following panel items:

    • Header
    • Title

  6. Select the box next to Panel Background Color to display the color picker dialog. Use the options provided to set a color.

  7. If displaying the title, select the box next to Chart Titles Color to display the color picker dialog. Use the options provided to set a color.

  8. Under Text Styles, select the box next to each text item to display the color picker dialog. Use the options provided to set a color for that text item.

    • Axis and Data Labels
    • Values
    • Legends
    • Tooltips

  9. Under Data Styles, select the box next to Main Color to display the color picker dialog. Use the options provided to set the main color for the data.

  10. Select the colors to use for Data Visualizations. For your convenience, one hundred colors are chosen randomly by the system. You can change any of the colors individually, or you can select Generate New to randomly generate a new set of one hundred colors.

  11. Under Table Header Styles, select the box next to each option to display the color picker dialog. Use the options provided to set a color for that text item.

    • Header Font Color
    • Header Background Color

  12. Select Save Theme. After it has been created, a theme can be further edited, chosen to apply to all of your applications, duplicated to be used as the basis for another theme, or deleted, from the three-dot menu on the theme card.

Duplicate a Theme​

  1. Select the Style Themes icon in the toolbar. The Style Themes dialog displays.
  2. Locate the theme you want to duplicate, select its three-dot menu, and select Duplicate. The new theme displays in the Style Themes dialog. You can Edit, Duplicate, or Delete the theme as needed.

Delete a Theme​

A theme in a “shared application” that has been created by someone else, can only be deleted by the owner of the application. Such a theme will not have the Delete option in the menu.

  1. Select the Style Themes icon in the toolbar. The Style Themes dialog displays.
  2. Locate the theme you want to delete, select its three-dot menu, and select Delete.
  3. Select Yes to confirm. The theme is deleted.

Access a Theme Programmatically​

Embedded widgets support the use of CSS variables to customize the visual theme. For more information, see Customizing the Appearance Using CSS.

Each theme has a unique ID that can be used for accessing the theme programmatically. The Theme ID is always displayed in the UI from the list of themes. Developers can copy and paste the ID of the theme into the embedded widget JSON configuration code, if they need to handle the theme programmatically.