动态更改角度材质材质主题

Question

我是角度新手，想要动态更改角度材质主题，我知道如何通过制作 scss 文件来制作不同的主题，定义 3 种颜色，包括 mat 属性和功能，但后来我静态添加该文件引用angular.json，但如果我有许多自定义角度材质主题，我想动态引用 css 文件。

那么有什么简单快速且相当优化的方法可以做到这一点吗？

P.S 我已经阅读了许多帖子和文档，但在动态更改主题时似乎顺序令人困惑，例如如果我有切换，那么如何引用不同的样式而不是默认的样式？

任何答案将不胜感激..！！

Answer 1

一种解决方案是实时构建材质调色板。这些是必要的步骤：

1. 在 CSS 变量中定义调色板，然后访问它们。
2. 将这些变量分配给材质角度主题。
3. 使用“tinycolor”库，我们创建一个服务来生成 基于颜色的调色板。
4. 使用 JavaScript，我们更新 DOM 中的 CSS 变量。

这里有一个例子：

https://stackblitz.com/edit/angular-material-theming-playground

Answer 2

@Omar 的答案对我来说听起来不错，但我认为

updateTheme

方法最好是这样的：

private updateThemePalette(colors: Color[], theme: string) {
  let _colors: string[] = [];
  colors.forEach((color) => {
    _colors.push(`--theme-${theme}-${color.name}: ${color.hex}`);
    _colors.push(`--theme-${theme}-contrast-${color.name}: ${(color.darkContrast ? 'rgba(0, 0, 0, 0.87)' : 'white')}`);
  });
  let themeEle = document.getElementById('theme-colors');
  if (!themeEle) {
    themeEle = document.createElement('style'); themeEle.id = 'theme-colors';
    document.head.append(themeEle);
  }
  themeEle.innerHTML = `body{${_colors.join(';')}}`;
}

这样，颜色就会设置为

style tag

中的

head

。