4

Is it possible to change the color of the checkbox using the material theme? For example, with a normal you can simply do <mat-checkbox color="primary">. However something like <mat-list-option color="primary"> does not seem to have any effect.

I couldn't find anything about this in the Angular Material API reference but surely there's a way besides changing the color manually (i.e. not using the theme) like in this question?

tgordon18
  • 1,562
  • 1
  • 19
  • 31
  • 1
    `MatListOption` doesn't use the `color` option. So the only way to change color is 'manually'. – G. Tranter Sep 06 '18 at 21:27
  • This component is really not mature, not only it doesn't play nice with angular theming system, but also it does not offer any state indicator (like .mat-checkbox-checked or .mat-radio-checked) at the option level. This make it really hard to style, if you can use mat-radio or mat-checkbox instead pass your way. – Nicolas Reynis Jan 18 '19 at 15:01

1 Answers1

3

Check this StackBlitz: Custom option list

Add this to your style.css file:

.mat-pseudo-checkbox::after {
    color: red;
}

.mat-pseudo-checkbox {
    background: lightblue;
}
Juan
  • 2,024
  • 3
  • 17
  • 36