Question

正在使用此document。在尝试更改按钮上的文本颜色时，我将theme.scss添加到 CSS项目。这是theme.scss代码：

@import '~@angular/material/theming';
@include mat-core();

$candy-app-primary: mat-palette($mat-indigo, 700, 300, 900);
$candy-app-accent:  mat-palette($mat-light-blue, A400);
$candy-app-warn:    mat-palette($mat-deep-orange, A200);

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

@include angular-material-theme($candy-app-theme);

这是html文件：

 <button  mat-raised-button color="accent" routerLink="/">Home</button>

重音颜色显示了预期的重音，淡蓝色。按钮内的文本仍为灰色。 A400没有显示预期的白色。

Answer 1

尝试

button
{
    color: $(code);
}

Answer 2

显示与预期相同。（mat-light-blue，A400）将黑色作为前景色。我建议您使用700到900之间的范围来获得白色作为前景。

您可以参考以下链接，以获得有关材料设计颜色的参考。 https://material.io/design/color/the-color-system.html#tools-for-picking-colors

如果您要使用白色前景色使用相同的颜色（A400），则可以使用自己的样式进行设置。

.mat-raised-button{
   color: white !important;
 }

Answer 3

您可以为背景和前景（文本颜色）应用浅色主题自定义设置。在应用自定义主题之前插入此内容，并使用颜色值代替示例中的值：

$mat-light-theme-background: (
  background:               $your_background,
  status-bar:               $light-bg-darker-20,
  app-bar:                  $light-bg-darker-5,
  hover:                    $dark-bg-alpha-4,
  card:                     $light-bg-lighter-5,
  dialog:                   $light-bg-lighter-5,
  tooltip:                  $dark-bg-tooltip,
  disabled-button:          $dark-bg-alpha-12,
  raised-button:            #e5e5e5,
  focused-button:           $dark-focused,
  selected-button:          $light-bg-darker-20,
  selected-disabled-button: $light-bg-darker-30,
  disabled-button-toggle:   $light-bg-darker-10,
  unselected-chip:          $light-bg-darker-10,
  disabled-list-option:     $light-bg-darker-10,
);

$mat-light-theme-foreground: (
  base:              $cdm-grey,
  divider:           $dark-dividers,
  dividers:          $dark-dividers,
  disabled:          $dark-disabled-text,
  disabled-button:   rgba($dark-text, 0.26),
  disabled-text:     $dark-disabled-text,
  elevation:         black,
  secondary-text:    $dark-accent-text,
  hint-text:         $dark-disabled-text,
  accent-text:       $dark-accent-text,
  icon:              $dark-accent-text,
  icons:             $dark-accent-text,
  text:              $dark-primary-text,
  slider-min:        $dark-primary-text,
  slider-off:        rgba($dark-text, 0.26),
  slider-off-active: $dark-disabled-text,
);

如何使用自定义主题更改按钮上的文本颜色

3 个答案: