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.