JavaScript Embedded AnalyticsTheming

Theming refers to the process of adjusting design elements such as colours, borders and spacing to match your applications' design.

Studio provides a range of methods for customising its appearance. These are described in brief below.

Studio shares the same theming API as AG Grid. For in depth details on customising themes, see the AG Grid Theming Documentation.

The default Studio theme is exported as studioTheme.

Colours and Dark Mode Copy Link

Changing the colour scheme within Studio can be done by creating multiple themes, and updating the value of the theme property. However, a common use case is to toggle between modes, such as light and dark.

Studio supports controlling the colour scheme by setting the data-ag-theme-mode="mode" attribute on any parent element of Studio, commonly the html or body elements, where mode is any of:

• light
• dark
• dark-blue

It is also possible to define your own colour modes, by passing the mode name to the second parameter of withParams. The example above defines custom colour schemes for light and dark mode and switches between them by setting the data-ag-theme-mode attribute on the body element:

const myTheme = studioTheme
    .withParams(
        {
            backgroundColor: '#FFE8E0',
            foregroundColor: '#361008CC',
            browserColorScheme: 'light',
        },
        'light-red'
    )
    .withParams(
        {
            backgroundColor: '#201008',
            foregroundColor: '#FFFFFFCC',
            browserColorScheme: 'dark',
        },
        'dark-red'
    );

Theme Params Copy Link

The example above demonstrates customising Studio by setting theme params via both the theme withParams method and CSS variables.

const studioProperties = {
    theme: studioTheme.withParams({
        gridCellTextColor: 'pink',
        chartAxisColor: 'blue',
    }),

    // other studio properties ...
}

--ag-chart-palette-fills-1-color: yellow

The CSS variable name is the theme param name in kebab-case, with an --ag- prefix. E.g. foregroundColor becomes --ag-foreground-color.

The theme params are split into four types:

• Shared Theme Params (no prefix) - these may affect the Studio UI, grid widgets, and chart widgets.
• Studio Theme Params (prefixed studio) - these only affect the Studio UI.
• Grid Theme Params (prefixed grid) - these only affect grid widgets.
• Chart Theme Params (prefixed chart) - these only affect chart widgets.

In most cases, the Studio, grid and chart theme params will inherit from the equivalent shared theme param.

E.g. gridTextColor and chartTextColor both inherit from textColor.

See the Theme Reference for the full list of theme params.