Question

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

// 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颜色，然后将新创建的样式发布到db中。

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

我正在使用Angular 6和材料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文件，并对所有主色，强调色和警告颜色实例进行“查找并替换”，以使用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文件作为主题，因此我们需要替换angular.json文件中的scss文件以指向新的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显示了此工作的简单演示。

带有材质选择器的角度材质设置主题颜色

1 个答案: