Угловой материал - изменить цвет выбранной опции списка матов

Я не уверен, но вы можете попробовать это

.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);
    }
}

для получения дополнительной информации вы также можете проверить следующую ссылку https://github.com/angular/material2/blob/master/src/lib/list/_list-theme.scss

Просто добавьте class="mat-primary" внутрь <mat-list-option>

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

Output:

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

это сработало для меня, просто примените свойство background-color к классу флажка, удалите отмеченный класс

Проверяясь с помощью Material v 7.3.6, похожего на Sathwik, я добился успеха с

.mat-pseudo-checkbox-checked {
    background: #FF0;
}

Добавление -checked в конце гарантирует, что флажок окрашивается только тогда, когда он активен, в противном случае поле всегда будет того же цвета (что может быть вашей целью?). Обратите внимание, что мне пришлось включить этот стиль в файл styles.css самого высокого уровня вместо файла стиля отдельного компонента, чтобы он успешно работал.

Если у вас есть несколько списков выбора, вы можете применить стили к нужным спискам с классами. Кроме того, вы можете применять разные цвета к каждой опции флажка в списке выбора, используя также динамически генерируемые классы! Пример здесь: https://stackblitz.com/edit/angular-dtfd6x?file=app/list-selection-example.ts

Вы можете видеть, что первый список выбора имеет базовый стиль, тогда как второй список (завернутый в класс unique-selection-list) имеет другой стиль, при этом каждый параметр имеет уникальный цвет (сгенерированный путем применения уникальных классов к каждому параметру с помощью цикла *ngFor.

// HTML file
<mat-selection-list #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

<p>
  Options selected: {{shoes.selectedOptions.selected.length}}
</p>

<br>
<hr>

<mat-selection-list #colors>
  <div class="unique-selection-list">
    <div *ngFor="let color of colorsList" [class]="color.className">
      <mat-list-option
        [value]="color.displayName">
        {{ color.displayName }}
      </mat-list-option>
    </div>
  </div>
</mat-selection-list>

// component.ts file constants
  typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
  colorsList = [
    {
      hexCode: '#00F',
      displayName: 'Blue',
      className: 'blue-checkbox',
    },
    {
      hexCode: '#F0F',
      displayName: 'Fuchsia',
      className: 'fuchsia-checkbox',
    },
    {
      hexCode: '#0F0',
      displayName: 'Green',
      className: 'green-checkbox',
    },
  ];
}

// styles.css
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

.unique-selection-list .blue-checkbox .mat-pseudo-checkbox-checked {
  background: #00F !important;
}

.unique-selection-list .fuchsia-checkbox .mat-pseudo-checkbox-checked {
  background: #F0F !important;
}

.unique-selection-list .green-checkbox .mat-pseudo-checkbox-checked {
  background: #0F0 !important;
}

SRC / STYLES.SCSS

.mat-list-option {
  .mat-list-item-content {
    padding: 2px !important;
    .mat-list-text {
      padding: 2px !important;
    }
    .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
      background-color: darkorange;
    }
  }
}

Если у вас есть другие группы, вы можете сделать это

HTML

<mat-selection-list ...>
    <mat-list-option formfiltros-operaciones ...>
        {{operacion.nombre}}
    </mat-list-option>
</mat-selection-list>

<mat-selection-list ...>
    <mat-list-option formfiltros-inmuebles ...> 
        {{inmueble.nombre}}
    </mat-list-option>
</mat-selection-list>

<mat-selection-list ...>
    <mat-list-option formfiltros-localidades ...> 
        {{localidad.nombre}}
    </mat-list-option>
</mat-selection-list>

SRC / STYLES.SCSS

Исправить заполнение

.mat-list-option {
  .mat-list-item-content {
    padding: 2px !important;
      .mat-list-text {
      padding: 2px !important;
    }
  }
}

применить цвет псевдопроверки к группе 'formfiltros-operaciones'

.mat-list-option[formfiltros-operaciones] {
  .mat-list-item-content {
    .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
      background-color: darkorange;
    }
  }
}

применить цвет для псевдо-проверки в группе 'formfiltros-inmuebles'

.mat-list-option[formfiltros-inmuebles] {
  .mat-list-item-content {
    .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
      background-color: green;
    }
  }
}

применить цвет для псевдопроверки в группе formfiltros-localidades

.mat-list-option[formfiltros-localidades] {
  .mat-list-item-content {
    .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
      background-color: blue;
    }
  }
}

это выглядит так