如何修改mat-slide-toggle点击时的阴影颜色为绿色？

你当前的CSS代码是针对mat-slide-toggle组件的，但实际使用的是mat-checkbox，所以不会生效。要修改mat-checkbox点击时的黄色阴影（波纹/聚焦高亮），需要针对mat-checkbox的专属CSS类调整：

方案1：修改点击波纹（Ripple）颜色 #

点击mat-checkbox时出现的波纹效果，可通过以下CSS修改：

::ng-deep .mat-checkbox.mat-checked:not(.mat-disabled) .mat-checkbox-ripple .mat-ripple-element {
  background-color: rgba(50, 170, 118, 0.2); /* 绿色半透明，可按需调整透明度 */
}

方案2：修改聚焦时的轮廓阴影 #

如果是checkbox获得焦点时的高亮阴影，添加以下CSS：

::ng-deep .mat-checkbox.mat-checked:not(.mat-disabled):focus .mat-checkbox-focus-indicator {
  box-shadow: 0 0 0 0.2rem rgba(113, 226, 147, 0.5); /* 绿色聚焦阴影，可调整参数适配需求 */
}

完整示例CSS #

结合你需要的绿色系，替换原有CSS的完整代码：

/* 可选：修改选中状态下勾选框本身的背景色 */
::ng-deep .mat-checkbox.mat-checked:not(.mat-disabled) .mat-checkbox-background {
  background-color: rgb(50, 170, 118);
}

/* 点击波纹颜色 */
::ng-deep .mat-checkbox.mat-checked:not(.mat-disabled) .mat-checkbox-ripple .mat-ripple-element {
  background-color: rgba(50, 170, 118, 0.2);
}

/* 聚焦阴影 */
::ng-deep .mat-checkbox.mat-checked:not(.mat-disabled):focus .mat-checkbox-focus-indicator {
  box-shadow: 0 0 0 0.2rem rgba(113, 226, 147, 0.5);
}

注意：::ng-deep在Angular新版本中已标记为废弃，若使用Angular 15+，更推荐通过自定义主题或设置组件encapsulation: ViewEncapsulation.None的方式编写样式。

内容的提问来源于stack exchange，提问作者Edy