Angular Material - Change Color Of Mat-list-option On Selected

Answer :

You can use aria-selected="true" attribute from mat-list-option tag to target the selected option,
and provide corresponding css properties for the same.

mat-list-option[aria-selected="true"] {   background: rgba(0, 139, 139, 0.7); } 

Stackblitz Working Demo

The accepted answer works fine, but it uses a hardcoded color value (background: rgba(0, 139, 139, 0.7)). This approach will actually break your styles and colors if you decide to switch to another pre-build material theme or use a custom theme (as described in Theming your Angular Material app page).

So, if you use SCSS, you can use the following code in your component's style file:

@import '~@angular/material/theming';  mat-list-option[aria-selected="true"] {   background: mat-color($mat-light-theme-background, hover, 0.12); } 

The above code is adapted from mat-select options - in this way, you will have a consistent look in the entire app: .mat-option.mat-selected:not(.mat-option-multiple) { background: mat-color($background, hover, 0.12);}

Demo: https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-qaq1xr

Or, if you use a dark theme, change code as follows:

mat-list-option[aria-selected="true"] {   background: mat-color($mat-dark-theme-background, hover, 0.12); } 

Demo: https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-w8beng

If you just want to use a custom color, I suggest to pick one from Material Specs, that are also exposed in Angular Material Design scss.

$primaryPalette: mat-palette($mat-green);  mat-list-option[aria-selected="true"] {   background: mat-color($primaryPalette, 500); } 

Demo: https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-tt3nyj