Skip to content

MindSphere Web Components
Theming

MindSphere Web Components >= v1.15 supports theming to use them in applications with custom color themes.

A developer can overwrite the colors mentioned in the MindSphere Design System.

Colors

In general, the colors of the MindSphere Design System are used.

For the MindSphere Web Components, 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

Any questions left?

Ask the community

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

Last update: May 21, 2021