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

Question

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

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

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

提前致谢。

Answer 1

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

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