sass 多个主题的角度 [英] sass multiple themes in angular

问题描述

假设我在一个 Angular 应用程序中有两个主题(浅色和深色)> 2，以及一个已配置为将主题类添加到 body 标签的切换按钮

Let's say I have two themes (light & dark) in an angular app > 2, and a toggle button which is already configured to add the theme class to the body tag

变量.scss

$themes: (
  light: (
    backgroundColor: #fff,
    textColor: #408bbd,
    borderColor: #254fe5,
  ),
  dark: (
    backgroundColor: #222,
    textColor: #ddd,
    borderColor: #2e4dd2,
  ),
);

我尝试了我发现的不同方法(这里和这里)，但没有工作.

I tried different approaches I found (here and here), but none worked.

我也尝试过最简单的方法

I also tried the simplest approach

about.component.scss

about.component.scss

.theme-dark .page-title{
  color: white;
}

.theme-light .page-title{
  color: red;
}

我知道 body 标签上的 .theme-dark 类无法从组件样式中识别出来，但我找不到任何解决方案.

I know the class .theme-dark on body tag is not recognized from a component style, but I can't find any solution.

我可以使用什么方法在这样的模块系统中获得多个主题?

What approach can I use to get multiple themes in such modules system?

推荐答案

CSS 为我们提供了一个名为 var() 的功能，它允许我们在运行时更改 CSS 元素的属性.有关更多详细信息，您可以在此此处查看我的博客

CSS has provided us a feature called var(), which allows us to runtime change properties of our CSS elements. For more details, you can check my blog on this here

这篇关于sass 多个主题的角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！