Archived version of the User Experience Toolkit for Insights Hub and Industrial IoT website, version 2.8.1

# Theming

##### Get a brief overview about css's built in theming capabilities to support different color schemes and -sets.

### Insights Hub and Industrial IoT

The Classic Theme is prepared for apps developed for the Insights Hub and Industrial IoT platform for a coherent look and feel.

### Classic Light Theme

Default theme for light interfaces that is already included in the general CSS.

### Classic Dark Theme

Insights Hub and Industrial IoT colors for dark interfaces.

### Siemens

The Siemens Corporate Theme is exclusively available to official Siemens products.

### Siemens Industrial Experience theme

For migrating to Siemens Industrial Experience, we offer a full CSS theme in brand look & feel for easier switch - both in light and dark.

### Siemens Light Theme

### Siemens Dark Theme

The built-in theming capabilities are based upon CSS variables (also called "custom properties"), a feature described in a W3C Candidate Recommendation in 2015. All major browsers support these variables out of the box, IE 11 and lower can be supported using polyfills.

# Fallback for older browsers, especially Internet Explorer

Using a browser that does not support polyfills will show the default Insights Hub and Industrial IoT css color scheme.

All colors used and assigned in patterns are set and assigned originally on the :root element, in our case the `<body>` element. Here are colors are assigned to CSS variables in the following way, using a color triplet syntax (because we need colors also in combination with transparency and therefor a notation in hex or rgba would not work for all purposes).

## Color definitions: Base colors

    /* Base colors colors: default from very dark (black) to very bright (white) */
    --color-base000: 0,0,0;
    --color-base200: 50,50,50;
    --color-base450: 89,89,89;
    --color-base600: 150,150,150;
    --color-base750: 190,190,190;
    --color-base800: 210,210,210;
    --color-base900: 240,240,240;
    --color-base950: 246,246,246;
    --color-base1000: 255,255,255;

## Color definitions: Primary colors

    /* Primary color colors: main interaction color, used for any interactive elements,*/
    /* e.g. buttons and links */
    --color-primary-darker: 53,76,128;
    --color-primary-dark: 0,92,191;
    --color-primary: 0,111,230;
    --color-primary-light: 0,158,255;
    --color-primary-lighter: 127,183,242;
    --color-primary-lightest: 204,226,250;

## Color definitions: Functional colors

    /* Functional colors colors: used for messages, notification and feedback patterns */
    --color-info-dark: 35,84,97;
    --color-info: 0,111,230;
    --color-info-light: 187,208,215;
    --color-info-lighter: 209,232,240;
    --color-warning-dark: 102,94,72;
    --color-warning: 255,200,0;
    --color-warning-light: 230,219,183;
    --color-warning-lighter: 255,237,181;
    --color-error-dark: 129,18,17;
    --color-error: 246,36,71;
    --color-error-light: 214,180,180;
    --color-error-lighter: 252,211,210;
    --color-success-dark: 94,105,25;
    --color-success: 101,199,40;
    --color-success-light: 200,209,186;
    --color-success-lighter: 230,238,209;
    --color-dangerPrimary: var(--color-error);
    --color-dangerPrimary-hover: 255, 37, 74;
    --color-dangerPrimary-active: 219, 32, 63;
    --color-dangerSecondary: 246, 36, 71;
    --color-dangerSecondary-hover:  var(--color-error-lighter);
    --color-dangerSecondary-active: 249, 200, 208;

## Meta colors

There is also a group of colors that is not present in the defined color palette. These are "meta" colors introduced in order to being able to target e.g. shadow colors distinct from shades of grey used for something different. Hence the following meta colors can be set to a color triplet but can also refer to just an existing, already defined color variable:

## Color definitions: "Meta" colors

    /* These colors can be set to either existing, other custom values or rgb color values */
    --color-shadow: var(--color-base000); /* (box) shadows color, uses darkest main color per default */
    --color-overlay: var(--color-base200); /* overlay background color */
    --color-interface: var(--color-base1000); /* main interface color */
    --color-interface-secondary: var(--color-base950); /* leading and context region background color */
    --color-interface-highlight: var(--color-base1000); /* header sections, card, container etc */
    --color-interface-headerfooter: var(--color-base1000); /* header and footers of dialogs, confirms */
    --color-border: var(--color-base800); /* border color for interface elements, e.g. cards, fieldsets, containers, tables, dialogs */
    --color-disabled: var(--color-base600); /* main disabled color */
    --color-disabled-contrast: var(--color-base1000); /* contrast color for disabled items */
    --color-font: var(--color-base200); /* color for main font (headlines and text) */
    --color-font-contrast: var(--color-base1000); / *contras color for buttons */
    --color-font-secondary: var(--color-base600); /* color for secondary font objects, e.g. descriptions and subheadlines */
    --color-font-disabled: var(--color-base600); /* color for disabled elements' font and labels */

When referring to an already defined CSS variable, make sure to use the `var(--varname)` syntax. Only solid color values can be assigned, no semi-transparent values are possible.

## Color definitions: App bar colors

    /* App bar colors */
    --color-appBar-bg: var(--color-interface-secondary); /* advanced App bar: background-color */
    --color-appBar-color: var(--color-font); /* advanced App bar: link / foreground color */
    --color-appBar-hover: var(--color-primary); /* advanced App bar: hover link color for items */
    --color-appBar-border: 232,232,232; /* advanced App bar: border around second level items */
    --color-appBar--active-bg: var(--color-interface); /* advanced App bar: background color for active items ("highlight") */
    --color-appBar--active-color: var(--color-primary); /* advanced App bar: link color for active items */
    --color-appBar--active-indicator: var(--color-primary); /* color for active indicator ("left border") of highlighted item */
    --color-appBar--badge: var(--color-error); /* background color for optional badges of App bar items */
    --color-appHeader-bg: var(--color-interface-secondary); /* background color for the app header */
    --color-appHeader-font: var(--color-primary); /* font color for the app header */

### Where to define color variables

You can define your CSS variables anywhere in your stylesheets or within a `<style>` block in the `<head>` section of your website; The rules of CSS specificity apply everywhere:

- Latter rules overrides already defined rules with the same specificity.
- Higher specificity overrides lower specificity.

### Theming and Shadow DOM

CSS variables are also available in custom elements encapsulated in shadow DOM, that means: You can access (and use) these color variables within custom elements as well; changing e.g. the value for `--color-primary` on the root element of your app can also change it’s value when referenced in your web component.

### Scoping colors

You can change the scope of the theme by applying them to a wrapper element instead of the `<body>` element.

### Dark theme UI elements

In order to adjust browsers’ UI elements such as scrollbars we use the following CSS property; Please note this property is still just an “Editor’s Draft” and not fully supported by all browsers.

## Color scheme CSS property

    :root {
        color-scheme: dark; /* non-standard; Indicates that browser should render UI elements to fit to a dark theme */
    }

- Color (Patterns)

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