Theming

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

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 mindsphere-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).

The following example is just showing a subset of all possible colors:

Color definitions on :root element

--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-base1000: 255,255,255;
--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;    

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 for "meta" colors

--color-info: var(--color-primary); // meta color for informational messages and notifications
--color-shadow: var(--color-base000); // (box) shadows color
--color-overlay: var(--color-base200); // overlay background color
--color-interface: var(--color-base1000); // main interface color
--color-interface-secondary: var(--color-base900); // leading and context region
--color-interface-highlight: var(--color-base1000); // header sections, card, container etc
--color-border: var(--color-base750);
--color-font: var(--color-base200); // color for main font (headlines and text)
--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 / labels

/* here as example an arbitrary color value is set whereas in the lines above existing color values are assigned */
--color-font-secondary: 130,130,130;

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.

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.

Example

We created a sample theme for users to download and re-use or use as a base for their own theme; the following lines represent a basic dark theme that can easily be tweaked further.

This example theme can be seen applied to our layout demo here.

Theming and functional colors

Please consider carefully when adapting or theming functional colors: An error should always be represented through a red color tone and e.g. not be replaced by a green, pink or violet color.

Dark theme example

<style>
   /* use another element to scope your theme if you want to */
   body {
       --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-base750);
       --color-overlay: var(--color-base900);

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

       --color-border: var(--color-base800);

       --color-info-dark: 0,92,116;
       --color-info-light: 148,190,205;
       --color-info-lighter: 165,212,230;
       --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: var(--color-interface-secondary);
       --color-appBar-bg2: var(--color-interface);
       --color-appBar-color: var(--color-font);
       --color-appBar-hover: var(--color-primary-darker);
       --color-appBar-border: var(--color-border);
       --color-appBar--active-bg: var(--color-interface);
       --color-appBar--active-color: var(--color-primary);
       --color-appBar--active-indicator: var(--color-primary);
       --color-appBar--active-hover: var(--color-primary-darker);
       --color-appBar--badge: var(--color-base800);
   }
</style>
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top