Angular 材质主题主色和重音色相同

Question

我创建了一个自定义主题，原色显示为绿色，强调色也显示为绿色，但应该显示为黄色！

如果我使用此代码$my-theme-accent: mat-palette($mat-pink, A200, A100, A400);

但是有了这个$my-theme-accent: mat-palette($my-accent);，微调器显示为绿色而不是黄色

The spinner appears pink !

强调色与原色同色

代码如下：

@import '../node_modules/@angular/material/theming';

@include mat-core();


$my-primary: (
    50 : #e0f1e0,
    100 : #b3dcb3,
    200 : #80c580,
    300 : #4dad4d,
    400 : #269c26,
    500 : #008a00,
    600 : #008200,
    700 : #007700,
    800 : #006d00,
    900 : #005a00,
    A100 : #8bff8b,
    A200 : #58ff58,
    A400 : #25ff25,
    A700 : #0cff0c,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$my-accent: (
      '50': '#443003',
        '100': '#5c4104',
        '200': '#755205',
        '300': '#8d6307',
        '400': '#a57508',
        '500': '#be8609',
        '600': '#eea80b',
        '700': '#f5b21e',
        '800': '#f6bb37',
        '900': '#f7c34f',
        'A100': '#eea80b',
        'A200': '#d6970a',
        'A400': '#be8609',
        'A700': '#f8cb68',
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);








//the first two are the custom palettes we declared above
$my-theme-primary: mat-palette($my-primary);
$my-theme-accent: mat-palette($my-accent);

//the third, for the warn color, is the predefined material red palette
$my-theme-warn: mat-palette($mat-red);

$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent, $my-theme-warn);

@include angular-material-theme($my-theme);

使用“重音”调色板的加载微调器应该是黄色的，但它是绿色的

<div>
      <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" class="is-loading">
        <mat-option *ngIf="isLoading" class="is-loading">
          <mat-spinner color="accent" diameter="50"></mat-spinner>
        </mat-option>
        <ng-container *ngIf="!isLoading" class="is-loading">
          <mat-option *ngFor="let user of filteredUsers" [value]="user" class="is-loading">
            <span>{{ user.nom_commune }}</span>

          </mat-option>
        </ng-container>
      </mat-autocomplete>
    </div>

Answer 1

尝试删除重音主题声明中的字符串引号：

      '50': '#443003',
        '100': '#5c4104',
        '200': '#755205',
        '300': '#8d6307',
        '400': '#a57508',
        '500': '#be8609',
        '600': '#eea80b',
        '700': '#f5b21e',
        '800': '#f6bb37',
        '900': '#f7c34f',
        'A100': '#eea80b',
        'A200': '#d6970a',
        'A400': '#be8609',
        'A700': '#f8cb68',

到

      50: '#443003',
      100: '#5c4104',
      200: '#755205',
      300: '#8d6307',
      400: '#a57508',
      500: '#be8609',
      600: '#eea80b',
      700: '#f5b21e',
      800: '#f6bb37',
      900: '#f7c34f',
      A100: '#eea80b',
      A200: '#d6970a',
      A400: '#be8609',
      A700: '#f8cb68'