Support theming with CSS Custom Properties

[SanderElias]

feature request

Use CSS custom properties for at least color selection.

What is the expected behaviour?

To be able to alter the color-scheme during runtime on supported browsers, and fall-back to predefined SASS defined colors on others

Here is a sample (by Cris Coyier) of how CSS custom properties might work

Is there anything else we should know?

Here is a simple sass mixin that might help:

@mixin variable($property, $variable, $fallback) {
  #{$property}: $fallback;
  #{$property}: var($variable);
}

By using something like that mixin, support for browsers that have no CSS variables support, stay's the same way as its now, while supported browsers gain a way more flexible way to use colors.

[jelbourn]

We do actually plan on doing this eventually but don't have it as scheduled work at the moment.

[SanderElias]

TIL about PostCSS. I taught I would share it here. The reason for that is that it enables to use standard CSS (Including custom CSS properties!), and then compile it down for old browsers. This is a huge win over sass, as you need to compile that for old and new browsers alike.
This is the plugin(cssnext) that makes this possible.
Among other nice to have things.

[joshuakwaite]

Is there a timeline on this yet?

[jelbourn]

It will likely be early 2020 (when Microsoft plans to end support for IE11)

[LayZeeDK]

It will likely be early 2020 (when Microsoft plans to end support for IE11)

How about an opt-in option to consume CSS Custom Properties for those of us lucky enough to ditch Internet Explorer 11?

[babeal]

someone seemed to solve it with css variables and IE 11 fallback. https://github.com/datorama/themify

[arjunyel]

StencilJS, created by the Ionic team, has a conditionally loaded CSS variable polyfill, if the Angular Material team talks with them and includes the polyfill Material would be able to switch to CSS Variables. Thank you for your time, have a great day!

[arjunyel]

Here is a CSS Properties ponyfill https://github.com/jhildenbiddle/css-vars-ponyfill

[Rodrigo54]

I believe that this functionality would bring enormous benefits to the creation of themes for the material, since with native variables you will not have to load files with css of themes as the documentation itself does. That brings more perfomance.

[darkbasic]

I really don't understand why they don't simply use the polyfill and just switch to css variables now. This is GREAT downside right now.