Lumo

Browser compatibility

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.

---

Dark color palette

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.

1. Define a new custom element, e.g. my-dark-ui.html

2. Use the new custom element

---

CSS custom properties

Applying custom properties

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.

This doesn’t work:

These work:

Using in a Polymer element:

Using in global scope:

Defining and overriding custom property values

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.