Angular Material 使用拾色器设置主题颜色

Question

我在 theme.scss 文件中有一个包含多个 material 主题的应用程序：

// Light theme
$light-primary: mat-palette($mat-grey, 200, 500, 300);
$light-accent: mat-palette($mat-brown, 100);
$light-warn: mat-palette($mat-deep-orange, 200);

$light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);

.light-theme {
  @include angular-material-theme($light-theme)
}

// Red theme
$red-primary: mat-palette($mat-red, 700, 500, 300);
$red-accent: mat-palette($mat-amber, 200);
$red-warn: mat-palette($mat-brown, 200);

$red-theme: mat-light-theme($red-primary, $red-accent, $red-warn);

.red-theme {
  @include angular-material-theme($red-theme)
}

如果我想更改应用程序的主题，我可以通过切换现有主题来实现。现在我想添加一个功能，让用户使用颜色选择器创建他的自定义主题，该颜色选择器在应用程序中设置 $primary、$accent 和 $warn 颜色，然后 post 在数据库中设置新创建的样式。

我正在使用 ngx-color-picker 设置颜色，但我不知道如何设置自定义主题并在用户访问时使用它。

我正在使用 Angular 6 和 material 2

感谢帮助

Answer 1

由于 scss 样式需要编译成 css 以便您的浏览器理解，动态更改 scss 没有帮助，除非我们重新编译样式-飞。虽然这是一个选项，但我认为它不是客户端进行样式编译的最佳性能。

另一种方法是在已编译的主题 css 文件中使用 css 变量，并在运行时更改这些变量的值。为此，您可以使用现有的 theme.scss 文件，但您需要使用 node-sass 将其编译为 css；从命令行，运行:

node_modules/.bin/node-sass src/theme.scss -o outputFolder

您也可以使用预建的 Material css 主题文件之一。打开此 css 文件并对所有主色、重音色和警告色实例执行 "find and replace" 以使用 css 变量，例如 var(--primary-color)、var(--accent-color) , var(--warn-color)。除非您碰巧知道要查找的颜色的十六进制值，否则很难找到它们，因此搜索 .mat-primary、.mat-accent 和 .mat-warn 即可您要为整个文件替换的十六进制值。接下来我们定义要在根级别使用的默认主题颜色：

:root {
  --primary-color: purple;
  --accent-color: yellow;
  --warn-color: red;
}

由于我们现在要为我们的主题使用这个新的 css 文件而不是 scss 文件，我们需要替换 [=] 中的 scss 文件34=] 文件指向新的 css 文件。当您从数据库中获取颜色值时，您可以将这些变量设置为十六进制值：

document.body.style.setProperty('--primary-color', #someColor);
document.body.style.setProperty('--accent-color', #someColor);
document.body.style.setProperty('--warn-color', #someColor);

Here's a stackblitz 展示了这个工作的简单演示。

Angular Material 使用拾色器设置主题颜色

Angular Material Set Theme Colors with Color Picker

customization

themes

color-picker

angular-material

angular