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

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

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

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

提前致谢。

标签： cssangular6lessangular-material2

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