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



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

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

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

提前谢谢。

Less 可以在运行时编译,并且是为数不多的可以执行此操作并在运行时以编程方式修改 CSS 变量的 CSS 处理器之一(如果不是唯一一个(。

看看这篇SO帖子: 如何在没有CLI的情况下在Angular组件中使用更少

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

如果你想动态覆盖它,你可以看看css变量。你也可以在JS中使用CSS或巧妙地使用CSS级联模型。

最新更新