- Visualize and present data
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.
Was this article helpful?