Theme Editor

Last modified by Aurelie Bertrand on 2026/06/22 17:27

The Theme Editing wizard is a Studio tool that allows you to customise the style of charts and tables without needing any specialist knowledge.

To use the Theme Editing Wizard:

  • From the chart configuration toolbar: click the Theme Wizard button, then Create a new theme.
  • From the advanced interface of the Themes tab: click the + button, then Theme Editor Wizard.

➡ A ‘New’ dialog box appears.

  1. Enter the Theme Name.
  2. From the Role drop-down list, select the role to which you wish to restrict access to the theme, or select None to share the theme with all roles, then click OK.
     ➡ The Theme Wizard box appears.
    Theme wizard
  3. On each tab, select the desired style settings: the first three tabs relate to charts (Fonts, Axes, Tooltips), whilst the last one relates to tables.
  4. Click Apply.
    ➡ You can view the result.

In the example below, we have changed the colour of the axes and the font.

Modified_theme_en.png.png

The “:root” section must be included, along with the various default variable names. Changing the names of these variables would cause the editor to malfunction.

To restore the original values, you can replace the modified “root” section with the one below:

: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;
}

To go further

If you wish to modify other elements for which you know the class (except for “font-size” elements), you can create your own variable names with their own values, which will be integrated into this editor.

Explanation:

All graphic variables are structured as follows:

Example: --dd-font-weight-fontWeight:inherit;

--dd: indicates that this is a variable specific to our editor; this element must always be present.

-font: specifies the element’s family. Here, it refers to the “Fonts” family. If you give your family a different name, it will be added to the top menu after “Fonts, Axes, Tooltips and Tables”. If your variable relates to an existing family, keep the same terminology: “font” for “Fonts”, “axes” for “Axes”, “tooltips” for “Tooltips” and “table” for “Tables”.

- weight: specifies the type; in this case, it refers to the font weight.

-fontWeight: the attribute; here, it indicates that this is the font weight.

followed by the value of the variable: “:inherit”. This is the value we have chosen by default. If we had wanted the font weight to be bold by default, we would have chosen “bold”.

As for all table variables, they are structured in the same way as those for charts:

But they contain an additional value: “header” or “TD” to allow us to distinguish between the elements to be modified – “header” for headings, or “TD” for the other rows.

The variable: --dd-font-weight-fontWeight:inherit; was then used in the desired class:

For example:

.axHLblTxt
{
    font-weight :var(--dd-font-weight-fontWeight);
}

The “axHLblTxt” class corresponds to the horizontal text in charts.