我创建了一个自定义主题,主要颜色的确显示为绿色,而强调色也显示为绿色,但是应该显示为黄色!
如果我使用此代码$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>
答案 0 :(得分:0)
尝试删除口音主题声明中的字符串引号:
'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'