vue + scss实现暗夜模式我们来分析一下怎么来实现一个简单的暗夜模式在此处贴上我的代码：在页面中使用的时候直接就传

最近得项目需求要实现暗夜模式后期可能拓展为更换主题色

我们来分析一下怎么来实现一个简单的暗夜模式

1.我们使用scss，定义颜色变量，这里需要两种模式的，一个light模式的颜色变量，
  另一个则是dark模式下的变量，例如：$light-bg-color: #f9f9f9; $dark-bg-color: #6c757d;
2.定义一个scss的mixin方法，接收背景颜色，字体颜色作为参数，设置背景、字体的颜色，并且
  定义好light模式下的引用，dark模式下的引用
3.当使用的是dark模式下的时候，我们需要定义一个方法来查找映射light颜色属性对应的dark颜色属性。
4.这样子就可以实现一个主题色的改变了

在此处贴上我的代码：

  // 颜色映射
  $map-colors: (
    $primary-color: $gray-900;
    $white: $gray-500;
    ......
  )
  // light颜色与dark颜色映射
  @function lightnToDarkMode($lightColor) {
      @return map-get($map-colors, $lightColor);
  }
  // 定义方法
  @mixin color_primary($background-color, $color) {
      background: $background-color;
      color: $color;
      // 判断匹配
      [data-theme="light"] & {
         background: $background-color;
         color: $color;
      }
      [data-theme="dark] & {
         background: lightToDarkMode($background-color);
         color: ligthToDarkMode($color);
         box-shadow: none;
      }
  }

在页面中使用的时候直接就传入背景颜色，和字体颜色就好了

@include color_primary($bg-color, $contentColor);

设置一个开关，改变

window.document.documentElement.setAttribute("data-theme", "dark");就ok拉