H5通过Scss实现Dark mode的方案

一、首先给项目配置scss

1、安装依赖

npm install node-sass sass-loader --save-dev

2、找到build中webpack.base.conf.js, 在rules中添加scss规则

{
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
}

二、通过 sass-resources-loader 全局注册 Scss 变量

1、安装sass-resources-loader

npm install sass-resources-loader --save-dev

2、在 build/utils.js 的 exports.cssLoaders 函数内添加如下代码

function resolveResource(name) {
    return path.resolve(__dirname, '../src/common/style/' + name);
}

function generateSassResourceLoader() {
    var loaders = [
      cssLoader,
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          // 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, '../src/common/style/index.scss'
          resources: [
            resolveResource('index.scss')
          ]
        }
      }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
}

修改原来的return

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    // sass: generateLoaders('sass', { indentedSyntax: true }),
    // scss: generateLoaders('sass'),
    sass: generateSassResourceLoader(),
    scss: generateSassResourceLoader(),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

三、新建一个appTheme.scss文件，里面可以配置不同的主题配色方案

$themes: (
  light: (
    // 浅色模式
    text1_color: #000000, // 一级标题 (#272726改为#000000)
    text2_color: #777F8B, // 二级字体颜色
    text3_color: #A2AAB8, // 三级字体颜色 (#A1AAB9改为#A2AAB8) （书籍作者、书籍评分）
    text4_color: #C1C7D1,
    text5_color: #ffffff, // 倒计时时间
    text6_color: #93918c, // 倒计时之间的冒号

    line1_color: #D5D9E0, // (1px)
    line2_color: #f5f5f5, // (10px)

    bg1_color: #ffffff,
    bg2_color: #F5F5F5,
    bg3_color: #F2F3F6,
    bg4_color: #000000,
    bg5_color: #f4f3f4,

    button1_color: #ffffff,
    button2_color: #f2f3f6,
    button3_color: #C4C9D1,

    red_color: #FF2D2D,
    VIP_color: #B68B4A,
    link_color: #A3704E,
    sub_color: #A3704E
  ),

  dark: (
    // 深色模式
    text1_color: #ffffff,
    text2_color: #8d8d93,
    text3_color: #8d8d93,
    text4_color: #47474a,
    text5_color: #000000,
    text6_color: #ffffff,

    line1_color: #323235, // (1px)
    line2_color: #323235, // (10px)

    bg1_color: #000000,
    bg2_color: #1c1c1e,
    bg3_color: #1c1c1e,
    bg4_color: #ffffff,
    bg5_color: #1c1c1e,

    button1_color: #4d4f53,
    button2_color: #1c1c1e,
    button3_color: #C4C9D1,

    red_color: #FF2D2D,
    VIP_color: #B68B4A,
    link_color: #A3704E,
    sub_color: #A3704E
  )
)

四、再定一个handleTheme.scss文件，来操作上一个文件中的$theme变量

@import "./appTheme.scss";

//遍历主题map
@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    //!global 把局部变量强升为全局变量
    $theme-map: $theme-map !global;
    //判断html的data-theme的属性值  #{}是sass的插值表达式
    //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}

// 声明一个根据Key获取颜色的function
@function themed($key) {
  @return map-get($theme-map, $key);
}

// 获取背景颜色
@mixin background_color($color) {
  @include themeify {
    background-color: themed($color)!important;
  }
}

// 获取字体颜色
@mixin font_color($color) {
  @include themeify {
    color: themed($color)!important;
  }
}

// 获取边框颜色
@mixin border_color($color) {
  @include themeify {
    border-color: themed($color)!important;
  }
}

五、在项目中写样式
需要在原有的css颜色代码下添加如下代码

.details-area, .comment-area {
    background-color: #FFFFFF;
    @include background_color("bg1_color");
 }

.community-topic-title {
    font-weight: 700;
    font-size: 22px;
    color: #000;
    @include font_color("text1_color");
    padding-top: 0.195rem;
 }

六、切换暗黑模式
在app.vue中

mounted () {
    const darkMode = getQuery(window.location.href)['darkMode']
    if (darkMode === 'true') {
      window.document.documentElement.setAttribute('data-theme', 'dark')
    } else {
      window.document.documentElement.setAttribute('data-theme', 'light')
    }
}