如何根据用户选择动态更改更少的变量颜色主题
How to change less variables color theme dynamically as per users choice
我正在使用 Angular-material-6。我正在使用 angular-material 样式表和我自己的自定义 less 样式表作为主样式表。我在 header 中有一个 select 框，它显示主题颜色名称，如红色、绿色、蓝色等。现在我的任务是根据用户选择的主题更改一个较少的变量。
例如，默认情况下我的应用程序主颜色是红色，如果用户将其从 header select 框中更改为蓝色，那么它会自动将我的主变量颜色更改为红色。
我尝试了一些简单的解决方案，例如 CSS 使用 javascript 从 index.html 切换，但我不确定如何使用越来越少的变量来做到这一点。
提前致谢。
Less 是一个 CSS 预处理器，这意味着它在编译时而不是运行时生成 CSS。所以你不能做你想做的事。
如果你想动态覆盖它，你可以看看css variables。您还可以在 JS 中使用 CSS 或巧妙地使用 CSS 级联模型。
Less 可以在 运行 时编译，并且是为数不多的 CSS 处理器之一（如果不是唯一的话）可以在 运行时间。
查看此 SO post：How to use less in Angular component without CLI
我正在使用 Angular-material-6。我正在使用 angular-material 样式表和我自己的自定义 less 样式表作为主样式表。我在 header 中有一个 select 框，它显示主题颜色名称，如红色、绿色、蓝色等。现在我的任务是根据用户选择的主题更改一个较少的变量。
例如，默认情况下我的应用程序主颜色是红色，如果用户将其从 header select 框中更改为蓝色，那么它会自动将我的主变量颜色更改为红色。
我尝试了一些简单的解决方案，例如 CSS 使用 javascript 从 index.html 切换，但我不确定如何使用越来越少的变量来做到这一点。
提前致谢。
Less 是一个 CSS 预处理器，这意味着它在编译时而不是运行时生成 CSS。所以你不能做你想做的事。
如果你想动态覆盖它，你可以看看css variables。您还可以在 JS 中使用 CSS 或巧妙地使用 CSS 级联模型。
Less 可以在 运行 时编译，并且是为数不多的 CSS 处理器之一（如果不是唯一的话）可以在 运行时间。
查看此 SO post：How to use less in Angular component without CLI