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.
The built-in Valo and Material themes have a dark color variation available out of the box.
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 or material-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.
TODO