function const getContrastYIQ = (hexcolor) => {
hexcolor = colorToHEX(hexcolor).substring(1)
let r = parseInt(hexcolor.substr(0, 2), 16)
let g = parseInt(hexcolor.substr(2, 2), 16)
let b = parseInt(hexcolor.substr(4, 2), 16)
let yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000
return (yiq >= 128) ? 'black' : 'white'
}colorToHEX是一个将各种类型的颜色值都转为十六进制颜色的函数。
4.一些小细节
logo、导航、返回按钮、返回顶部等小控件随当前编辑中的主题色进行变色。
到这里前端部分就结束了，让我们喝口水继续。
后端部分
后端用的是nodejs及eggjs框架，对eggjs不熟悉的话可先阅读一下文档： eggjs.org/zh-cn/ ，后端部分比较简单，先看路由：
module.exports = app => {
const { router, controller } = app // 获取官方主题列表
router.get(`${BASE_URL}/getOfficialThemes`, controller.index.getOfficialThemes)
// 返回变量数据
router.get(`${BASE_URL}/getVariable`, controller.index.getVariable)
// 编译scss
router.post(`${BASE_URL}/updateVariable`, controller.index.updateVariable)
// 下载
router.post(`${BASE_URL}/download`, controller.index.download)
}
目前官方主题列表和变量数据都是一个写死的json文件。所以核心只有两部分，编译scss和下载，先看编译。
编译scss
主题在线编辑能实现靠的就是scss的变量功能，编译scss可用使用sass包或者
node-sass包，前端传过来的参数其实就一个json类型的对象，key是变量，value是值，但是这两个包都不支持传入额外的变量数据和本地的scss文件进行合并编译，但是提供了一个配置项：importer，可以传入函数数组，它会在编译过程中遇到 @use or @import 语法时执行这个函数，入参为url，可以返回一个对象：
{
contents: `
h1 {
font-size: 40px;
}
`
}contents的内容即会替代原本要引入的对应scss文件的内容，详情请看：sass-lang.com/documentati…
但是实际使用过程中，不知为何sass包的这个配置项是无效的，所以只能使用node-sass，这两个包的api基本是一样的，但是node-sass安装起来比较麻烦，尤其是windows上，安装方法大致有两种：
npm install -g node-gyp
npm install --global --production windows-build-tools
npm install node-sass --save-devnpm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install node-sass
因为主题的变量定义一般都在统一的一个或几个文件内，像hui，是定义在
