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

Question

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

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

我尝试了简单的方式解决方案，比如使用javascript从index.html切换CSS，但我不确定如何在变量越来越少的情况下这样做。

提前谢谢。

Answer 1

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

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

Answer 2

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

看看这篇文章：How to use less in Angular component without CLI