Angular material 切换到 dark-mode 时更改按钮样式

Question

我想要实现的是，当我在我的应用程序中切换深色和浅色模式时，我想更改按钮样式，当浅色模式打开时，我有 mat-raised-button 和 primary 颜色，当我切换到 dark-mode 我想将按钮样式更改为 mat-stroked-button。

我的 header 组件中有我的切换按钮：

 <mat-slide-toggle #slideToggle class="mat-primary" [checked]="isDarkTheme | async"
              (change)="toggleDarkTheme($event.checked)">&#9728;
            </mat-slide-toggle>

我可以更改 my-theme.scss 中的颜色，但不能更改样式。

有没有办法改变样式？

Answer 1

查看以下内容是否满足您的需求。

当您的 isDarkTheme 开关打开时，将 class 应用到应用其余部分的包装器：

<div [ngClass]="{dark: dark}">

然后，添加类似于 mat-stroked-button 的 css 规则，当 mat-raised-button 在 .dark class 的包装器中时覆盖 mat-raised-button。

.dark .mat-raised-button {
  background-color: #fff;
  color: black;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: none;
}

您可能需要添加更多规则来考虑颜色等，但这至少应该是一种获得您所追求的效果的技术。

https://stackblitz.com/edit/angular-u6bgtp?file=src%2Fstyles.scss

Angular material 切换到 dark-mode 时更改按钮样式

Angular material change button style when switching to dark-mode

css

angular-material

angular