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

Posted 2023-02-22

【中文标题】如何使用 angular5 和 angular 材质创建自定义颜色主题

【英文标题】：How to create a custom color theme with angular5 and angular materials

【发布时间】：2018-05-09 21:54:57

【问题描述】：

我一直在关注有关如何创建自定义主题的角度/材料文档，关注其他博客，并检查了各种堆栈溢出类似问题，但似乎无法使其正常工作。我有以下 styles.css、angular-cli.json、theme.scss 和另一个 sass 文件，其中我的主题颜色来自 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);

超级样式.sass

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

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

错误 ./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, $糖果应用程序口音，$糖果应用程序警告）； 22 |

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

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

【问题讨论】：

我前段时间也遇到过同样的问题，如果我没记错你不需要将theme.scss导入style.css

【参考方案1】：

为了将来参考，有一些工具，例如 http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5，可以根据起始颜色为您创建主题。

给它一个名字 选择底色 点击剪贴板图标 选择框架 将粘贴复制到您的 .scss 中 向下传递变量

【参考方案2】：

正如 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-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));

在此之后，您将拥有一个对象，其中包含每种颜色。

我可以建议你像这样为此制作通用自定义对象

$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>

这是因为颜色指令将 mat-*-class 添加到 * 是颜色值的元素。所以 color="foo" 生成 class="mat-foo" 到对应的元素。

【讨论】：

如何解决编译器错误？ Type '"success"' is not assignable to type 'ThemePalette'. <mat-spinner [color]="'success'"></mat-spinner>

我在没有 [] 的情况下使用它。我知道应该使用它们，但这样它仍然有效。对于我自己的组件，我制定了自己的颜色指令来做与材质组件颜色相同的事情。

【参考方案3】：

要为 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);

【讨论】：

我已经按照你说的做了，不是从超级样式中获取颜色，而是从像这样的文件中获取调色板。但是还是不行……

@Dan 从 styles.css 中删除 @import 'assets/styles/theme.scss';

无论如何我们可以生成那些不同的色调颜色吗？可能来自 Sketch App？？

对于那些懒惰并且不想手动计算不同颜色的人来说，有一个很酷的在线工具可以完成这项工作 - mcg.mbitson.com