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.
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.
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-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: 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: 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);
}
</style>