我一直在关注有关如何创建自定义主题的 Angular/ Material 文档,关注其他博客,并检查了各种堆栈溢出类似问题,但似乎无法正常工作。我有以下 styles.css、angular-cli.json、theme.scss 和另一个 sass 文件,我的主题颜色来自 super-styles.sass。
样式.css
...
@import 'assets/styles/theme.scss';
...
Angular -cli.json
...
"styles": [
"styles.css",
"src/assets/styles/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 样式.sass
...
$darkblue: #7faedd
$mediumblue: #85ceef
$lightblue: #c5e8f1
$yellow: #f4ef5f
$alert: #f37652
$orange: #fbb03c
...
根据教程,我觉得这应该可行,但 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)
21 | $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); 22 |
23 | // Include theme styles for core and each component used in your app. | ^ 24 | // Alternatively, you can import and @include the theme mixins for each component 25 | // that you are using.
任何关于如何构建自定义主题并在我的 Angular 应用程序中使用它的帮助都会非常有帮助。谢谢!
最佳答案
为了对 Angular - Material 使用自定义的十六进制调色板,您需要为调色板定义不同的阴影和对比色,即使您只需要一种颜色。我建议至少使用 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);
关于angular - 如何使用 angular5 和 angular Material 创建自定义颜色主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47497743/