缘由介绍

最近iphone的暗黑模式流行一段时间了,微信为了暗黑模式和apple杠了一次,可惜落败!安卓也在跟风,各大厂商正在努力开发,说实话现在都是实验室的试验品,有些商家也是单子大大的,拿出来给用户用!!
我们前端页面开发是不是也应该顺应这个潮流,适配这个暗黑模式,so,这篇文章来了!

前端换肤

一般前端项目换肤功能也是有的!但是换肤功能是如何实现的呢?我们来了解下有哪些方式:

• 1. 在最外层加主题类名，定义几种主题色，通过切换类来切换主题色
• 2. 将不同主题的样式抽取出来生成多份主题样式文件，在切换事件的时候动态引入
• 3.element变量覆盖
• 4.antd 使用less.modifyVars,这是less独有的,scss不具备的

具体使用

less.modifyVars(推荐),变量法

1.theme.less

body {

    --themeColor : #2d8cf0;

    --bgColor    : #fff;

    --textColor  : #000;

    --grayBgColor: #f5f5f5;

    --borderColor: #fff;
}

2.这个theme.less记得在使用地方引入

eg:

<style lang="less" scoped>

.active {

  color: var(--themeColor);

}

</style>

3.切换主题

themeChange(){
    document.body.style.setProperty("--bgColor", "#fff");

    document.body.style.setProperty("--textColor", "#000");

    document.body.style.setProperty("--grayBgColor", "#f5f5f5");

    document.body.style.setProperty("--borderColor", "#fff");
}

附一个我正在重构的博客前端效果图

比较粗糙,还没具体完善

更改class名方法

1.theme.less

.theme(@backcolor1: #06141e, @backcolor2: #101a23, @thcolor: #1d2f3e, @trcolor: #0d2031, @fcolor: #fff) {

    //theme函数中定义不同的颜色参数
    .tab1 /deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
        // /deep/为深度选择器，作用与 >>> 相同
        background-color: @backcolor2; //TAB切换头的选中样式颜色更改
    }

    .tab1 /deep/ .el-tabs__header,
    .is-top {
        background-color: @backcolor2; //TAB切换头的默认样式颜色更改
    }

    .tab1 /deep/.el-tabs--border-card>.el-tabs__content {
        background-color: @backcolor2;
    }

    .slist /deep/input {
        //input的默认样式颜色更改
        background-color: @backcolor2;
    }

    .tab1 /deep/.el-table th {
        //表格的默认样式颜色更改
        background-color: @thcolor ;
        border-color    : #ccc;
    }

    .tab1 /deep/.el-table__row {
        background-color: @trcolor;
    }

    .ebutton {
        //按钮的默认样式颜色更改
        background-color: @backcolor2;
    }

    .zhi {
        color: @fcolor; //字体颜色修改
    }

    .bottom {
        background-color: @backcolor1;
    }
}

2.再准备一个color.less

@import './theme.less'; //引入主题函数

.theme101A23 {
    //这里为了契合子组件中calss名字，起名比较粗暴
    .theme() //调用函数
}

.themeFFFFFF {
    .theme(#f1f2f7, #fff, #eee, #fff, #000) //重点！！！不同主题间只需要在定义好的函数内传入不同颜色即可
}

.themea {
    //这里为了契合子组件中calss名字，起名比较粗暴
    .theme(red, red, red, red, red) //调用函数
}

.themeb {
    //这里为了契合子组件中calss名字，起名比较粗暴
    .theme(yellow, yellow, yellow, yellow, yellow) //调用函数
}

.themec {
    //这里为了契合子组件中calss名字，起名比较粗暴
    .theme(gray, gray, gray, gray, gray) //调用函数
}

3.最后就是切换了

changeColor(command) {
      document.getElementById("app").className = "theme" + command;
    }

这个方法理解为less嵌套语法,把最外层的class名更换了,这样less执行的函数就变量,这种主要依靠less的func

对,还有一种就是我博客1.0版本的办法,css-in-js用变量控制,emmm,还算比较好用吧!

css变量法

基础变量法

// var.less
// 默认变量
:root {
  --fill-1: #fff;
  --text: #3c3c3c;
  --text-1: #757575;
  --text-2: #222;
}
// 深色变量
[data-theme="dark"] {
  --fill-1: #222;
  --text: #fff;
  --text-1: rgba(255, 255, 255, 0.3);
  --text-2: #ffcd32;
}

对应的页面引用

@import "../../style/var.less";
.text {
    display: inline-block;
    vertical-align: top;
    line-height: 70px;
    font-size: var(--font-size-large);
    color: var(--text-2);
  }

切换主题方法

export const changeTheme = (theme: boolean) => {
  document.documentElement.setAttribute("data-theme", theme ? "light" : "dark");
};

这种方法可以实现换肤功能,但是兼容性比较差

css变量兼容性方法

在css变量的基础上新增了postcss-custom-properties这个插件
安装依赖：

npm install postcss-custom-properties --save-dev npm install postcss-loader --save-dev

在根目录新建postcss.config.js增加配置，配置如下：

const postcssCustompProperties = require("postcss-custom-properties");

module.exports = {
  plugins: [
    postcssCustompProperties({
      importFrom: "src/assets/scss/variable.scss"
    })
  ]
};

这种方法和上面less.modifyVars有个共同的特点,不能生成css色值,浏览器依然显示var(–themeColor),
这对于强迫症患者,那是相当不舒适的,我虽然不是强迫症,但是…我也看不下去,探索无止尽!

css变量最完美兼容方案css-vars-ponyfill

1.建立css变量js文件var-theme.js

/*

 * @Author: wangzhongjie

 * @Date: 2020-05-14 09:55:42

 * @LastEditors: wangzhongjie

 * @LastEditTime: 2020-05-14 09:58:42

 * @Description:主题变量

 * @Email: UvDream@163.com

 */

export const lightTheme = {

  "--themeColor": "#2d8cf0",

  "--bgColor": "#fff",

  "--textColor": "#000",

  "--grayBgColor": "#f5f5f5",

  "--borderColor": "#fff"

};


export const darkTheme = {

  "--themeColor": "#2d8cf0",

  "--bgColor": "#000",

  "--textColor": "#fff",

  "--grayBgColor": "#000",

  "--borderColor": "#544d4d"

};

2.切换主题方法

/**

 * 切换主题

 */

export const changeTheme = (theme: boolean) => {

  document.documentElement.setAttribute("data-theme", theme ? "light" : "dark");

  cssVars({

    watch: true, // 当添加，删除或修改其<link>或<style>元素的禁用或href属性时，ponyfill将自行调用

    variables: theme ? lightTheme : darkTheme, // variables 自定义属性名/值对的集合

    onlyLegacy: false // false  默认将css变量编译为浏览器识别的css样式  true 当浏览器不支持css变量的时候将css变量编译为识别的css

  });

};

切换主题方法需要在初始化,vue项目在main.js初始化下

changeTheme(true)