• Creating the theme in the Dashboard Editor
• Define chart styles in Studio
  • Importing a theme
• Configuring the server theme

When Digdash is first installed, the digash_2024 theme is set by default as the server theme and is used to display the dashboards.

It is easy to customise the theme used for your dashboards. You can use a template provided by DigDash (digdash_2019 or digdash_2024) as the basis for your theme and modify it as you wish.

Customising the entire theme requires several settings.
It is recommended that you start by creating the theme in the dashboard editor. You can then modify the styles of the charts in Studio.
Finally, you can set the new theme as the server theme if you wish to apply it to all dashboard elements for all users.

Creating the theme in the Dashboard Editor

The Theme Editor allows you to easily create a new theme via an intuitive interface, whilst also offering a CSS editor for more advanced customisation.

See the page Theme Editor for more details.

Define chart styles in Studio

The theme in Studio allows you to modify the styles of the charts. To do this, you can either:

• use the theme creation wizard: this allows you to easily modify the theme via a user interface. See the Theme Editor Wizard for further details.
• import a theme to use as a template and modify the constants.

Importing a theme

To use an existing theme:

1. When configuring flows (charts), go to the Themes tab. By default, the server theme is selected if one has been defined.
2. Click the + button to the right of the list of themes to display the advanced interface.
3. Click the + button, then Add to create a new theme.
   
   ➡ A New dialog box appears.
4. Enter the Theme Name: the same as the editor theme.
5. From the Role drop-down list, select a role to restrict the theme to, or select None to make the theme available to all roles, then click OK.
   💡 Select None if you wish to use the theme as the server theme.
   ➡ The theme is added to the list.
6. Select it and click the  to edit it.

7. The new theme is empty by default. You must specify the Digdash theme to be used as a template. To do this, add the following line as the first line:

   @import url "<name of the Digdash template>.css";

   where <name of the Digdash template> should be replaced with the name of the theme you wish to use as the style base: digdash_2019 or digdash_2024.

You can then specify the constants you wish to modify. To do this, add a root block after the import line in the following format:

:root { --<name of CSS constant 1>: <value of CSS constant 1> … --<name of CSS constant N>: <value of CSS constant N> }

The available constants are as follows (with example values):

:root {
--dd-font-family-fontFamily:Open Sans;
 --dd-font-weight-fontWeight:inherit;
 --dd-font-style-fontStyle:Normal;
 --dd-font-color-fontColor:#000000;
 --dd-axes-border-borderSize:0.3;
 --dd-axes-border-borderColor:#888888;
 --dd-tooltips-fontWeight:inherit;
 --dd-tooltips-fontStyle:normal;
 --dd-tooltips-fontColor:#888888;
 --dd-tooltips-backgroundColor:#ffffff;
 --dd-table-border-borderSize:0.5;
 --dd-table-border-borderColor:#888888;
 --dd-table-header-fontColor:#ffffff;
 --dd-table-header-backgroundColor:#00b0f0;
 --dd-table-header-fontWeight:bold;
 --dd-table-TD-fontColor:#000000;
 --dd-table-TD-backgroundColor:#ffffff;
}

If these variables are not sufficient, you can search for the CSS classes and add them.

Configuring the server theme

It is therefore possible to set the theme created in the Dashboard Editor as the server-wide theme so that it applies to all dashboard elements and all users. To do this:

1. From the home page, go to Configuration > Server Settings >Additional parameters > Miscellaneous.
2. From the Theme drop-down list, select the theme you have created.
   The available themes are those provided by Digdash or created in the Dashboard Editor.
   
3. Click Save.