Configuring built-in themes

Configuring all themes

The CSS variables of the default theme include color-scheme variables:

--dhx-h-primary: 200;
--dhx-s-primary: 98%;
--dhx-l-primary: 40%;

--dhx-h-secondary: 0;
--dhx-s-secondary: 0%;
--dhx-l-secondary: 30%;

--dhx-h-danger: 0;
--dhx-s-danger: 100%;
--dhx-l-danger: 60%;

--dhx-h-success: 154;
--dhx-s-success: 89%;
--dhx-l-success: 37%;

--dhx-h-background: 0;
--dhx-s-background: 0%;
--dhx-l-background: 100%;
--dhx-a-background: 0.5;

tip

Color values are specified in the HSL format, where:

• hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue;
• saturation is a percentage value; 0% means completely unsaturated (gray) and 100% is completely saturated;
• lightness is a percentage value; 100% is white, 0% is black, and 50% is "normal".

Because of these CSS variables, the color scheme is calculated automatically. This means that if you change a color-scheme value in the root, the values for the "contrast-light", "dark", and "contrast-dark" themes are recalculated automatically in real time.

For instance, you can override the primary colors for all Spreadsheet themes at once in the following way:

<style>
    :root {
        --dhx-h-primary: 0;
        --dhx-l-primary: 30%;
    }
</style>

In addition, the values of variables calculated from the primary color are recalculated accordingly. For example, the value of the focused color is calculated as follows:

--dhx-color-focused: hsl(calc(var(--dhx-h-primary) + 10), var(--dhx-s-primary), var(--dhx-l-primary));

Configuring a separate theme

If you want to override some color values for a separate Spreadsheet theme, override them in the data-dhx-theme attribute:

<style>
    [data-dhx-theme='light'] {
        /* border */
        --dhx-border-color: #ced4da;
        /* end border */

        /* color scheme */
        --dhx-h-primary: 210;
        --dhx-s-primary: 30%;
        --dhx-l-primary: 20%;

        --dhx-h-secondary: 185;
        --dhx-s-secondary: 5%;
        --dhx-l-secondary: 50%;

        --dhx-h-danger: 6;
        --dhx-s-danger: 78%;
        --dhx-l-danger: 57%;

        --dhx-h-success: 168;
        --dhx-s-success: 77%;
        --dhx-l-success: 42%;

        --dhx-l-background: 98%;
        /* end color scheme */
    }
</style>

<script>
    const spreadsheet = new dhx.Spreadsheet("spreadsheet",{});
    
    dhx.setTheme("light");
</script>