如何使用 angular5 和 angular 材质创建自定义颜色主题

本文介绍了如何使用 angular5 和 angular 材质创建自定义颜色主题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在关注关于如何创建自定义主题的 angular/material 文档，关注其他博客，并检查了各种类似的堆栈溢出问题，但似乎无法解决这个问题.我有以下 style.css、angular-cli.json、theme.scss 和另一个 sass 文件，其中我的主题颜色来自 super-styles.sass.

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. I have the following styles.css, angular-cli.json, theme.scss, and another sass file where my theme colors come from super-styles.sass.

styles.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-styles.sass

...
$darkblue: #7faedd
$mediumblue: #85ceef
$lightblue: #c5e8f1
$yellow: #f4ef5f
$alert: #f37652
$orange: #fbb03c
...

根据教程，我觉得这应该可以工作，但 angular 无法编译，并且出现错误.

According to the tutorials, I feel like this should be working, but angular doesnt compile and I get an error.

错误在./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/assets/styles/theme.scss模块构建失败:未知单词 (23:1)

21 |$candy-app-theme: mat-light-theme($candy-app-primary,$candy-app-accent, $candy-app-warn);22 |

21 | $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); 22 |

23 |//包括应用程序中使用的核心和每个组件的主题样式.|^ 24 |//或者，您可以为每个组件导入并@include 主题混合 25 |//你正在使用的.

有关如何构建自定义主题并在我的 angular 应用程序中使用它的任何帮助都会非常有帮助.谢谢！

Any help as to how to build a custom theme and use it in my angular app would be greatly helpful. Thanks!

推荐答案

为了对 Angular - Material 使用自定义的十六进制调色板，您需要为调色板定义不同的阴影以及对比色，即使您只想要一种颜色.我建议至少使用 3 种颜色(浅色、普通色、深色)，以便它与 Material 的内置动画完美配合:

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. I'd suggest using at least 3 colors (light, normal, dark) so that it works flawless with Material's built in animations:

// 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);

这篇关于如何使用 angular5 和 angular 材质创建自定义颜色主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！