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 Siemens Industrial Experience for Insights Hub and Industrial IoT.

Colors

In general, the colors of the Siemens Industrial Experience 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: September 30, 2025

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