如何根据用户的选择动态更改较少的变量颜色主题答案

【问题标题】：How to change less variables color theme dynamically as per users choice如何根据用户的选择动态更改较少的变量颜色主题
【发布时间】：2019-08-23 19:45:34
【问题描述】：

我正在使用 Angular-material-6。我正在使用 angular-material 样式表和我自己的自定义少样式表作为主样式表。我在标题中有一个选择框，显示主题颜色名称，如红色、绿色、蓝色等。现在我的任务是根据用户选择的主题更改较少的变量。

例如，默认情况下，我的应用程序原色是红色，如果用户从标题选择框中将其更改为蓝色，那么它会自动将我的主要变量颜色更改为红色。

我尝试了简单的方法解决方案，例如使用 javascript 从 index.html 切换 CSS，但我不确定如何使用越来越少的变量来做到这一点。

提前致谢。

【问题讨论】：

【解决方案1】：

Less 可以在运行时编译，并且是少数几个可以做到这一点并在运行时以编程方式修改 CSS 变量的 CSS 处理器之一（如果不是唯一的话）。

【讨论】：

【解决方案2】：

Less 是一个 CSS 预处理器，这意味着它在编译时而不是运行时生成 CSS。因此你不能做你想做的事。

如果您想动态覆盖它，可以查看css variables。您还可以在 JS 中使用 CSS 或巧妙地使用 CSS 级联模型。

【讨论】：