Skip to content

Web Components for Insights Hub and Industrial IoT
Theming

Web Components for Insights Hub and Industrial IoT >= v1.15 supports theming to use them in applications with custom color themes.

A developer can overwrite the colors mentioned in the User Experience Toolkit for Insights Hub and Industrial IoT.

Colors

In general, the colors of the User Experience Toolkit for Insights Hub and Industrial IoT are used.

For the Web Components for Insights Hub and Industrial IoT, the following additional color variables with their default values have been used:

    :root {
        --color-list-color-bg: 252, 252, 252;
        --color-list-detail-color-bg: 249, 249, 249;
        --color-search-match: 255, 255, 0;
        --color-data-table-th-border: 246, 246, 246;
        --color-data-table-border: 218, 218, 218;

        --color-ol-blue:0, 60, 136;
        --color-ol-overview-map: 123, 152, 188;

        --color-hint-condition-1: 66, 169, 167;
        --color-hint-condition-bg-1: 217, 238, 238;
        --color-hint-condition-2: 236, 121, 14;
        --color-hint-condition-bg-2: 251, 228, 207;
        --color-hint-condition-3: 125, 74, 161;
        --color-hint-condition-bg-3: 241, 222, 255;
    }

Example

This style example explains how to get the demo application in a dark style.

<style>
    body {
        color-scheme: dark;

        /* Web Components Color Variables */
        --color-list-detail-color-bg: 6, 6, 6;
        --color-list-detail-color-bg: 50, 50, 50;
        --color-list-color-bg: var(--color-base1000);
        --color-search-match: 106, 100, 0;
        --color-ol-blue: var(--color-primary-light);

        --color-base000: 255, 255, 255;
        --color-base200: 240, 240, 240;
        --color-base450: 210, 210, 210;
        --color-base600: 190, 190, 190;
        --color-base750: 100, 100, 100;
        --color-base800: 89, 89, 89;
        --color-base900: 40, 40, 40;
        --color-base1000: 0, 0, 0;

        --color-font: var(--color-base200);
        --color-font-secondary: var(--color-base600);
        --color-font-disabled: var(--color-base600);

        --color-shadow: var(--color-base1000);
        --color-overlay: var(--color-base600);

        --color-interface: var(--color-base900);
        --color-interface-secondary: 55, 55, 55;
        --color-interface-highlight: 28, 28, 28;
        --color-interface-headerfooter: 28, 28, 28;

        --color-border: 80, 80, 80;

        --color-info-dark: 148, 190, 205;
        --color-info-light: var(--color-info-dark);
        --color-info-lighter: var(--color-base900);
        --color-warning-dark: 106, 89, 49;
        --color-warning-light: 226, 204, 138;
        --color-warning-lighter: 253, 226, 122;
        --color-error-dark: 130, 0, 1;
        --color-error-light: 207, 139, 141;
        --color-error-lighter: 246, 162, 162;
        --color-success-dark: 104, 123, 0;
        --color-success-light: 178, 195, 154;
        --color-success-lighter: 207, 224, 170;

        --color-appBar-bg: 42, 42, 42;
        --color-appBar-bg2: var(--color-interface);
        --color-appBar-color: var(--color-font);
        --color-appBar-hover: var(--color-primary);
        --color-appBar-border: 65, 65, 65;
        --color-appBar--active-bg: var(--color-interface-highlight);
        --color-appBar--active-color: var(--color-primary);
        --color-appBar--active-indicator: var(--color-primary);
        --color-appBar--badge: var(--color-base800);

        background-color: rgb(var(--color-base900));
    }

    body mdsp-time-series-chart {
        background-color: rgba(var(--color-base800), 1);
    }
</style>

Demo application in dark theme


Last update: February 23, 2024

Except where otherwise noted, content on this site is licensed under the Development License Agreement.