How to modify the active and hover background-color of an option for angular material component autocomplete? <form class="example-form"> <mat-form-field class="example-full-width"> <mat-label>Number</mat-label> <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto"> <mat-autocomplete #auto="matAutocomplete"> @for (option of options; track option) { <mat-option [value]="option">{{option}}</mat-option> } </mat-autocomplete> </mat-form-field> </form> How to apply a background-color (active, hover) for mat.option in theme.scss. For the full working example see StackBlitz. :root { @include mat.all-component-themes($theme); @include mat.option-color($theme??? } Continue reading...