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

时间:2019-04-02 13:02:50

标签: css angular6 less angular-material2

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

例如,默认情况下,我的应用程序原色为红色,如果用户从标题选择框中将其更改为蓝色,则它将自动将我的原色更改为红色。

我尝试了简单的方法,例如使用javascript从index.html切换CSS,但是我不确定如何使用越来越少的变量。

谢谢。

2 个答案:

答案 0 :(得分:0)

Less是CSS预处理程序,这意味着它在编译时而不是运行时生成CSS。因此,您无法做自己打算做的事情。

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

答案 1 :(得分:0)

Less可以在运行时进行编译,并且是少数可以做到这一点并在运行时以编程方式修改CSS var的CSS处理器(如果不是唯一的话)。

查看此SO帖子:How to use less in Angular component without CLI