[Angular] Define a custom Material theme
Angular Custom define Material Theme
2023-09-14 08:59:14 时间
// include all the scss @import "~@angular/material/theming"; // Include non-theme styles for core. @include mat-core(); $mat-custom-primary-theme: ( 50: #ffebee, 100: #ffcdd2, 200: #ef9a9a, 300: #e57373, 400: #ef5350, 500: #e1234e, 600: #e53935, 700: #d32f2f, 800: #c62828, 900: #b71c1c, A100: #ff8a80, A200: #ff5252, A400: #ff1744, A700: #d50000, contrast: ( 50: $dark-primary-text, 100: $dark-primary-text, 200: $dark-primary-text, 300: $dark-primary-text, 400: $dark-primary-text, 500: $light-primary-text, 600: $light-primary-text, 700: $light-primary-text, 800: $light-primary-text, 900: $light-primary-text, A100: $dark-primary-text, A200: $light-primary-text, A400: $light-primary-text, A700: $light-primary-text ) ); // Define a theme. $primary: mat-palette($mat-custom-primary-theme); $accent: mat-palette($mat-pink, A200, A100, A400); $theme: mat-light-theme($primary, $accent); // Include all theme styles for the components. @include angular-material-theme($theme);
// Our dark theme
.dark-theme {
$theme: mat-dark-theme($primary, $accent);
@include angular-material-theme($theme);
}
Add those in to styles.scss
In app.component.html, add 'dark-theme' class by condition:
<main [ngClass]="{ 'dark-theme': dark }"> </main>
ts file:
export class AppComponent implements OnInit { dark: boolean = false; }
相关文章
- angular父子组件传值
- Angular tsconfig.json 文件里的 paths 用途
- AngularJS进阶(五)Angular实现下拉菜单多选
- Angular和Vue.js 深度对比
- Angular SSR 应用的 SEO 实现一个例子 - meta 和 title 元素的赋值
- 如何在Angular项目中使用MQTT
- Angular HTTP 请求自定义 timeout 值的一种实现思路
- Angular HTTPClient API 在 SAP 电商云中的使用
- Angular HTTPClient 发送请求的触发方式讨论
- vue相比jquery_angular和vue哪个厉害
- Angular 应用 tsconfig.json 文件里的 typeRoots 属性讲解
- 基于 Spartacus 的 Angular Storefront 性能优化建议
- angular.foreach循环方法使用指南