如何使用angular5和angular材质创建自定义颜色主题
我一直在关注如何创建自定义主题的angular/material文档,关注其他博客,并检查了各种类似的问题,但似乎无法实现这一点。我有以下styles.css、angular-cli.json、theme.scss和另一个sass文件,其中我的主题颜色来自super-styles.sass styles.css如何使用angular5和angular材质创建自定义颜色主题,angular,material-design,angular-material,Angular,Material Design,Angular Material,我一直在关注如何创建自定义主题的angular/material文档,关注其他博客,并检查了各种类似的问题,但似乎无法实现这一点。我有以下styles.css、angular-cli.json、theme.scss和另一个sass文件,其中我的主题颜色来自super-styles.sass styles.css ... @import 'assets/styles/theme.scss'; ... angular-cli.json ... "styles": [ "styles.css"
...
@import 'assets/styles/theme.scss';
...
angular-cli.json
...
"styles": [
"styles.css",
"src/assets/styles/theme.scss"
],
...
theme.scss
@import '~@angular/material/theming';
@import "super-styles";
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core()
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($darkblue, A400);
$candy-app-accent: mat-palette($orange, A400);
// The warn palette is optional (defaults to red).
$candy-app-warn: mat-palette($alert);
// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);
超级时尚
...
$darkblue: #7faedd
$mediumblue: #85ceef
$lightblue: #c5e8f1
$yellow: #f4ef5f
$alert: #f37652
$orange: #fbb03c
...
根据教程,我觉得这应该是可行的,但是angular没有编译,我得到了一个错误
错误
./node_模块/css加载程序?{“sourceMap”:false,“importLoaders”:1}/节点_模块/postss加载器?{“ident”:“postss”}/src/assets/styles/theme.scss
模块生成失败:未知字(23:1)
21 |$candy应用程序主题:mat light主题($candy应用程序主,
$candy app accent,$candy app warn);22 |
23 |//包括应用程序中使用的核心和每个组件的主题样式。
|^24 |//或者,您可以为正在使用的每个组件25 |//导入并@include主题混合
关于如何构建自定义主题并在我的angular应用程序中使用它的任何帮助都将非常有用。谢谢 要为角度材质使用自定义十六进制调色板,您需要为调色板定义不同的色调以及对比度颜色,即使您只需要一种颜色。我建议至少使用3种颜色(浅色、普通色、深色),以便在材质的内置动画中完美无瑕:
// below defines your custom color to build a theme palette from
$my-blue: (
50: #7fdddd,
100: #7faedd,
200: #7f7fdd,
300: #7faedd,
400: #7faedd,
500: #7faedd,
600: #7faedd,
700: #7faedd,
800: #7faedd,
900: #7faedd,
A100: #7faedd,
A200: #7faedd,
A400: #7faedd,
A700: #7faedd,
contrast: (
50: white,
100: white,
200: white,
300: white,
400: white,
500: white,
600: white,
700: white,
800: white,
900: white,
A100: white,
A200: white,
A400: white,
A700: white,
)
);
// below creates a primary palette with three shades of blue
$my-primary: mat-palette($my-blue, 100, 50, 200);
正如Z.Bagley所建议的,制作你们自己的调色板,但我认为你们不需要把所有这些颜色都制作成调色板。例如,这很好
$custom-collection: (
warning : #FFC116,
success : #0a630f,
danger: #c00000,
contrast: (
warning : #000000,
success : #FFFFFF,
danger: #FFFFFF,
)
);
然后按照建议制作调色板
$my-app-custom: mat-palette($custom-collection, custom);
然后将其合并到mat light主题行之后的主题,如下所示
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
$my-app-theme: map_merge($my-app-theme, (custom: $my-app-custom));
$custom: map-get($my-app-theme, custom);
background-color: mat-color($custom, validation-invalid);
color: mat-color($custom, validation-invalid-contrast);
在此之后,每个颜色都位于一个对象中
我可以建议你像这样做一般的定制对象吗
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
$my-app-theme: map_merge($my-app-theme, (custom: $my-app-custom));
$custom: map-get($my-app-theme, custom);
background-color: mat-color($custom, validation-invalid);
color: mat-color($custom, validation-invalid-contrast);
然后,您可以像这样在组件中使用它
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
$my-app-theme: map_merge($my-app-theme, (custom: $my-app-custom));
$custom: map-get($my-app-theme, custom);
background-color: mat-color($custom, validation-invalid);
color: mat-color($custom, validation-invalid-contrast);
还有一个建议。您可以将mat success添加到全局样式文件中
.mat-success {
background-color: mat-color($custom, success);
color: mat-color($custom, success-contrast);
}
现在,您可以使用颜色属性,如主色和强调色
<button mat-flat-button color="success" >Success</button>
成功
这是因为color指令将mat-*-类添加到元素中,其中*是颜色的值。因此color=“foo”会将class=“mat foo”生成到相应的元素。为了将来的参考,有一些工具可以根据起始颜色为您创建主题
- 给它起个名字
- 选择底色
- 单击剪贴板图标
- 选择框架
- 将粘贴复制到.scss中
- 向下传递变量
@import'assets/styles/theme.scss'代码>从styles.cssis有没有任何方法可以生成这些不同的色调颜色?可能来自Sketch应用程序??对于那些懒惰且不想手动计算不同颜色的人,有一个很酷的在线工具来完成这项艰巨的工作-我不久前也遇到过同样的问题,如果我没记错的话,你不需要将主题.scss
导入样式.css
如何解决编译器错误<代码>类型“success”不可分配给类型“themeparte”代码>我在没有[]的情况下使用它。我知道应该使用它们,但这样仍然有效。对于我自己的组件,我制定了自己的颜色指令来做和材质组件颜色相同的事情。