根据自定义值更改主题颜色

【问题标题】：Change theme colors based on custom value根据自定义值更改主题颜色
【发布时间】：2021-01-30 19:57:45
【问题描述】：

我正在为我的 Angular 应用程序使用 metronic 主题。我希望用户能够选择自己的颜色。我无法弄清楚如何以编程方式更改组件中的主题颜色。我想根据登录用户从数据库中获取颜色，然后在他们登录帐户时将这些颜色应用于应用程序。

【问题讨论】：

【解决方案1】：

您可以通过使用css 变量来做到这一点。
我假设您使用的是sass/scss，并且您有自己的颜色变量。
在包含 color vars 的文件中，您可以这样做：

:root{
  --my-theme-color: #ff0000;  //yup it's red
}
$myThemeColor: var(--my-theme-color);

在您的应用程序的 <head> 中，您可以添加一个新的<style> 标签并在那里更改css variable。 例子：

<style>
:root{
  --my-theme-color: #0000ff;  /* now it's blue */
}
</style>
</head>

【讨论】：