Angular Material2 Toolbar change color responsively

Question

Is it possible to change md-toolbar color responsively?

I did something like this with Flex-Layout package Responsive API:

md-toolbar color.xs="primary"

and it didn't work.

My guess I can change it by observing ObservableMedia and then setting toolbar's color in code but I'd like to know if there is an easier way.

Thanks

Update

I've opened an issue, as a feature request, basically doing what I've stated above. They've said no plans.

Answer 1

Of course, but you need to go through some css :

@import '~@angular/material/theming';
@import 'src/assets/css/theming.scss';

.primary { background: mat-color($primary); }
.accent { background: mat-color($accent); }
.warn { background: mat-color($warn); }

(Assuming your theming file is correctly placed and you used the correct variable names)

Now in your toolbar :

<md-toolbar ngClass.xs="primary" ngClass.md="accent"></md-toolbar>