在官方theming documentation of Angular Material2中,它明确说明如下:
在Angular Material中,通过合成多个调色板来创建主题 . 特别是,主题包括:主要调色板:在所有屏幕和组件中使用最广泛的颜色 . 重点调色板:用于浮动操作按钮和交互元素的颜色 . 警告调色板:用于传达错误状态的颜色 . 前景调色板:文本和图标的颜色 . 背景调色板:用于元素背景的颜色 .
但在每个例子中,他们只修改前三个:
@import '~@angular/material/theming';
@include mat-core();
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn: mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);
所以我的问题是:如何更改前景调色板以更改主调色板或辅助调色板的文本颜色?
有一些网站(materialpalette.com,material.io)显示了易于可视化的调色板,但他们仍然没有说明如何在Angular Material2中包含或修改该调色板 .
3 回答
您可以通过创建自己的前景贴图来更改默认主题颜色,并在初始化之前将其合并到创建的主题中 . 方法如下:
@angular/material/_theming.scss
- >$mat-light-theme-foreground
函数中所定义 .您可以使用 Map 并仅定义所需的字段,并将其他字段保留为默认值 .
Note: 由于SCSS中的所有 Map 都是不可变的,因此
map-merge()
返回新的 Map 实例并且不会修改 Map - 因此我们有另一个变量$my-app-theme-custom
来保存结果主题 .Note: 我正在使用 Angular Material v2.0.0-beta.8
该指南位于here的文档网站上 .
首先,为主题定义调色板,例如
$primary
,$accent
,$warn
(在指南中它们具有$candy-app-
前缀),然后创建$theme
对象:一旦我们有一个包含所有调色板的主题,我们就可以从中获得一个前景调色板:
从
$foreground
palette我们可以根据键获取任何值,例如要么
这是检索
secondary-text
属性的代码:我从
2.0.0-beta.2
切换到2.0.0-beta.3
,文件夹结构看起来不一样,你是对的 . 它现在\node_modules\@angular\material\_theming.scss
,_palette.scss
文件已经消失 . 你可以做全局搜索:'$mat-dark-theme-background: ('_theming.scss
拥有所有颜色, Map 和所有功能,如mat-color
这是代码:
您可以在以下位置找到 Map :\ node_modules \ @angular \ material \ core \ theming \ _palette.scss
检索“辅助文本”的示例: