Colors and styling

Report themes

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

Add a custom theme

  1. Navigate to the Mode home page, click on your name in the upper left corner of the screen and click

    Organization Settings

    from the dropdown menu.
  2. Under Features, select

    Colors & Themes

    .
  3. Click on the

    Report Themes

    tab.
  4. Click on the

    New Theme

    button.
  5. 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")).
  6. 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 organization admin. You cannot delete any of the built-in color themes. To manage:

  1. Navigate to the Mode home page, click on your name in the upper left corner of the screen and click

    Organization Settings

    from the dropdown menu.
  2. Under Features, select

    Colors & Themes

    .
  3. Click on the

    Report Themes

    tab.
  4. To modify a custom theme, locate it in the list and click on it. Make any changes and click

    Save

    .
  5. 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 organization 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

  1. Navigate to the Mode home page, click on your name in the upper left corner of the screen and click

    Organization Settings

    from the dropdown menu.
  2. Under Features, select

    Colors & Themes

    .
  3. Click the

    New Color Palette

    button.
  4. 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.
  5. 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 organization admin. You cannot delete any of the built-in color palettes. To manage:

  1. Navigate to the Mode home page, click on your name in the upper left corner of the screen and click

    Organization Settings

    from the dropdown menu.
  2. Under Features, select

    Colors & Themes

    .
  3. To modify a custom color palette, locate it in the list and click on it. Make any changes and click

    Save

    .
  4. 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.
decorative particle

Get our weekly data newsletter

Work-related distractions for every data enthusiast.