角度动态颜色 - SASS答案

【问题标题】：Angular Dynamic Colors - SASS角度动态颜色 - SASS
【发布时间】：2018-06-26 01:24:58
【问题描述】：

编辑：我不想在可以使用预定义调色板的地方使用角度主题。我想为深色和浅色类使用自定义颜色。

我们能否有一个styles.sass(它是主要的sass)文件如下：

.light {
    $background:#ffffff;
    $text-foreground: #000000;
    $text-foreground-onhover: #ffffff;
    $text-background-onhover: #000000;
}

.dark{
    $background:#000000;
    $text-foreground: #ffffff;
    $text-foreground-onhover: #000000;
    $text-background-onhover: #ffffff;
}

在单个组件的 sass 文件中..（比如说 dummycomp.sass）（即使我在 dummycomp.sass 中导入 main.sass 也会引发错误，因为 $text-foreground 不能直接访问:()

 .div{
   color:$text-foreground;
  }

在 app.component.html.. 根据条件，我可以切换深色或浅色类。

<div [ngClass]="selectedClass">
....... // The main app content lies here 
....... // selectedClass can be either light or dark
</div>

【问题讨论】：

标签： css angular dynamic sass styling

【解决方案1】：

它抛出是因为你已经在作用域中声明了变量。它在它之外不可用。你不能像这样创建主题，因为 Sass 是一种编译成 CSS 的语言，这意味着变量被剥离了。如果这是您想要实现它们的方式，您将需要为这两个主题设置 CSS（尽管我建议使用实际的 CSS 自定义属性而不是这个）。

您可以通过在组件样式中利用 :host-context 来做到这一点。

:host-context(.dark) { color: black }
:host-context(.light) { color: white }

来自文档：

有时根据组件视图之外的某些条件应用样式很有用。例如，可以将 CSS 主题类应用于文档 <body> 元素，并且您希望基于此更改组件的外观。

使用:host-context() 伪类选择器，其工作方式与:host() 的函数形式类似。 :host-context() 选择器在组件宿主元素的任何祖先中查找 CSS 类，直到文档根。 :host-context() 选择器在与另一个选择器结合使用时很有用。

换句话说，您可以将当前主题作为一个类添加到层次结构中较高的元素，例如body 或您应用的根元素。

【讨论】：

如果我使用 :host-context(.dark) 和 :host-context(.light) 并将其中的颜色设置为黑色或白色，那么这些变量就没有用了。如果我的应用程序有多个组件，那么这种方法将是一项艰巨的任务.. 有没有其他选择可以让我提前定义黑白颜色并根据用户操作切换主题？？

【解决方案2】：

你几乎做对了，但有两点：

需要在.dark和.light之外定义变量
您应该将全局样式导入要使用这些变量的组件中。

这里是global.scss，其中包含变量：

// Light colors
$light-background:#ffffff;
$light-text-foreground: #000000;
$light-text-foreground-onhover: #ffffff;
$light-text-background-onhover: #000000;

// Dark colors:
$dark-background:#000000;
$dark-text-foreground: #000000;
$dark-text-foreground-onhover: #ffffff;
$dark-text-background-onhover: #000000;

这里是组件scss：

// First you need to import the global.scss
@import '../shared/style/global'; // --> This line
div{
  color:$dark-background;
}

【讨论】：

如果我必须在运行时将主题从黑暗切换到光明..我该如何用你的方法做到这一点？

【解决方案3】：

试试下面的sn-p

全球 SCSS

// Light colors
$light-background:#ffffff;
$light-text-foreground: #000000;
$light-text-foreground-onhover: #ffffff;
$light-text-background-onhover: #000000;

// Dark colors:
$dark-background:#000000;
$dark-text-foreground: #000000;
$dark-text-foreground-onhover: #ffffff;
$dark-text-background-onhover: #000000;

组件 SCSS

@import '../shared/style/global'; // --> change the location according to yours

.paragraph{
  &.dark-theme{
    background: $dark-background;
  }
  &.light-theme{
    background: $light-background;
  }
}

模板

<div class="paragraph" [ngClass]="toggleTheme()">
  Lorem ipsum dolor sit amet consectetur adipisicing elit
</div>

打字稿

toggleTheme(){
  // Set your appropriate logic to select active theme
  // return {'dark-theme':true};
  //or  return {'light-theme':true};
}

【讨论】：