[英]How to create a custom color theme with angular5 and angular materials
I have been following the angular/material documentation for how to create a custom theme, followed other blogs, and checked various stack overflow similar questions, but cant seem to get this working.我一直在关注关于如何创建自定义主题的 angular/material 文档,关注其他博客,并检查了各种类似的堆栈溢出问题,但似乎无法解决这个问题。 I have the following styles.css, angular-cli.json, theme.scss, and another sass file where my theme colors come from super-styles.sass.
我有以下 style.css、angular-cli.json、theme.scss 和另一个 sass 文件,其中我的主题颜色来自 super-styles.sass。
styles.css样式文件
...
@import 'assets/styles/theme.scss';
...
angular-cli.json angular-cli.json
...
"styles": [
"styles.css",
"src/assets/styles/theme.scss"
],
...
theme.scss主题.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);
Super-styles.sass超级样式.sass
...
$darkblue: #7faedd
$mediumblue: #85ceef
$lightblue: #c5e8f1
$yellow: #f4ef5f
$alert: #f37652
$orange: #fbb03c
...
According to the tutorials, I feel like this should be working, but angular doesnt compile and I get an error.根据教程,我觉得这应该可以工作,但是 angular 无法编译并且出现错误。
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/assets/styles/theme.scss Module build failed: Unknown word (23:1)
./node_modules/css-loader 中的错误?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/assets/styles/ theme.scss 模块构建失败:未知单词 (23:1)
21 |
21 | $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); 22 |
22 |
23 |
23 | // Include theme styles for core and each component used in your app.
// 包括应用程序中使用的核心和每个组件的主题样式。 |
| ^ 24 |
^ 24 | // Alternatively, you can import and @include the theme mixins for each component 25 |
// 或者,您可以为每个组件导入并@include 主题混合 25 | // that you are using.
// 你正在使用的。
Any help as to how to build a custom theme and use it in my angular app would be greatly helpful.关于如何构建自定义主题并在我的 angular 应用程序中使用它的任何帮助都会非常有帮助。 Thanks!
谢谢!
In order to use a custom hex palette for an Angular - Material you will need to define the different shades as well as contrast colors for the palette, even if you only want one color.为了对 Angular - Material 使用自定义的十六进制调色板,您需要为调色板定义不同的色调和对比色,即使您只需要一种颜色。 I'd suggest using at least 3 colors (light, normal, dark) so that it works flawless with Material's built in animations:
我建议至少使用 3 种颜色(浅色、普通色、深色),以便它与 Material 的内置动画完美配合:
// 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);
as Z. Bagley suggested make your own palette, but I think that you don't need to make all those colors into palette.正如 Z. Bagley 建议制作自己的调色板,但我认为您不需要将所有这些颜色都制作成调色板。 For example this works fine.
例如,这工作正常。
$custom-collection: (
warning : #FFC116,
success : #0a630f,
danger: #c00000,
contrast: (
warning : #000000,
success : #FFFFFF,
danger: #FFFFFF,
)
);
Then you make palette as suggested然后你按照建议制作调色板
$my-app-custom: mat-palette($custom-collection, custom);
Then merge it to theme after mat-light-theme row like this然后像这样在 mat-light-theme 行之后将其合并到主题
$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));
After this you have one object where every color is located.在此之后,您将拥有一个包含每种颜色的对象。
And may I suggest you make general custom object for this like this我可以建议你像这样制作通用的自定义对象吗
$custom: map-get($my-app-theme, custom);
Then you can use it in your component like this然后你可以像这样在你的组件中使用它
background-color: mat-color($custom, validation-invalid);
color: mat-color($custom, validation-invalid-contrast);
And one more suggestion.还有一个建议。 You may add mat-success to your global style file
您可以将 mat-success 添加到您的全局样式文件中
.mat-success {
background-color: mat-color($custom, success);
color: mat-color($custom, success-contrast);
}
Now you can use color attribute like with primary and accent colors.现在您可以像使用主色和强调色一样使用颜色属性。
<button mat-flat-button color="success" >Success</button>
This works because color directive add mat-*-class to element where * is value of color.这是有效的,因为颜色指令将 mat-*-class 添加到元素,其中 * 是颜色值。 So color="foo" generates class="mat-foo" to corresponding element.
所以 color="foo" 生成 class="mat-foo" 对应的元素。
For future reference, there are tools out there such as http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5 that can create the theme for you based on a starting color.为了将来参考,有一些工具可以根据起始颜色为您创建主题,例如http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.