Colors and styling

Report themes

Your Workspace includes a number of built-in themes which you may be able to compliment with custom themes.

Add a custom theme

Navigate to the Mode home page, click on your name in the upper left corner of the screen and click Workspace Settings from the dropdown menu.
Under Features, select Colors & Themes.
Click on the Report Themes tab.
Click on the New Theme button.
Enter a name for your theme. In the CSS box, paste or write the CSS for this theme. To import a hosted CSS file, you can use an @import statement (e.g., @import url("https://example.com/stylesheet.css")).
When you are finished, click Save.

Any valid CSS can be included in a custom theme. While you cannot included any JavaScript in a custom theme, you can embed JavaScript in reports directly using the HTML Editor.

Manage custom themes

Any member can use or create a custom theme, however a custom theme can only be edited or deleted by it's creator or and Workspace admin. You cannot delete any of the built-in color themes. To manage:

Navigate to the Mode home page, click on your name in the upper left corner of the screen and click Workspace Settings from the dropdown menu.
Under Features, select Colors & Themes.
Click on the Report Themes tab.
To modify a custom theme, locate it in the list and click on it. Make any changes and click Save.
Click on the button next to a theme for additional options:
- Set as default: Admins only. Set this theme as the default for all new reports. Does not impact any existing reports.
- Delete: Deletes the theme.

Color palettes

Your Workspace includes a number of pre-defined color palettes which you may be able to compliment with additional custom color palettes.

Add a custom color palette

Navigate to the Mode home page, click on your name in the upper left corner of the screen and click Workspace Settings from the dropdown menu.
Under Features, select Colors & Themes.
Click the New Color Palette button.
Enter a unique name and select either Categorical or Divergent palette type:
- Categorical: Used with most built-in charts (e.g., line, pie, bar, etc.). Input between 2 and 20 different color hex codes. After writing or pasting in a value (e.g. #37B067), press enter to confirm. Use the X button to remove the value.
- Divergent: Used with Big Number visualizations. Input a color hex codes for each end of the color gradient.
Click Save.

Manage custom color palettes

Any member can use or create a custom color palette, however a custom color palette can only be edited or deleted by it's creator or and Workspace admin. You cannot delete any of the built-in color palettes. To manage:

Navigate to the Mode home page, click on your name in the upper left corner of the screen and click Workspace Settings from the dropdown menu.
Under Features, select Colors & Themes.
To modify a custom color palette, locate it in the list and click on it. Make any changes and click Save.
Click on the button next to a color palette for additional options:
- Set as default: Admins only. Set this palette as the default for all new reports. Does not impact any existing reports.
- Delete: Deletes the palette.

FAQs

Q: Why does the custom styling on chart titles appear to be broken?

Mode made some updates to chart titles and chart descriptions that would require changes to the CSS code. Please see the example below to update your custom report theme accordingly.

/* Chart titles */
.mode-object.big-number .chart-title .in-place-edit-text,
.embed-preview .mode-object.big-number .chart-title .in-place-edit-text,
.editor-table .chart-header,
.editor-chart .chart-header,
.editor-chart .chart-header mode-in-place-input input,
.editor-table .chart-header mode-in-place-input input,
.mode-placeholder .placeholder-title {
  color: $dark-chart-title-color;
  font-size: $font-med-large;
  font-weight: $font-weight-regular;
}

Q: Why does the custom styling on pivot tables appear to be broken?

Mode made some updates to pivot tables that would require changes to the CSS code. The CSS selector muze-layer-text-cell is now two selectors:

muze-layer-text-inner-cell
muze-layer-text-outer-cell

Please update your custom report theme accordingly.

Was this article helpful?

Mode Help