如何为暗模式调用变量

Question

你好，我想为我的Ionic 3 Angular 5项目制作暗模式。我根据需要制作了更改主题的功能。

我的问题是主题文件夹中的ionic.theme.dark scss文件中的scss变量不适用，例如$background色简单的css规则适用，例如p{font-size：40px}。

我认为有一种解决方法，因为当我只是在 variables.scss 文件中调用 ionic.theme.dark 而不将其放入类中时，它可以正常工作，但是当我需要在类中调用暗模式时，例如 .dark-theme{@import "./ionic.theme.dark";} 它只调用 css 规则而不是变量

例如

.dark-theme{
p{
font-size:76px
}
$text-color:                 #fff !default;
$link-color:                 color($colors, primary) !default;
$background-color:           rgba(0,0,0,0.6) !important;
$subdued-text-color:         #666 !default;
}

p 字体大小有效，但$background色不起作用 当我在所有变量中丢失 ！default 时也会发生同样的事情 知道为什么吗？

Answer 1

可以使用媒体查询来实现

@media (prefers-color-scheme: dark) {
.day.dark-scheme   { background:  #333; color: white; }
.night.dark-scheme { background: black; color:  #ddd; }
}
@media (prefers-color-scheme: light) {
.day.light-scheme   { background: white; color:  #555; }
.night.light-scheme { background:  #eee; color: black; }
}

参考 ： https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme