If you need to support browsers that do not have native support for CSS Custom Properties (compatibility info) there are some limitations how the styling features can be used. These limitations are described below.
In order to apply the dark color palette, you need to introduce a new CSS scope in the form of a shadow root, as a custom element. The ShadyCSS shim polyfills custom property values only 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. To apply the dark color palette for that custom element, include the lumo-color-legacy style module inside its template and add the theme="dark" attribute for the host element. This makes all the elements inside that custom element adopt the dark color palette.
The parent scope for <my-dark-ui> needs to include the lumo-color style module as well (the global scope in this example).
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.