如何在angular2 + Less中动态切换css主题？答案

【问题标题】：How to switch css theme on the fly in angular2 + Less?如何在angular2 + Less中动态切换css主题？
【发布时间】：2018-07-30 01:20:43
【问题描述】：

我正在为此苦苦挣扎，但找不到任何答案，尽管这似乎是一种常见的情况。

我正在用 angular5 构建一个 web 应用程序，所有样式都使用 @component styleUrls 在 less 中。

我用less，所有颜色都定义在一个global-vars.less文件中，导入到所有封装的组件中。

global-vars.less:

@color_0:  #283238;

some-component.less:

@import '../../global-vars';
.my-div {
  background-color: @color_0;
}

我想在 global-vars.less 中添加一个层来通过父类切换颜色：

global-vars.less:

@color_0:  #283238; 
@color_1:  #EEFFEE; 

.dark-theme {
  @background-app-color: @color_0;
}

.light-theme {
  @background-app-color: @color_1;
}

some-component.less:

@import '../../global-vars';
.my-div {
  background-color: @background-app-color;
}

当然，它不能工作，因为 LESS 会预编译所有内容。但我找不到可行的技术。我尝试从标题中更改 CSS 文件，但是因为 Angular 使用封装的样式表作为标签插入，这对我没有帮助。我尝试使用 mixin，但我无法根据父类创建 mixin，所以那里没有运气。

我唯一的选择是复制所有模块的所有 CSS 层次结构

.parent {
  .child {
    background: @light-color;
  }
}

.dark theme .parent {
  .child {
    background: @dark-color;
  }
}

但这将是一场噩梦，因为项目规模庞大

任何帮助将不胜感激。谢谢。

【问题讨论】：

【解决方案1】：

我使用 CSS 自定义属性（变量）找到了答案显然，它已经得到了足够的支持，并且使用它们我可以绕过所有角度封装问题。

我创建了一个 Themes.css 文件，该文件被导入到 main.css。

我有：

:root {
  --light_color_0: #FFF;
  --light_color_1: #EEE;

  --dark_color_0: #000;
  --dark_color_1: #111;
}

在同一个文件中：

:root {
  --bg_color: var(--light_color_0);
}

:root.darktheme {
  --bg_color: var(--light_color_0);
}

从我的角度组件内部：

.panel_popup {
  background-color: var(--bg_color);
}

剩下的就是通过单击一个按钮来添加一个类。希望它可以帮助某人

【讨论】：