Angular 材质设置主题颜色与颜色选择器
Posted
技术标签:
【中文标题】Angular 材质设置主题颜色与颜色选择器【英文标题】:Angular Material Set Theme Colors with Color Picker 【发布时间】:2019-03-31 00:59:27 【问题描述】:我在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 颜色,然后将新创建的样式发布到数据库中。
我正在使用ngx-color-picker 设置颜色,但我不知道如何设置自定义主题并在用户访问时使用它。
我正在使用 Angular 6 和材料 2
感谢您的帮助
【问题讨论】:
【参考方案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 展示了这个工作的简单演示。
【讨论】:
以上是关于Angular 材质设置主题颜色与颜色选择器的主要内容,如果未能解决你的问题,请参考以下文章