Angular Material - change color of clicked mat-list-option

Just add class="mat-primary" inside <mat-list-option>

<mat-selection-list>
            <mat-list-option class="mat-primary" checkboxPosition="before" *ngFor="let shoe of typesOfShoes">
              {{shoe}}
            </mat-list-option>

Output:

enter image description here


I am not sure but you can try using this

.mat-select-content, .mat-select-panel-done-animating {
     background: mat-color($background, card); 
}

to

.mat-select-content, .mat-select-panel-done-animating {
    background: mat-color($background, card);
    .mat-option {
        color : mat-color($foreground, text);
    }
}

for details, you can also check the following link https://github.com/angular/material2/blob/master/src/lib/list/_list-theme.scss