如何为暗模式调用变量答案

【问题标题】：How to call variables for dark mode如何为暗模式调用变量
【发布时间】：2020-10-09 19:45:35
【问题描述】：

您好，我想为我的 Ionic 3 Angular 5 项目制作暗模式。我制作了我想要的改变主题的功能。

我的问题是主题文件夹内的 ionic.theme.dark scss 文件中的 scss 变量不适用，例如$background-color 简单的 css 规则适用就好。例如p{字体大小：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 font-size 有效，但 $background-color 无效当我失去所有变量中的 !default 时，会发生一些事情知道为什么吗？

【问题讨论】：

标签： css angular sass

【解决方案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

【讨论】：