Angular Material主题

最新推荐文章于 2025-06-13 14:08:47 发布

背太阳的牧羊人

最新推荐文章于 2025-06-13 14:08:47 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： angular 文章标签： angular4

本文链接：https://blog.youkuaiyun.com/u013565133/article/details/78155264

angular 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何在Angular项目中自定义Material设计主题，包括移除预设主题、创建自定义主题文件、定义调色板及应用白天与黑夜两种不同的主题样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果要自定义主题的话，style.scss中引入的material的内建主题样式就不需要了，下面一行代码就从style.scss中移除掉

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; //这段是引入material的核心主题

新建一个文件专门自定义主题

theme.scss

建立主题的时候首先把angular material的主题支持导入进来

@import '~@angular/material/theming';

然后将material中最基础的，最共用的material风格包含进来

@include mat-core();

接下来就自定义我们自己的主题了,自己定义调色板的几个值

//首先把angular material的主题支持导入进来
@import '~@angular/material/theming';


@include mat-core();

//白天主题
$my-app-primary:mat-palette($mat-indigo);
$my-app-accent:mat-palette($mat-pink,A200,A100,A400);
$my-app-warn:mat-palette($mat-red);

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

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


//黑夜主题
$my-dark-primary:mat-palette($mat-blue-grey);
$my-dark-accent:mat-palette($mat-amber,A200,A100,A400);
$my-dark-warn:mat-palette($mat-deep-orange);

$my-dark-theme:mat-dark-theme($my-dark-primary,$my-dark-accent,$my-dark-warn);

.myapp-dark-theme{
    @include angular-material-theme($my-dark-theme);
}