如何在一个Angular组件中处理多个主题？

Question

我正在做一个Angular 9项目，我正在创建两个主题，每个主题都有自己的css输出文件。我修改了 angular.json 文件来处理。

"styles": [
  {
    "input": "src/styles/themes/light-theme.scss",
    "lazy": true,
    "bundleName": "light-theme"
  },
  {
    "input": "src/styles/themes/dark-theme.scss",
    "lazy": false,
    "bundleName": "dark-theme"
  }
],

light-theme 和 dark-theme 是我的输入文件，我在这里设置了一些变量，如

• $background-color
• $button-color
• $text-color
• 等等，等等。

我的问题是，我不能从每个组件中使用这些变量，因为我的组件不知道这些变量是什么。我不能导入一个或另一个主题，因为我想使用我在输入文件中声明的值。我应该如何处理这个问题？有没有什么方法可以 "导入 "我在angular.json文件中写的输入文件？

谢谢！我正在做一个Angular.json文件，有什么方法可以 "导入 "我写在Angular.json文件上的输入文件吗？

Answer 1

如果你在全局样式中定义了sass变量，当你动态改变主题后，你将无法访问它们。这是因为动态加载的主题将只包含css规则，而不是sass；此外，在运行时，你的组件scss也已经编译成css，所以没有更多的sass变量的概念。

你可以使用 CSS变量，它们具有良好的 浏览器支持 (除了IE和opera mini)。

因此，例如，你可以在你的主题文件中定义这些变量。

dark-theme.scss

:root{
  --button-background: darkgrey;
  --button-color: white;
}

light-theme.scss

:root{
  --button-background: lightgrey;
  --button-color: black;
}

然后在你的组件中，使用这些变量

组件.scss

button
{
  cursor: pointer;
  padding: 10px;
  border: 0;
  color:var(--button-color);
  background-color:var(--button-background);
}

然后，当你动态加载轻主题时，它将覆盖现有的变量。如果你再动态地删除 light-theme.css，它将回到使用你的黑暗主题的变量。