If you need to support browsers that do not have native support for CSS Custom Properties (compatibility info
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
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.