If you need to support browsers that do not have native support for CSS Custom Properties (Internet Explorer 11 and Edge 14), there are some limitations how the theming features can be used. These limitations are described below.
In order to apply the dark theme colors, you need to introduce a new CSS scope in the form of a shadow root, as a custom element. The ShadyCSS shim only polyfills custom property values on shadow root boundaries.
The easiest way to create a new shadow root, for which the custom property values are shimmed, is to create a new Polymer element, and include the valo-dark style module inside its template. This makes all the elements inside that shadow root adopt the dark colors.
When including a style module using <custom-style>, you need to provide at least one white space character inside the nested <style> element. Otherwise it doesn’t work in Internet Explorer 11.
CSS custom properties can’t be used in inline styles, or in regular <style> elements. Instead, use the custom properties inside a Polymer element’s template <style> for scoped styles, and wrap your <style> elements with the <custom-style> element for global styles.
From ShadyCSS documentation:
Properties cannot change from parent to child as they can under native custom properties; they can only change when a shadowRoot boundary is crossed.
To receive a custom property, an element must directly match a selector that defines the property in its host’s stylesheet.