mp-darkmode 1.1.9 → 1.2.0-beta.0

package/dist/darkmode.js

@@ -96,6 +96,37 @@ return /******/ (function(modules) { // webpackBootstrap
 /************************************************************************/
 /******/ ({
 
+/***/ "./node_modules/color-blend/dist/index.modern.js":
+/*!*******************************************************!*\
+  !*** ./node_modules/color-blend/dist/index.modern.js ***!
+  \*******************************************************/
+/*! exports provided: color, colorBurn, colorDodge, darken, difference, exclusion, hardLight, hue, lighten, luminosity, multiply, normal, overlay, saturation, screen, softLight */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "color", function() { return R; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "colorBurn", function() { return H; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "colorDodge", function() { return G; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "darken", function() { return E; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "difference", function() { return L; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "exclusion", function() { return N; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hardLight", function() { return J; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hue", function() { return P; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "lighten", function() { return F; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "luminosity", function() { return S; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "multiply", function() { return B; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "normal", function() { return A; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "overlay", function() { return D; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "saturation", function() { return Q; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "screen", function() { return C; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "softLight", function() { return K; });
+function n(n,r,t){return{r:255*t(n.r/255,r.r/255),g:255*t(n.g/255,r.g/255),b:255*t(n.b/255,r.b/255)}}function r(n,r){return r}function t(n,r){return n*r}function u(n,r){return n+r-n*r}function i(n,r){return a(r,n)}function o(n,r){return Math.min(n,r)}function e(n,r){return Math.min(Math.max(n,r),1)}function c(n,r){return 0===n?0:1===r?1:Math.min(1,n/(1-r))}function f(n,r){return 1===n?1:0===r?0:1-Math.min(1,(1-n)/r)}function a(n,r){return r<=.5?t(n,2*r):u(n,2*r-1)}function b(n,r){return r<=.5?n-(1-2*r)*n*(1-n):n+(2*r-1)*((n<=.25?((16*n-12)*n+4)*n:Math.sqrt(n))-n)}function g(n,r){return Math.abs(n-r)}function h(n,r){return n+r-2*n*r}function M(n,r,t){return Math.min(Math.max(n||0,r),t)}function m(n){return{r:M(n.r,0,255),g:M(n.g,0,255),b:M(n.b,0,255),a:M(n.a,0,1)}}function d(n){return{r:255*n.r,g:255*n.g,b:255*n.b,a:n.a}}function p(n){return{r:n.r/255,g:n.g/255,b:n.b/255,a:n.a}}function v(n,r){void 0===r&&(r=0);var t=Math.pow(10,r);return{r:Math.round(n.r*t)/t,g:Math.round(n.g*t)/t,b:Math.round(n.b*t)/t,a:n.a}}function x(n,r,t,u,i,o){return(1-r/t)*u+r/t*Math.round((1-n)*i+n*o)}function O(n,r,t,u,i){void 0===i&&(i={unitInput:!1,unitOutput:!1,roundOutput:!0}),i.unitInput&&(n=d(n),r=d(r)),n=m(n);var o=(r=m(r)).a+n.a-r.a*n.a,e=t(n,r,u),c=m({r:x(n.a,r.a,o,n.r,r.r,e.r),g:x(n.a,r.a,o,n.g,r.g,e.g),b:x(n.a,r.a,o,n.b,r.b,e.b),a:o});return c=i.unitOutput?p(c):i.roundOutput?v(c):function(n){return v(n,9)}(c),c}function s(n,r,t){return d(t(p(n),p(r)))}function I(n){return.3*n.r+.59*n.g+.11*n.b}function q(n,r){var t=r-I(n);return function(n){var r=I(n),t=n.r,u=n.g,i=n.b,o=Math.min(t,u,i),e=Math.max(t,u,i);function c(n){return r+(n-r)*r/(r-o)}function f(n){return r+(n-r)*(1-r)/(e-r)}return o<0&&(t=c(t),u=c(u),i=c(i)),e>1&&(t=f(t),u=f(u),i=f(i)),{r:t,g:u,b:i}}({r:n.r+t,g:n.g+t,b:n.b+t})}function w(n){return Math.max(n.r,n.g,n.b)-Math.min(n.r,n.g,n.b)}function j(n,r){var t=["r","g","b"].sort(function(r,t){return n[r]-n[t]}),u=t[0],i=t[1],o=t[2],e={r:n.r,g:n.g,b:n.b};return e[o]>e[u]?(e[i]=(e[i]-e[u])*r/(e[o]-e[u]),e[o]=r):e[i]=e[o]=0,e[u]=0,e}function k(n,r){return q(j(r,w(n)),I(n))}function l(n,r){return q(j(n,w(r)),I(n))}function y(n,r){return q(r,I(n))}function z(n,r){return q(n,I(r))}function A(t,u){return O(t,u,n,r)}function B(r,u){return O(r,u,n,t)}function C(r,t){return O(r,t,n,u)}function D(r,t){return O(r,t,n,i)}function E(r,t){return O(r,t,n,o)}function F(r,t){return O(r,t,n,e)}function G(r,t){return O(r,t,n,c)}function H(r,t){return O(r,t,n,f)}function J(r,t){return O(r,t,n,a)}function K(r,t){return O(r,t,n,b)}function L(r,t){return O(r,t,n,g)}function N(r,t){return O(r,t,n,h)}function P(n,r){return O(n,r,s,k)}function Q(n,r){return O(n,r,s,l)}function R(n,r){return O(n,r,s,y)}function S(n,r){return O(n,r,s,z)}
+//# sourceMappingURL=index.modern.js.map
+
+
+/***/ }),
+
 /***/ "./node_modules/color-convert/conversions.js":
 /*!***************************************************!*\
   !*** ./node_modules/color-convert/conversions.js ***!
@@ -2329,9 +2360,10 @@ __webpack_require__.r(__webpack_exports__);
 /**
  * @name Darkmode主入口
  *
- * @function run 配置并处理
+ * @function run 初始化Dark Mode配置并运行Dark Mode处理
  * @param {DOM Object Array} nodes 要处理的节点列表
  * @param {Object}           opt   Dark Mode配置，详见init配置说明
+ * @return void
  *
  * @function init 初始化Dark Mode配置
  * @param {Function}   opt.begin                 开始处理时触发的回调
@@ -2349,23 +2381,28 @@ __webpack_require__.r(__webpack_exports__);
  * @param {string}     opt.defaultLightBgColor   非Dark Mode下背景颜色
  * @param {string}     opt.defaultDarkTextColor  Dark Mode下字体颜色
  * @param {string}     opt.defaultDarkBgColor    Dark Mode下背景颜色
+ * @return void
  *
  * @function convertBg 处理背景
  * @param {DOM Object Array} nodes 要处理的节点列表
+ * @return void
  *
  * @function updateStyle 更新节点Dark Mode样式
  * @param {DOM Object} node   要更新的节点
  * @param {Object}     styles 更新的样式键值对对象，如：{ color: '#ddd' }
+ * @return void
  *
  * @function getContrast 获取两个颜色的对比度
  * @param {string} color1 要计算颜色对比度的颜色1，支持css颜色格式
  * @param {string} color2 要计算颜色对比度的颜色2，支持css颜色格式
- * @return {number} contrast 颜色对比度，取值范围为`[1, 21]`
+ * @return {number} 颜色对比度，取值范围为`[1, 21]`
  *
  * @function extend 挂载插件
  * @param {Array} pluginList 插件列表
+ * @return void
  *
  */
+// 常量
 
 var classReg = new RegExp("".concat(_modules_constant__WEBPACK_IMPORTED_MODULE_0__["CLASS_PREFIX"], "[^ ]+"), 'g'); // Darkmode配置
 
@@ -2462,7 +2499,8 @@ var switchToDarkmode = function switchToDarkmode(mqlObj) {
     console.log('An error occurred when running the dark mode conversion algorithm\n', e);
     typeof _modules_config__WEBPACK_IMPORTED_MODULE_1__["default"].error === 'function' && _modules_config__WEBPACK_IMPORTED_MODULE_1__["default"].error(e);
   }
-};
+}; // 初始化Dark Mode配置并运行Dark Mode处理
+
 
 function run(nodes, opt) {
   init(opt); // 初始化配置
@@ -2473,7 +2511,8 @@ function run(nodes, opt) {
     type: 'dom'
   });
 }
-;
+; // 初始化Dark Mode配置
+
 function init() {
   var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   if (_modules_config__WEBPACK_IMPORTED_MODULE_1__["default"].hasInit) return; // 只可设置一次配置
@@ -2517,7 +2556,8 @@ function init() {
     mql.addListener(switchToDarkmode); // 监听
   }
 }
-;
+; // 处理背景
+
 function convertBg(nodes) {
   _modules_global__WEBPACK_IMPORTED_MODULE_2__["domUtils"].set(nodes);
 
@@ -2532,7 +2572,8 @@ function convertBg(nodes) {
     type: 'bg'
   });
 }
-;
+; // 更新节点Dark Mode样式
+
 function updateStyle(node, styles) {
   if (!_modules_global__WEBPACK_IMPORTED_MODULE_2__["cssUtils"].isFinish) return; // 没有运行过Dark Mode处理逻辑则无需运行
 
@@ -2541,11 +2582,13 @@ function updateStyle(node, styles) {
   }) : undefined, true), false);
   _modules_global__WEBPACK_IMPORTED_MODULE_2__["cssUtils"].writeStyle();
 }
-;
+; // 获取两个颜色的对比度
+
 function getContrast(color1, color2) {
   return _modules_global__WEBPACK_IMPORTED_MODULE_2__["sdk"].getContrast(color1, color2);
 }
-;
+; // 挂载插件
+
 function extend(pluginList) {
   pluginList.forEach(function (plugin) {
     return _modules_global__WEBPACK_IMPORTED_MODULE_2__["plugins"].extend(plugin);
@@ -2585,13 +2628,16 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * @method push 背景节点入栈
  * @param {DOM Object} el    背景节点对象
  * @param {string}     cssKV css键值对
+ * @return void
  *
  * @method contains 判断节点是否在背景节点的区域
  * @param {DOM Object} el       要判断的节点对象（非背景节点）
  * @param {Function}   callback 如果在背景节点区域内，则执行该回调函数
+ * @return void
  *
  * @method update 更新堆栈的节点对象，主要解决前后节点不一致的问题
  * @param {DOM Object Array} els 要更新的节点对象列表
+ * @return void
  *
  */
 // Darkmode配置
@@ -2609,11 +2655,12 @@ var BgNodeStack = /*#__PURE__*/function () {
 
     this._prefix = prefix;
     this.classNameReg = new RegExp("".concat(this._prefix, "\\d+"));
-  }
+  } // 背景节点入栈
+
 
   _createClass(BgNodeStack, [{
     key: "push",
-    value: function push(el, cssKV) {
+    value: function push(el, cssKV, cb) {
       var className = "".concat(this._prefix).concat(this._idx++);
       el.classList.add(className);
 
@@ -2621,9 +2668,11 @@ var BgNodeStack = /*#__PURE__*/function () {
         el: el,
         className: className,
         cssKV: cssKV,
-        updated: !_config__WEBPACK_IMPORTED_MODULE_0__["default"].delayBgJudge
+        updated: !_config__WEBPACK_IMPORTED_MODULE_0__["default"].delayBgJudge,
+        cb: cb
       });
-    }
+    } // 判断节点是否在背景节点的区域
+
   }, {
     key: "contains",
     value: function contains(el, callback) {
@@ -2647,7 +2696,8 @@ var BgNodeStack = /*#__PURE__*/function () {
 
         typeof callback === 'function' && callback(item);
       }
-    }
+    } // 更新堆栈的节点对象，主要解决前后节点不一致的问题
+
   }, {
     key: "update",
     value: function update(els) {
@@ -2675,6 +2725,164 @@ var BgNodeStack = /*#__PURE__*/function () {
 
 /***/ }),
 
+/***/ "./src/modules/color.js":
+/*!******************************!*\
+  !*** ./src/modules/color.js ***!
+  \******************************/
+/*! exports provided: ColorParser, parseColorName, parseWebkitFillColorAndStrokeColor, mixColors, getColorPerceivedBrightness, adjustBrightnessTo */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ColorParser", function() { return ColorParser; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "parseColorName", function() { return parseColorName; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "parseWebkitFillColorAndStrokeColor", function() { return parseWebkitFillColorAndStrokeColor; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "mixColors", function() { return mixColors; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getColorPerceivedBrightness", function() { return getColorPerceivedBrightness; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "adjustBrightnessTo", function() { return adjustBrightnessTo; });
+/* harmony import */ var color__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! color */ "./node_modules/color/index.js");
+/* harmony import */ var color__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(color__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var color_name__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! color-name */ "./node_modules/color-name/index.js");
+/* harmony import */ var color_name__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(color_name__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var color_blend__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! color-blend */ "./node_modules/color-blend/dist/index.modern.js");
+/* harmony import */ var _constant__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./constant */ "./src/modules/constant.js");
+/**
+ * @name 颜色操作相关API
+ *
+ * @function ColorParser 实例化Color对象，传参非法时返回null
+ * @param {string} color css色值
+ * @return {Color Object | null} 实例化结果
+ *
+ * @function parseColorName 处理颜色，包括清除!important和转换英文定义颜色
+ * @param {string}  color              css色值
+ * @param {boolean} supportTransparent 是否支持转换transparent
+ * @return {string} 处理后的rgb(a)格式css色值
+ *
+ * @function parseWebkitFillColorAndStrokeColor 处理-webkit-fill-color和-webkit-text-stroke-color，返回处理后的色值，无则返回空字符串
+ * @param {string} color css色值
+ * @return {string} 处理后的rgb(a)格式css色值，无则返回空字符串
+ *
+ * @function mixColors 计算混合颜色
+ * @param {string} colors 用于计算的颜色数组
+ * @param {string} type 使用的混合颜色算法，支持 mix(默认) | normal | multiply | screen | overlay | darken | lighten | colorDodge | colorBurn | hardLight | softLight | difference | exclusion | hue | saturation | color | luminosity
+ * @return {Color Object | null} 混合结果
+ *
+ * @function getColorPerceivedBrightness 计算感知亮度
+ * @param {RGB Array} rgb 要计算的颜色rgb数组，如：[255, 0, 0]
+ * @return {number} 感知亮度
+ *
+ * @function adjustBrightnessTo 调整为指定感知亮度
+ * @param {number}    target 指定的感知亮度值
+ * @param {RGB Array} rgb    要调整的颜色rgb数组，如：[255, 0, 0]
+ * @return {Color Object} 调整后的颜色
+ *
+ */
+
+
+color_name__WEBPACK_IMPORTED_MODULE_1___default.a.windowtext = [0, 0, 0]; // 补上这个colorName
+
+color_name__WEBPACK_IMPORTED_MODULE_1___default.a.transparent = [255, 255, 255, 0]; // 支持透明，暂定用白色透明度0来表示
+
+ // 常量
+
+
+var COLOR_NAME_REG = new RegExp(Object.keys(color_name__WEBPACK_IMPORTED_MODULE_1___default.a).map(function (colorName) {
+  return "\\b".concat(colorName, "\\b");
+}).join('|'), 'ig'); // 生成正则表达式来匹配这些colorName
+// Color对象 => ColorBlend对象
+
+var color2ColorBlend = function color2ColorBlend(color) {
+  var obj = color.object();
+  obj.a = obj.alpha || 1;
+  delete obj.alpha;
+  return obj;
+}; // ColorBlend对象 => Color对象
+
+
+var colorBlend2Color = function colorBlend2Color(colorBlend) {
+  colorBlend.alpha = colorBlend.a;
+  delete colorBlend.a;
+  return ColorParser(colorBlend);
+}; // 实例化Color对象，传参非法时返回null
+
+
+var ColorParser = function ColorParser(color) {
+  var res = null;
+
+  try {
+    res = color instanceof color__WEBPACK_IMPORTED_MODULE_0___default.a ? color : color__WEBPACK_IMPORTED_MODULE_0___default()(color);
+  } catch (e) {
+    console.log("ignore the invalid color: `".concat(color, "`"));
+  }
+
+  return res;
+}; // 处理颜色，包括清除!important和转换英文定义颜色
+
+var parseColorName = function parseColorName(color, supportTransparent) {
+  return color.replace(_constant__WEBPACK_IMPORTED_MODULE_3__["IMPORTANT_REGEXP"], '').replace(COLOR_NAME_REG, function (match) {
+    if (!supportTransparent && match === 'transparent') return match; // 如果不支持转换transparent，直接返回transparent
+
+    var color = color_name__WEBPACK_IMPORTED_MODULE_1___default.a[match.toLowerCase()];
+    return "".concat(color.length > 3 ? 'rgba' : 'rgb', "(").concat(color.toString(), ")");
+  });
+}; // 处理-webkit-fill-color和-webkit-text-stroke-color，返回处理后的色值，无则返回空字符串
+
+var parseWebkitFillColorAndStrokeColor = function parseWebkitFillColorAndStrokeColor(color) {
+  var newValue = parseColorName(color);
+  return _constant__WEBPACK_IMPORTED_MODULE_3__["COLOR_REGEXP"].test(newValue) ? newValue : '';
+}; // 计算混合颜色
+
+var mixColors = function mixColors(colors) {
+  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'mix';
+  if (Object.prototype.toString.call(colors) !== '[object Array]' || colors.length < 1) return null;
+  if (colors.length === 1) return colors[0];
+  var color1 = ColorParser(colors.shift());
+  var color2 = ColorParser(colors.shift());
+
+  while (color2) {
+    if (!color1 && color2) {
+      // 如果当前色值非法，混入色值合法，则直接使用混入色值
+      color1 = color2;
+    } else if (!color1 && !color2) {
+      // 如果两个色值都非法，则使用下一批色值
+      if (colors.length === 0) break;
+      color1 = ColorParser(colors.shift());
+    } else if (color1 && color2) {
+      // 如果两个色值都合法，执行mix
+      color1 = type === 'mix' ? color1.mix(color2, color2.alpha()) : colorBlend2Color(color_blend__WEBPACK_IMPORTED_MODULE_2__[type](color2ColorBlend(color1), color2ColorBlend(color2)));
+    } // 如果当前色值合法，混入色值非法，无需处理
+
+
+    if (colors.length === 0) break;
+    color2 = ColorParser(colors.shift());
+  }
+
+  return color1 || null;
+}; // 计算感知亮度
+
+var getColorPerceivedBrightness = function getColorPerceivedBrightness(rgb) {
+  return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
+}; // 调整为指定感知亮度
+
+var adjustBrightnessTo = function adjustBrightnessTo(target, rgb) {
+  var relativeBrightnessRatio = target / getColorPerceivedBrightness(rgb);
+  var newTextR = Math.min(255, rgb[0] * relativeBrightnessRatio);
+  var newTextG = Math.min(255, rgb[1] * relativeBrightnessRatio);
+  var newTextB = Math.min(255, rgb[2] * relativeBrightnessRatio);
+
+  if (newTextG === 0 || newTextR === 255 || newTextB === 255) {
+    newTextG = (target * 1000 - newTextR * 299 - newTextB * 114) / 587;
+  } else if (newTextR === 0) {
+    newTextR = (target * 1000 - newTextG * 587 - newTextB * 114) / 299;
+  } else if (newTextB === 0 || newTextG === 255) {
+    newTextB = (target * 1000 - newTextR * 299 - newTextG * 587) / 114;
+  }
+
+  return color__WEBPACK_IMPORTED_MODULE_0___default.a.rgb(newTextR, newTextG, newTextB);
+};
+
+/***/ }),
+
 /***/ "./src/modules/config.js":
 /*!*******************************!*\
   !*** ./src/modules/config.js ***!
@@ -2695,6 +2903,7 @@ __webpack_require__.r(__webpack_exports__);
  * @attr {string}       mode                  强制指定的颜色模式(dark|light), 指定了就不监听系统颜色
  * @attr {Object}       whitelist             节点白名单
  * @attr {string Array} whitelist.tagName     标签名列表
+ * @attr {string Array} whitelist.attribute   属性列表
  * @attr {boolean}      needJudgeFirstPage    是否需要判断首屏
  * @attr {boolean}      delayBgJudge          是否延迟背景判断
  * @attr {DOM Object}   container             延迟运行js时使用的容器
@@ -2708,28 +2917,46 @@ __webpack_require__.r(__webpack_exports__);
  * @param {string} type 要处理的节点
  * @param {Object} opt  传入的配置对象
  * @param {string} key  配置名
+ * @return void
  *
  */
+// 常量
 
 var config = {
   hasInit: false,
+  // 是否初始化过配置
   // hooks
   begin: null,
+  // 开始处理时触发的回调
   showFirstPage: null,
+  // 首屏处理完成时触发的回调
   error: null,
+  // 发生error时触发的回调
   mode: '',
+  // 强制指定的颜色模式(dark|light), 指定了就不监听系统颜色
   whitelist: {
+    // 节点白名单
     tagName: ['MPCPS', 'IFRAME'],
-    attribute: []
+    // 标签名列表
+    attribute: [] // 属性列表
+
   },
   needJudgeFirstPage: true,
+  // 是否需要判断首屏
   delayBgJudge: false,
+  // 是否延迟背景判断
   container: null,
+  // 延迟运行js时使用的容器
   cssSelectorsPrefix: '',
+  // css选择器前缀
   defaultLightTextColor: _constant__WEBPACK_IMPORTED_MODULE_0__["DEFAULT_LIGHT_TEXTCOLOR"],
+  // 非Dark Mode下字体颜色
   defaultLightBgColor: _constant__WEBPACK_IMPORTED_MODULE_0__["DEFAULT_LIGHT_BGCOLOR"],
+  // 非Dark Mode下背景颜色
   defaultDarkTextColor: _constant__WEBPACK_IMPORTED_MODULE_0__["DEFAULT_DARK_TEXTCOLOR"],
+  // Dark Mode下字体颜色
   defaultDarkBgColor: _constant__WEBPACK_IMPORTED_MODULE_0__["DEFAULT_DARK_BGCOLOR"],
+  // Dark Mode下背景颜色
   // 设置配置
   set: function set(type, opt, key) {
     var value = opt[key];
@@ -2763,7 +2990,7 @@ var config = {
 /*!*********************************!*\
   !*** ./src/modules/constant.js ***!
   \*********************************/
-/*! exports provided: MEDIA_QUERY, CLASS_PREFIX, DM_CLASSNAME_REGEXP, HTML_CLASS, COLORATTR, BGCOLORATTR, ORIGINAL_COLORATTR, ORIGINAL_BGCOLORATTR, BGIMAGEATTR, BG_COLOR_DELIMITER, DEFAULT_LIGHT_TEXTCOLOR, DEFAULT_LIGHT_BGCOLOR, DEFAULT_DARK_TEXTCOLOR, DEFAULT_DARK_BGCOLOR, WHITE_LIKE_COLOR_BRIGHTNESS, MAX_LIMIT_BGCOLOR_BRIGHTNESS, MIN_LIMIT_OFFSET_BRIGHTNESS, HIGH_BGCOLOR_BRIGHTNESS, HIGH_BLACKWHITE_HSL_BRIGHTNESS, LOW_BLACKWHITE_HSL_BRIGHTNESS, IGNORE_ALPHA, PAGE_HEIGHT, CSS_PROP_SERIES, CSS_PROP_LIST, TABLE_NAME, IMPORTANT_REGEXP, SEMICOLON_PLACEHOLDER, SEMICOLON_PLACEHOLDER_REGEXP */
+/*! exports provided: MEDIA_QUERY, CLASS_PREFIX, DM_CLASSNAME_REGEXP, HTML_CLASS, COLORATTR, BGCOLORATTR, ORIGINAL_COLORATTR, ORIGINAL_BGCOLORATTR, BGIMAGEATTR, BG_COLOR_DELIMITER, DEFAULT_LIGHT_TEXTCOLOR, DEFAULT_LIGHT_BGCOLOR, DEFAULT_DARK_TEXTCOLOR, DEFAULT_DARK_BGCOLOR, WHITE_LIKE_COLOR_BRIGHTNESS, MAX_LIMIT_BGCOLOR_BRIGHTNESS, MIN_LIMIT_OFFSET_BRIGHTNESS, HIGH_BGCOLOR_BRIGHTNESS, HIGH_BLACKWHITE_HSL_BRIGHTNESS, LOW_BLACKWHITE_HSL_BRIGHTNESS, IGNORE_ALPHA, PAGE_HEIGHT, CSS_PROP_SERIES, CSS_PROP_LIST, TABLE_NAME, IMPORTANT_REGEXP, SEMICOLON_PLACEHOLDER, SEMICOLON_PLACEHOLDER_REGEXP, COLOR_REGEXP, COLOR_REGEXP_GLOBAL */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2796,6 +3023,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "IMPORTANT_REGEXP", function() { return IMPORTANT_REGEXP; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SEMICOLON_PLACEHOLDER", function() { return SEMICOLON_PLACEHOLDER; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SEMICOLON_PLACEHOLDER_REGEXP", function() { return SEMICOLON_PLACEHOLDER_REGEXP; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "COLOR_REGEXP", function() { return COLOR_REGEXP; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "COLOR_REGEXP_GLOBAL", function() { return COLOR_REGEXP_GLOBAL; });
 /**
  * @name 常量
  *
@@ -2866,6 +3095,8 @@ var IMPORTANT_REGEXP = / !important$/; // !important
 var SEMICOLON_PLACEHOLDER = '<$#_SEMICOLON_#$>'; // 分号占位符
 
 var SEMICOLON_PLACEHOLDER_REGEXP = /<\$#_SEMICOLON_#\$>/g;
+var COLOR_REGEXP = /\brgba?\([^)]+\)/i;
+var COLOR_REGEXP_GLOBAL = /\brgba?\([^)]+\)/ig;
 
 /***/ }),
 
@@ -2922,11 +3153,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * @method addCss 加入css
  * @param {string}  css              css样式
  * @param {boolean} isFirstPageStyle 是否首屏样式
+ * @return void
  *
  * @method writeStyle 写入样式表
  * @param {boolean} isFirstPageStyle 是否首屏样式
+ * @return void
  *
  */
+// 常量
  // Darkmode配置
 
 
@@ -2935,6 +3169,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var CssUtils = /*#__PURE__*/function () {
   // 首屏样式
   // 非首屏样式
+  // 是否运行过Dark Mode处理逻辑（写入过非首屏样式表则表示已运行过）
   function CssUtils() {
     _classCallCheck(this, CssUtils);
 
@@ -2943,25 +3178,29 @@ var CssUtils = /*#__PURE__*/function () {
     _defineProperty(this, "_otherPageStyle", '');
 
     _defineProperty(this, "isFinish", false);
-  }
+  } // 生成css键值对
+
 
   _createClass(CssUtils, [{
     key: "genCssKV",
     value: function genCssKV(key, val) {
       return "".concat(key, ": ").concat(val, " !important;");
-    }
+    } // 生成css，包括css选择器
+
   }, {
     key: "genCss",
     value: function genCss(className, cssKV) {
       return "".concat(_config__WEBPACK_IMPORTED_MODULE_1__["default"].mode === 'dark' ? "html.".concat(_constant__WEBPACK_IMPORTED_MODULE_0__["HTML_CLASS"], " ") : '').concat(_config__WEBPACK_IMPORTED_MODULE_1__["default"].cssSelectorsPrefix && "".concat(_config__WEBPACK_IMPORTED_MODULE_1__["default"].cssSelectorsPrefix, " "), ".").concat(className, "{").concat(cssKV, "}");
-    }
+    } // 加入css
+
   }, {
     key: "addCss",
     value: function addCss(css) {
       var isFirstPageStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       this[isFirstPageStyle ? '_firstPageStyle' : '_otherPageStyle'] += css;
       _global__WEBPACK_IMPORTED_MODULE_2__["plugins"].addCss(isFirstPageStyle);
-    }
+    } // 写入样式表
+
   }, {
     key: "writeStyle",
     value: function writeStyle() {
@@ -3075,28 +3314,32 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
  */
 // Darkmode配置
 
+ // 获取某个节点及它的所有子节点
 
 function getChildrenAndIt(el) {
   var _ref;
 
   return (_ref = [el]).concat.apply(_ref, _toConsumableArray(el.querySelectorAll('*')));
 }
-;
+; // 判断某个节点里是否包含文字节点
+
 function hasTextNode(el) {
-  var cnt = '';
-  Array.prototype.forEach.call(el.childNodes, function (child) {
-    if (child.nodeType === 3) {
-      cnt += child.nodeValue.replace(/\s/g, ''); // 不考虑空白字符
-    }
-  });
-  return cnt.length > 0;
+  // let cnt = '';
+  // Array.prototype.forEach.call(el.childNodes, child => {
+  //   if (child.nodeType === 3) {
+  //     cnt += child.nodeValue.replace(/\s/g, ''); // 不考虑空白字符
+  //   }
+  // });
+  // return cnt.length > 0;
+  return el.textContent.replace(/\s/g, '').length > 0;
 }
 ; // table的内部样式类对应的lm背景色
 
 var tableClassObj = {
   'ue-table-interlace-color-single': '#fcfcfc',
   'ue-table-interlace-color-double': '#f7faff'
-};
+}; // 判断table相关元素有没有指定class
+
 function hasTableClass(el) {
   var color = null;
   Array.prototype.some.call(el.classList, function (className) {
@@ -3120,21 +3363,26 @@ function hasTableClass(el) {
  *
  * @method set 设置要处理的节点列表
  * @param {DOM Object Array} els 要处理的节点列表
+ * @return void
  *
  * @method get 获取要处理的节点列表（包含延迟节点、容器节点等逻辑）
  * @return {DOM Object Array} 要处理的节点列表
  *
  * @method delay 将所有要处理的节点转移到延迟处理队列里
+ * @return void
  *
  * @method hasDelay 判断是否包含延迟处理的节点
  * @return {boolean} 判断结果
  *
  * @method addFirstPageNode 添加首屏节点
  * @param {DOM Object} el 要添加的首屏节点
+ * @return void
  *
  * @method showFirstPageNodes 显示所有首屏节点
+ * @return void
  *
  * @method emptyFirstPageNodes 清空记录的首屏节点
+ * @return void
  *
  */
 
@@ -3153,19 +3401,22 @@ var DomUtils = /*#__PURE__*/function () {
     _defineProperty(this, "_delayEls", []);
 
     _defineProperty(this, "showFirstPage", false);
-  }
+  } // 要处理的节点列表长度
+
 
   _createClass(DomUtils, [{
     key: "length",
     get: function get() {
       return this._els.length;
-    }
+    } // 设置要处理的节点列表
+
   }, {
     key: "set",
     value: function set() {
       var els = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       this._els = els;
-    }
+    } // 获取要处理的节点列表（包含延迟节点、容器节点等逻辑）
+
   }, {
     key: "get",
     value: function get() {
@@ -3188,7 +3439,8 @@ var DomUtils = /*#__PURE__*/function () {
       }
 
       return res;
-    }
+    } // 将所有要处理的节点转移到延迟处理队列里
+
   }, {
     key: "delay",
     value: function delay() {
@@ -3199,19 +3451,22 @@ var DomUtils = /*#__PURE__*/function () {
       }); // 转移到延迟处理的节点里
 
       this._els = []; // 转移后清空列表
-    }
+    } // 判断是否包含延迟处理的节点
+
   }, {
     key: "hasDelay",
     value: function hasDelay() {
       if (this._els.length) return false; // 有节点，即不含延迟处理的节点
 
       return this._delayEls.length > 0 || _config__WEBPACK_IMPORTED_MODULE_0__["default"].container !== null; // 否则需要判断延迟节点的列表和容器
-    }
+    } // 添加首屏节点
+
   }, {
     key: "addFirstPageNode",
     value: function addFirstPageNode(el) {
       this._firstPageEls.push(el);
-    }
+    } // 显示所有首屏节点
+
   }, {
     key: "showFirstPageNodes",
     value: function showFirstPageNodes() {
@@ -3221,7 +3476,8 @@ var DomUtils = /*#__PURE__*/function () {
 
 
       this.showFirstPage = true; // 记录为已显示首屏
-    }
+    } // 清空记录的首屏节点
+
   }, {
     key: "emptyFirstPageNodes",
     value: function emptyFirstPageNodes() {
@@ -3261,6 +3517,7 @@ __webpack_require__.r(__webpack_exports__);
  * @name 全局作用域
  *
  */
+// 常量
  // 插件系统
 
 
@@ -3307,7 +3564,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
  *
  * @class Plugin
  *
- * @attr {number}  loopTimes  遍历次数（全部节点遍历结束算一次）
+ * @attr {number}  loopTimes  已遍历次数（全部节点遍历结束算一次）
  * @attr {boolean} isDarkmode 是否为Dark Mode
  *
  * @method addCss 添加样式
@@ -3325,18 +3582,21 @@ var cssNoMQ = [];
 var Plugin = /*#__PURE__*/function () {
   function Plugin() {
     _classCallCheck(this, Plugin);
-  }
+  } // 遍历次数（全部节点遍历结束算一次）
+
 
   _createClass(Plugin, [{
     key: "loopTimes",
     get: function get() {
       return _global__WEBPACK_IMPORTED_MODULE_0__["plugins"].loopTimes;
-    }
+    } // 是否为Dark Mode
+
   }, {
     key: "isDarkmode",
     get: function get() {
       return _global__WEBPACK_IMPORTED_MODULE_0__["sdk"].isDarkmode;
-    }
+    } // 添加样式
+
   }, {
     key: "addCss",
     value: function addCss(className, kvList) {
@@ -3357,6 +3617,7 @@ var Plugin = /*#__PURE__*/function () {
  * @class Plugins
  *
  * @attr {number} length             已挂载的插件数量
+ * @attr {number} loopTimes          已遍历次数（全部节点遍历结束算一次）
  * @attr {string} firstPageStyle     首屏样式
  * @attr {string} otherPageStyle     非首屏样式
  * @attr {string} firstPageStyleNoMQ 首屏样式（不需要加媒体查询）
@@ -3364,15 +3625,19 @@ var Plugin = /*#__PURE__*/function () {
  *
  * @method extend 挂载插件
  * @param {Function} plugin 插件构造函数
+ * @return void
  *
  * @method emit 执行插件钩子
  * @param {string} name 钩子名称
  * @param {Any}    args 钩子参数
+ * @return void
  *
  * @method addCss 写入插件样式
  * @param {boolean} isFirstPageStyle 是否首屏样式
+ * @return void
  *
  * @method resetCss 重置插件样式
+ * @return void
  *
  */
 
@@ -3380,7 +3645,7 @@ var Plugin = /*#__PURE__*/function () {
 var Plugins = /*#__PURE__*/function () {
   // 已挂载的插件列表
   // 已挂载的插件数量
-  // 已遍历次数
+  // 已遍历次数（全部节点遍历结束算一次）
   // 首屏样式
   // 非首屏样式
   // 首屏样式（不需要加媒体查询）
@@ -3401,7 +3666,8 @@ var Plugins = /*#__PURE__*/function () {
     _defineProperty(this, "firstPageStyleNoMQ", '');
 
     _defineProperty(this, "otherPageStyleNoMQ", '');
-  }
+  } // 挂载插件
+
 
   _createClass(Plugins, [{
     key: "extend",
@@ -3409,7 +3675,8 @@ var Plugins = /*#__PURE__*/function () {
       this._plugins.push(new (plugin(Plugin))());
 
       this.length++;
-    }
+    } // 执行插件钩子
+
   }, {
     key: "emit",
     value: function emit(name) {
@@ -3420,7 +3687,8 @@ var Plugins = /*#__PURE__*/function () {
       this._plugins.forEach(function (plugin) {
         typeof plugin[name] === 'function' && plugin[name].apply(plugin, args);
       });
-    }
+    } // 写入插件样式
+
   }, {
     key: "addCss",
     value: function addCss(isFirstPageStyle) {
@@ -3431,7 +3699,8 @@ var Plugins = /*#__PURE__*/function () {
         this.otherPageStyle += cssNeedMQ.join('');
         this.otherPageStyleNoMQ += cssNoMQ.join('');
       }
-    }
+    } // 重置插件样式
+
   }, {
     key: "resetCss",
     value: function resetCss() {
@@ -3460,8 +3729,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return SDK; });
 /* harmony import */ var color__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! color */ "./node_modules/color/index.js");
 /* harmony import */ var color__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(color__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var color_name__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! color-name */ "./node_modules/color-name/index.js");
-/* harmony import */ var color_name__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(color_name__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _color__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./color */ "./src/modules/color.js");
 /* harmony import */ var _constant__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./constant */ "./src/modules/constant.js");
 /* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./config */ "./src/modules/config.js");
 /* harmony import */ var _global__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./global */ "./src/modules/global.js");
@@ -3499,30 +3767,24 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  *
  * @class SDK
  *
+ * @attr {boolean} isDarkmode 当前是否需要运行Darkmode处理
+ *
+ * @method init 初始化
+ * @return void
+ *
  * @method convert 处理节点
  * @param {DOM Object} el 要处理的节点
  * @return {string} 处理后的css，包含css选择器
  *
+ * @method getContrast 获取两个颜色的对比度
+ * @param {string} colorStr1 颜色1
+ * @param {string} colorStr2 颜色2
+ * @return {number} 颜色对比度，取值范围为`[1, 21]`
+ *
  */
-// dependencies
-
-
-var ColorParser = function ColorParser(color) {
-  var res = null;
-
-  try {
-    res = color__WEBPACK_IMPORTED_MODULE_0___default()(color);
-  } catch (e) {
-    console.log("ignore the invalid color: `".concat(color, "`"));
-  }
-
-  return res;
-};
-
-
-color_name__WEBPACK_IMPORTED_MODULE_1___default.a.windowtext = [0, 0, 0]; // 补上这个colorName
+// 颜色操作相关API
 
-color_name__WEBPACK_IMPORTED_MODULE_1___default.a.transparent = [255, 255, 255, 0]; // 支持透明，暂定用白色透明度0来表示
+ // 常量
 
  // Darkmode配置
 
@@ -3530,103 +3792,6 @@ color_name__WEBPACK_IMPORTED_MODULE_1___default.a.transparent = [255, 255, 255,
  // 节点相关操作工具API
 
 
-var colorNameReg = new RegExp(Object.keys(color_name__WEBPACK_IMPORTED_MODULE_1___default.a).map(function (colorName) {
-  return "\\b".concat(colorName, "\\b");
-}).join('|'), 'ig'); // 生成正则表达式来匹配这些colorName
-
-var colorReg = /\brgba?\([^)]+\)/i;
-var colorRegGlobal = /\brgba?\([^)]+\)/ig;
-
-var removeImportant = function removeImportant(value) {
-  return value.replace(_constant__WEBPACK_IMPORTED_MODULE_2__["IMPORTANT_REGEXP"], '');
-}; // 清除!important
-
-
-var parseColor = function parseColor(value, parseTransparent) {
-  return removeImportant(value).replace(colorNameReg, function (match) {
-    // 处理颜色，包括清除!important和转换英文定义颜色
-    if (!parseTransparent && match === 'transparent') return match; // 如果不转换transparent，直接返回transparent
-
-    var color = color_name__WEBPACK_IMPORTED_MODULE_1___default.a[match.toLowerCase()];
-    return "".concat(color.length > 3 ? 'rgba' : 'rgb', "(").concat(color.toString(), ")");
-  });
-}; // 计算mix颜色
-
-
-var mixColor = function mixColor(colors) {
-  if (!colors || colors.length < 1) return '';
-  if (colors.length === 1) return colors[0];
-  var retColorStr = colors.shift();
-  var nextColorStr = colors.shift();
-
-  while (nextColorStr) {
-    var retColor = ColorParser(retColorStr);
-    var nextColor = ColorParser(nextColorStr);
-
-    if (!retColor && nextColor) {
-      // 如果当前色值非法，混入色值合法，则直接使用混入色值
-      retColorStr = nextColorStr;
-    } else if (!retColor && !nextColor) {
-      // 如果两个色值都非法，则使用下一批色值
-      retColorStr = colors.shift() || '';
-    } else if (retColor && nextColor) {
-      // 如果两个色值都合法，执行mix
-      retColorStr = retColor.mix(nextColor, nextColor.alpha());
-    } // 如果当前色值合法，混入色值非法，无需处理
-
-
-    nextColorStr = colors.shift();
-  }
-
-  return retColorStr;
-}; // 处理-webkit-fill-color和-webkit-text-stroke-color，返回处理后的色值，无则返回空字符串
-
-
-var parseWebkitFillColorAndStrokeColor = function parseWebkitFillColorAndStrokeColor(value) {
-  var newValue = parseColor(value);
-  return colorReg.test(newValue) ? newValue : '';
-}; // 计算感知亮度
-
-
-var getColorPerceivedBrightness = function getColorPerceivedBrightness(rgb) {
-  return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
-}; // 调整为指定感知亮度
-
-
-var adjustBrightnessByLimit = function adjustBrightnessByLimit(limitBright, rgb) {
-  var relativeBrightnessRatio = limitBright / getColorPerceivedBrightness(rgb);
-  var newTextR = Math.min(255, rgb[0] * relativeBrightnessRatio);
-  var newTextG = Math.min(255, rgb[1] * relativeBrightnessRatio);
-  var newTextB = Math.min(255, rgb[2] * relativeBrightnessRatio);
-
-  if (newTextG === 0 || newTextR === 255 || newTextB === 255) {
-    newTextG = (limitBright * 1000 - newTextR * 299 - newTextB * 114) / 587;
-  } else if (newTextR === 0) {
-    newTextR = (limitBright * 1000 - newTextG * 587 - newTextB * 114) / 299;
-  } else if (newTextB === 0 || newTextG === 255) {
-    newTextB = (limitBright * 1000 - newTextR * 299 - newTextG * 587) / 114;
-  }
-
-  return color__WEBPACK_IMPORTED_MODULE_0___default.a.rgb(newTextR, newTextG, newTextB);
-}; // 计算亮度，用作对比度计算
-
-
-var getLuminanace = function getLuminanace(rgb) {
-  var srgb = rgb.map(function (val) {
-    val /= 255;
-    return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
-  });
-  return srgb[0] * 0.2126 + srgb[1] * 0.7152 + srgb[2] * 0.0722;
-}; // 计算对比度 https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-procedure
-
-
-var _getContrast = function getContrast(rgb1, rgb2) {
-  var lum1 = getLuminanace(rgb1);
-  var lum2 = getLuminanace(rgb2); // 亮色 / 暗色
-
-  if (lum1 < lum2) return (lum2 + 0.05) / (lum1 + 0.05);
-  return (lum1 + 0.05) / (lum2 + 0.05);
-};
 
 var SDK = /*#__PURE__*/function () {
   // 索引值
@@ -3651,81 +3816,10 @@ var SDK = /*#__PURE__*/function () {
     _defineProperty(this, "_maxLimitOffsetBrightness", null);
 
     _defineProperty(this, "isDarkmode", false);
-  }
-
-  _createClass(SDK, [{
-    key: "_adjustTextBrightness",
-    value: function _adjustTextBrightness(textColor, bgColor) {
-      var bgColorRgb = bgColor.rgb().array();
-      var bgColorAlpha = bgColor.alpha();
-      var bgColorPerceivedBrightness = getColorPerceivedBrightness(bgColorRgb);
-      var bgColorWithOpacityPerceivedBrightness = bgColorPerceivedBrightness * bgColorAlpha + this._defaultDarkBgColorBrightness * (1 - bgColorAlpha);
-      var textColorRgb = textColor.rgb().array();
-      var textColorHSL = textColor.hsl().array();
-      var textColorAlpha = textColor.alpha();
-      var textPerceivedBrightness = getColorPerceivedBrightness(textColorRgb);
-      var offsetPerceivedBrightness = Math.abs(bgColorWithOpacityPerceivedBrightness - textPerceivedBrightness); // 用户设置为高亮字体颜色（接近白色亮度），不处理，保持高亮
-
-      if (textPerceivedBrightness >= _constant__WEBPACK_IMPORTED_MODULE_2__["WHITE_LIKE_COLOR_BRIGHTNESS"]) return textColor;
-
-      if (offsetPerceivedBrightness > this._maxLimitOffsetBrightness && bgColorWithOpacityPerceivedBrightness <= this._defaultDarkBgColorBrightness + 2) {
-        return adjustBrightnessByLimit(this._maxLimitOffsetBrightness + bgColorWithOpacityPerceivedBrightness, textColorRgb).alpha(textColorAlpha);
-      } // 如果感知亮度差大于阈值，无需调整
-
-
-      if (offsetPerceivedBrightness >= _constant__WEBPACK_IMPORTED_MODULE_2__["MIN_LIMIT_OFFSET_BRIGHTNESS"]) return textColor;
-
-      if (bgColorWithOpacityPerceivedBrightness >= _constant__WEBPACK_IMPORTED_MODULE_2__["HIGH_BGCOLOR_BRIGHTNESS"]) {
-        // 亮背景，调暗字体
-        if (textColorHSL[2] > 90 - _constant__WEBPACK_IMPORTED_MODULE_2__["HIGH_BLACKWHITE_HSL_BRIGHTNESS"]) {
-          // 优先调字体的亮度已带到降低感知亮度的目的
-          textColorHSL[2] = 90 - textColorHSL[2];
-          var tmpTextColor = color__WEBPACK_IMPORTED_MODULE_0___default.a.hsl.apply(color__WEBPACK_IMPORTED_MODULE_0___default.a, _toConsumableArray(textColorHSL)).alpha(textColorAlpha);
-          return this._adjustTextBrightness(tmpTextColor, bgColor);
-        }
+  } // 调整明度
 
-        return adjustBrightnessByLimit(Math.min(this._maxLimitOffsetBrightness, bgColorWithOpacityPerceivedBrightness - _constant__WEBPACK_IMPORTED_MODULE_2__["MIN_LIMIT_OFFSET_BRIGHTNESS"]), textColorRgb).alpha(textColorAlpha);
-      } else {
-        // 暗背景，调亮字体
-        if (textColorHSL[2] <= _constant__WEBPACK_IMPORTED_MODULE_2__["HIGH_BLACKWHITE_HSL_BRIGHTNESS"]) {
-          // 优先调字体的亮度已带到提高感知亮度的目的
-          textColorHSL[2] = 90 - textColorHSL[2];
 
-          var _tmpTextColor = color__WEBPACK_IMPORTED_MODULE_0___default.a.hsl.apply(color__WEBPACK_IMPORTED_MODULE_0___default.a, _toConsumableArray(textColorHSL)).alpha(textColorAlpha);
-
-          return this._adjustTextBrightness(_tmpTextColor, bgColor);
-        }
-
-        return adjustBrightnessByLimit(Math.min(this._maxLimitOffsetBrightness, bgColorWithOpacityPerceivedBrightness + _constant__WEBPACK_IMPORTED_MODULE_2__["MIN_LIMIT_OFFSET_BRIGHTNESS"]), textColorRgb).alpha(textColorAlpha);
-      }
-    }
-  }, {
-    key: "_adjustBackgroundBrightness",
-    value: function _adjustBackgroundBrightness(bgColor) {
-      var bgColorRgb = bgColor.rgb().array();
-      var bgColorHsl = bgColor.hsl().array();
-      var bgColorAlpha = bgColor.alpha();
-      var bgColorPerceivedBrightness = getColorPerceivedBrightness(bgColorRgb);
-      var newColor = bgColor;
-
-      if (bgColorHsl[1] === 0 && bgColorHsl[2] > _constant__WEBPACK_IMPORTED_MODULE_2__["HIGH_BLACKWHITE_HSL_BRIGHTNESS"] || bgColorPerceivedBrightness > _constant__WEBPACK_IMPORTED_MODULE_2__["WHITE_LIKE_COLOR_BRIGHTNESS"]) {
-        // 饱和度为0（黑白灰色），亮度大于HIGH_BLACKWHITE_HSL_BRIGHTNESS或感知亮度大于WHITE_LIKE_COLOR_BRIGHTNESS（白色）时，做亮度取反处理
-        newColor = color__WEBPACK_IMPORTED_MODULE_0___default.a.hsl(0, 0, Math.min(100, 100 + this._defaultDarkBgColorHslBrightness - bgColorHsl[2]));
-      } else if (bgColorPerceivedBrightness > _constant__WEBPACK_IMPORTED_MODULE_2__["MAX_LIMIT_BGCOLOR_BRIGHTNESS"]) {
-        // 感知亮度大于MAX_LIMIT_BGCOLOR_BRIGHTNESS，将感知亮度设为MAX_LIMIT_BGCOLOR_BRIGHTNESS
-        newColor = adjustBrightnessByLimit(_constant__WEBPACK_IMPORTED_MODULE_2__["MAX_LIMIT_BGCOLOR_BRIGHTNESS"], bgColorRgb).alpha(bgColorAlpha); // const ratio = (MAX_LIMIT_BGCOLOR_BRIGHTNESS * 1000)
-        //   / (bgColorRgb[0] * 299 + bgColorRgb[1] * 587 + bgColorRgb[2] * 114);
-        // newColor = Color.rgb(bgColorRgb[0] * ratio, bgColorRgb[1] * ratio, bgColorRgb[2] * ratio);
-      } else if (bgColorHsl[2] < _constant__WEBPACK_IMPORTED_MODULE_2__["LOW_BLACKWHITE_HSL_BRIGHTNESS"]) {
-        // 亮度小于LOW_BLACKWHITE_HSL_BRIGHTNESS，将亮度设为LOW_BLACKWHITE_HSL_BRIGHTNESS，适当提高亮度
-        bgColorHsl[2] = _constant__WEBPACK_IMPORTED_MODULE_2__["LOW_BLACKWHITE_HSL_BRIGHTNESS"];
-        newColor = color__WEBPACK_IMPORTED_MODULE_0___default.a.hsl.apply(color__WEBPACK_IMPORTED_MODULE_0___default.a, _toConsumableArray(bgColorHsl));
-      }
-
-      return newColor.alpha(bgColorAlpha).rgb();
-    } // 调整明度
-
-  }, {
+  _createClass(SDK, [{
     key: "_adjustBrightness",
     value: function _adjustBrightness(color, el, options, isUpdate) {
       // 背景：
@@ -3754,7 +3848,7 @@ var SDK = /*#__PURE__*/function () {
 
         if (!options.hasInlineColor) {
           var parentTextColorStr = el[_constant__WEBPACK_IMPORTED_MODULE_2__["ORIGINAL_COLORATTR"]] || _config__WEBPACK_IMPORTED_MODULE_3__["default"].defaultLightTextColor;
-          var parentTextColor = ColorParser(parentTextColorStr);
+          var parentTextColor = Object(_color__WEBPACK_IMPORTED_MODULE_1__["ColorParser"])(parentTextColorStr);
 
           if (parentTextColor) {
             var ret = this._adjustBrightness(parentTextColor, el, {
@@ -3772,7 +3866,7 @@ var SDK = /*#__PURE__*/function () {
       } else if (options.isTextColor || options.isBorderColor) {
         // 字体色、边框色
         var parentElementBgColorStr = options.parentElementBgColorStr || options.isTextColor && el[_constant__WEBPACK_IMPORTED_MODULE_2__["BGCOLORATTR"]] || _config__WEBPACK_IMPORTED_MODULE_3__["default"].defaultDarkBgColor;
-        var parentElementBgColor = ColorParser(parentElementBgColorStr); // 无背景图片
+        var parentElementBgColor = Object(_color__WEBPACK_IMPORTED_MODULE_1__["ColorParser"])(parentElementBgColorStr); // 无背景图片
 
         if (parentElementBgColor && !el[_constant__WEBPACK_IMPORTED_MODULE_2__["BGIMAGEATTR"]]) {
           newColor = this._adjustTextBrightness(color, parentElementBgColor);
@@ -3794,6 +3888,105 @@ var SDK = /*#__PURE__*/function () {
         newColor: newColor && color.toString() !== newColor.toString() && newColor.alpha(alpha).rgb(),
         extStyle: extStyle
       };
+    } // 调整文本明度
+
+  }, {
+    key: "_adjustTextBrightness",
+    value: function _adjustTextBrightness(textColor, bgColor) {
+      var bgColorRgb = bgColor.rgb().array();
+      var bgColorAlpha = bgColor.alpha();
+      var bgColorPerceivedBrightness = Object(_color__WEBPACK_IMPORTED_MODULE_1__["getColorPerceivedBrightness"])(bgColorRgb);
+      var bgColorWithOpacityPerceivedBrightness = bgColorPerceivedBrightness * bgColorAlpha + this._defaultDarkBgColorBrightness * (1 - bgColorAlpha);
+      var textColorRgb = textColor.rgb().array();
+      var textColorHSL = textColor.hsl().array();
+      var textColorAlpha = textColor.alpha();
+      var textPerceivedBrightness = Object(_color__WEBPACK_IMPORTED_MODULE_1__["getColorPerceivedBrightness"])(textColorRgb);
+      var offsetPerceivedBrightness = Math.abs(bgColorWithOpacityPerceivedBrightness - textPerceivedBrightness); // 用户设置为高亮字体颜色（接近白色亮度），不处理，保持高亮
+
+      if (textPerceivedBrightness >= _constant__WEBPACK_IMPORTED_MODULE_2__["WHITE_LIKE_COLOR_BRIGHTNESS"]) return textColor;
+
+      if (offsetPerceivedBrightness > this._maxLimitOffsetBrightness && bgColorWithOpacityPerceivedBrightness <= this._defaultDarkBgColorBrightness + 2) {
+        return Object(_color__WEBPACK_IMPORTED_MODULE_1__["adjustBrightnessTo"])(this._maxLimitOffsetBrightness + bgColorWithOpacityPerceivedBrightness, textColorRgb).alpha(textColorAlpha);
+      } // 如果感知亮度差大于阈值，无需调整
+
+
+      if (offsetPerceivedBrightness >= _constant__WEBPACK_IMPORTED_MODULE_2__["MIN_LIMIT_OFFSET_BRIGHTNESS"]) return textColor;
+
+      if (bgColorWithOpacityPerceivedBrightness >= _constant__WEBPACK_IMPORTED_MODULE_2__["HIGH_BGCOLOR_BRIGHTNESS"]) {
+        // 亮背景，调暗字体
+        if (textColorHSL[2] > 90 - _constant__WEBPACK_IMPORTED_MODULE_2__["HIGH_BLACKWHITE_HSL_BRIGHTNESS"]) {
+          // 优先调字体的亮度已带到降低感知亮度的目的
+          textColorHSL[2] = 90 - textColorHSL[2];
+          var tmpTextColor = color__WEBPACK_IMPORTED_MODULE_0___default.a.hsl.apply(color__WEBPACK_IMPORTED_MODULE_0___default.a, _toConsumableArray(textColorHSL)).alpha(textColorAlpha);
+          return this._adjustTextBrightness(tmpTextColor, bgColor);
+        }
+
+        return Object(_color__WEBPACK_IMPORTED_MODULE_1__["adjustBrightnessTo"])(Math.min(this._maxLimitOffsetBrightness, bgColorWithOpacityPerceivedBrightness - _constant__WEBPACK_IMPORTED_MODULE_2__["MIN_LIMIT_OFFSET_BRIGHTNESS"]), textColorRgb).alpha(textColorAlpha);
+      } else {
+        // 暗背景，调亮字体
+        if (textColorHSL[2] <= _constant__WEBPACK_IMPORTED_MODULE_2__["HIGH_BLACKWHITE_HSL_BRIGHTNESS"]) {
+          // 优先调字体的亮度已带到提高感知亮度的目的
+          textColorHSL[2] = 90 - textColorHSL[2];
+
+          var _tmpTextColor = color__WEBPACK_IMPORTED_MODULE_0___default.a.hsl.apply(color__WEBPACK_IMPORTED_MODULE_0___default.a, _toConsumableArray(textColorHSL)).alpha(textColorAlpha);
+
+          return this._adjustTextBrightness(_tmpTextColor, bgColor);
+        }
+
+        return Object(_color__WEBPACK_IMPORTED_MODULE_1__["adjustBrightnessTo"])(Math.min(this._maxLimitOffsetBrightness, bgColorWithOpacityPerceivedBrightness + _constant__WEBPACK_IMPORTED_MODULE_2__["MIN_LIMIT_OFFSET_BRIGHTNESS"]), textColorRgb).alpha(textColorAlpha);
+      }
+    } // 调整背景明度
+
+  }, {
+    key: "_adjustBackgroundBrightness",
+    value: function _adjustBackgroundBrightness(bgColor) {
+      var bgColorRgb = bgColor.rgb().array();
+      var bgColorHsl = bgColor.hsl().array();
+      var bgColorAlpha = bgColor.alpha();
+      var bgColorPerceivedBrightness = Object(_color__WEBPACK_IMPORTED_MODULE_1__["getColorPerceivedBrightness"])(bgColorRgb);
+      var newColor = bgColor;
+
+      if (bgColorHsl[1] === 0 && bgColorHsl[2] > _constant__WEBPACK_IMPORTED_MODULE_2__["HIGH_BLACKWHITE_HSL_BRIGHTNESS"] || bgColorPerceivedBrightness > _constant__WEBPACK_IMPORTED_MODULE_2__["WHITE_LIKE_COLOR_BRIGHTNESS"]) {
+        // 饱和度为0（黑白灰色），亮度大于HIGH_BLACKWHITE_HSL_BRIGHTNESS或感知亮度大于WHITE_LIKE_COLOR_BRIGHTNESS（白色）时，做亮度取反处理
+        newColor = color__WEBPACK_IMPORTED_MODULE_0___default.a.hsl(0, 0, Math.min(100, 100 + this._defaultDarkBgColorHslBrightness - bgColorHsl[2]));
+      } else if (bgColorPerceivedBrightness > _constant__WEBPACK_IMPORTED_MODULE_2__["MAX_LIMIT_BGCOLOR_BRIGHTNESS"]) {
+        // 感知亮度大于MAX_LIMIT_BGCOLOR_BRIGHTNESS，将感知亮度设为MAX_LIMIT_BGCOLOR_BRIGHTNESS
+        newColor = Object(_color__WEBPACK_IMPORTED_MODULE_1__["adjustBrightnessTo"])(_constant__WEBPACK_IMPORTED_MODULE_2__["MAX_LIMIT_BGCOLOR_BRIGHTNESS"], bgColorRgb).alpha(bgColorAlpha); // const ratio = (MAX_LIMIT_BGCOLOR_BRIGHTNESS * 1000)
+        //   / (bgColorRgb[0] * 299 + bgColorRgb[1] * 587 + bgColorRgb[2] * 114);
+        // newColor = Color.rgb(bgColorRgb[0] * ratio, bgColorRgb[1] * ratio, bgColorRgb[2] * ratio);
+      } else if (bgColorHsl[2] < _constant__WEBPACK_IMPORTED_MODULE_2__["LOW_BLACKWHITE_HSL_BRIGHTNESS"]) {
+        // 亮度小于LOW_BLACKWHITE_HSL_BRIGHTNESS，将亮度设为LOW_BLACKWHITE_HSL_BRIGHTNESS，适当提高亮度
+        bgColorHsl[2] = _constant__WEBPACK_IMPORTED_MODULE_2__["LOW_BLACKWHITE_HSL_BRIGHTNESS"];
+        newColor = color__WEBPACK_IMPORTED_MODULE_0___default.a.hsl.apply(color__WEBPACK_IMPORTED_MODULE_0___default.a, _toConsumableArray(bgColorHsl));
+      }
+
+      return newColor.alpha(bgColorAlpha).rgb();
+    } // 叠加渐变色到背景色中，并更新背景色相关属性值以及文本颜色
+
+  }, {
+    key: "_updateBgWithGradient",
+    value: function _updateBgWithGradient(gradientColor, el, className, cssKVList, hasInlineColor, isUpdate) {
+      var newBgColor = Object(_color__WEBPACK_IMPORTED_MODULE_1__["mixColors"])([el[_constant__WEBPACK_IMPORTED_MODULE_2__["BGCOLORATTR"]] || _config__WEBPACK_IMPORTED_MODULE_3__["default"].defaultDarkBgColor, gradientColor], 'normal');
+      var newOriginalBgColor = (el[_constant__WEBPACK_IMPORTED_MODULE_2__["ORIGINAL_BGCOLORATTR"]] || _config__WEBPACK_IMPORTED_MODULE_3__["default"].defaultLightBgColor).split(_constant__WEBPACK_IMPORTED_MODULE_2__["BG_COLOR_DELIMITER"]).concat(gradientColor.toString()).join(_constant__WEBPACK_IMPORTED_MODULE_2__["BG_COLOR_DELIMITER"]);
+      Object(_domUtils__WEBPACK_IMPORTED_MODULE_5__["getChildrenAndIt"])(el).forEach(function (dom) {
+        dom[_constant__WEBPACK_IMPORTED_MODULE_2__["BGCOLORATTR"]] = newBgColor;
+        dom[_constant__WEBPACK_IMPORTED_MODULE_2__["ORIGINAL_BGCOLORATTR"]] = newOriginalBgColor;
+      });
+      var lastKV = cssKVList.slice(-1)[0];
+
+      if (lastKV[0] === 'color') {
+        var ret = this._adjustBrightness(Object(_color__WEBPACK_IMPORTED_MODULE_1__["ColorParser"])(Object(_color__WEBPACK_IMPORTED_MODULE_1__["parseColorName"])(lastKV[1])), el, {
+          isBgColor: false,
+          isTextShadow: false,
+          isTextColor: true,
+          isBorderColor: false,
+          hasInlineColor: hasInlineColor
+        }, isUpdate);
+
+        if (ret.newColor) return _global__WEBPACK_IMPORTED_MODULE_4__["cssUtils"].genCss(className, _global__WEBPACK_IMPORTED_MODULE_4__["cssUtils"].genCssKV('color', ret.newColor));
+      }
+
+      return '';
     }
   }, {
     key: "_try",
@@ -3804,18 +3997,20 @@ var SDK = /*#__PURE__*/function () {
         console.log('An error occurred when running the dark mode conversion algorithm\n', e);
         typeof _config__WEBPACK_IMPORTED_MODULE_3__["default"].error === 'function' && _config__WEBPACK_IMPORTED_MODULE_3__["default"].error(e);
       }
-    }
+    } // 初始化
+
   }, {
     key: "init",
     value: function init() {
-      this._defaultDarkTextColorRgb = ColorParser(_config__WEBPACK_IMPORTED_MODULE_3__["default"].defaultDarkTextColor).rgb().array();
-      this._defaultDarkBgColorRgb = ColorParser(_config__WEBPACK_IMPORTED_MODULE_3__["default"].defaultDarkBgColor).rgb().array();
-      this._defaultDarkBgColorHSL = ColorParser(_config__WEBPACK_IMPORTED_MODULE_3__["default"].defaultDarkBgColor).hsl().array();
-      this._defaultDarkTextColorBrightness = getColorPerceivedBrightness(this._defaultDarkTextColorRgb);
-      this._defaultDarkBgColorBrightness = getColorPerceivedBrightness(this._defaultDarkBgColorRgb);
+      this._defaultDarkTextColorRgb = Object(_color__WEBPACK_IMPORTED_MODULE_1__["ColorParser"])(_config__WEBPACK_IMPORTED_MODULE_3__["default"].defaultDarkTextColor).rgb().array();
+      this._defaultDarkBgColorRgb = Object(_color__WEBPACK_IMPORTED_MODULE_1__["ColorParser"])(_config__WEBPACK_IMPORTED_MODULE_3__["default"].defaultDarkBgColor).rgb().array();
+      this._defaultDarkBgColorHSL = Object(_color__WEBPACK_IMPORTED_MODULE_1__["ColorParser"])(_config__WEBPACK_IMPORTED_MODULE_3__["default"].defaultDarkBgColor).hsl().array();
+      this._defaultDarkTextColorBrightness = Object(_color__WEBPACK_IMPORTED_MODULE_1__["getColorPerceivedBrightness"])(this._defaultDarkTextColorRgb);
+      this._defaultDarkBgColorBrightness = Object(_color__WEBPACK_IMPORTED_MODULE_1__["getColorPerceivedBrightness"])(this._defaultDarkBgColorRgb);
       this._defaultDarkBgColorHslBrightness = this._defaultDarkBgColorHSL[2];
       this._maxLimitOffsetBrightness = this._defaultDarkTextColorBrightness - this._defaultDarkBgColorBrightness;
-    }
+    } // 处理节点
+
   }, {
     key: "convert",
     value: function convert(el, cssKVList, isUpdate) {
@@ -3906,7 +4101,7 @@ var SDK = /*#__PURE__*/function () {
 
             if (colorStr) {
               // 有色值（class对应的lm色值或者是bgcolor色值），则当做内联样式来处理
-              var color = ColorParser(colorStr);
+              var color = Object(_color__WEBPACK_IMPORTED_MODULE_1__["ColorParser"])(colorStr);
 
               if (color) {
                 cssKVList.unshift(['background-color', color.toString()]);
@@ -3923,7 +4118,7 @@ var SDK = /*#__PURE__*/function () {
 
             if (colorStr) {
               // 有色值，则当做内联样式来处理
-              var color = ColorParser(colorStr);
+              var color = Object(_color__WEBPACK_IMPORTED_MODULE_1__["ColorParser"])(colorStr);
 
               if (color) {
                 cssKVList.push(['color', color.toString()]);
@@ -3952,20 +4147,20 @@ var SDK = /*#__PURE__*/function () {
 
             switch (key) {
               case '-webkit-text-fill-color':
-                webkitFillColor = parseWebkitFillColorAndStrokeColor(value);
+                webkitFillColor = Object(_color__WEBPACK_IMPORTED_MODULE_1__["parseWebkitFillColorAndStrokeColor"])(value);
                 break;
 
               case '-webkit-text-stroke':
                 {
                   // 有-webkit-text-stroke时就不会有-webkit-text-stroke-color
                   var newValue = value.split(' ');
-                  newValue.length === 2 && (webkitStrokeColor = parseWebkitFillColorAndStrokeColor(newValue[1]));
+                  newValue.length === 2 && (webkitStrokeColor = Object(_color__WEBPACK_IMPORTED_MODULE_1__["parseWebkitFillColorAndStrokeColor"])(newValue[1]));
                   break;
                 }
 
               case '-webkit-text-stroke-color':
                 // 有-webkit-text-stroke-color时就不会有-webkit-text-stroke
-                webkitStrokeColor = parseWebkitFillColorAndStrokeColor(value);
+                webkitStrokeColor = Object(_color__WEBPACK_IMPORTED_MODULE_1__["parseWebkitFillColorAndStrokeColor"])(value);
                 break;
             }
 
@@ -4030,31 +4225,31 @@ var SDK = /*#__PURE__*/function () {
             var extStyle = '';
             var gradientMixColor; // 将英文定义颜色转换为rgb格式
 
-            value = parseColor(value, isGradient); // 渐变需要处理透明
+            value = Object(_color__WEBPACK_IMPORTED_MODULE_1__["parseColorName"])(value, isGradient); // 渐变需要处理透明
 
-            if (colorReg.test(value)) {
+            if (_constant__WEBPACK_IMPORTED_MODULE_2__["COLOR_REGEXP"].test(value)) {
               if (isGradient) {
                 // 把原渐变色取出来
-                var _matches = colorRegGlobal.exec(value);
+                var _matches = _constant__WEBPACK_IMPORTED_MODULE_2__["COLOR_REGEXP_GLOBAL"].exec(value);
 
                 while (_matches) {
                   gradientColors.push(_matches[0]);
-                  _matches = colorRegGlobal.exec(value);
+                  _matches = _constant__WEBPACK_IMPORTED_MODULE_2__["COLOR_REGEXP_GLOBAL"].exec(value);
                 } // 计算出一个mix颜色
 
 
-                gradientMixColor = mixColor(gradientColors);
+                gradientMixColor = Object(_color__WEBPACK_IMPORTED_MODULE_1__["mixColors"])(gradientColors);
               }
 
               var replaceIndex = 0;
-              value = value.replace(colorRegGlobal, function (match) {
+              value = value.replace(_constant__WEBPACK_IMPORTED_MODULE_2__["COLOR_REGEXP_GLOBAL"], function (match) {
                 // 渐变色统一改成mix纯色
                 if (isGradient) {
                   match = gradientMixColor;
                   cssChange = true;
                 }
 
-                var matchColor = ColorParser(match);
+                var matchColor = Object(_color__WEBPACK_IMPORTED_MODULE_1__["ColorParser"])(match);
 
                 if ((matchColor === null || matchColor === void 0 ? void 0 : matchColor.alpha()) >= _constant__WEBPACK_IMPORTED_MODULE_2__["IGNORE_ALPHA"]) {
                   // 忽略透明度低的色值
@@ -4070,7 +4265,7 @@ var SDK = /*#__PURE__*/function () {
                   var retColor = !hasInlineBackgroundImage && ret.newColor;
                   extStyle += ret.extStyle; // 对背景颜色和文字颜色做继承传递，用于文字亮度计算
 
-                  if (isBgColor || textColorIdx > 3) {
+                  if (isBgColor || textColorIdx >= 5) {
                     // 只处理color及之后的属性
                     var retColorStr = retColor ? retColor.toString() : match;
                     replaceIndex === 0 && Object(_domUtils__WEBPACK_IMPORTED_MODULE_5__["getChildrenAndIt"])(el).forEach(function (dom) {
@@ -4080,11 +4275,10 @@ var SDK = /*#__PURE__*/function () {
                       } else {
                         dom[_constant__WEBPACK_IMPORTED_MODULE_2__["COLORATTR"]] = retColorStr;
                         dom[_constant__WEBPACK_IMPORTED_MODULE_2__["ORIGINAL_COLORATTR"]] = match;
-                        dom.setAttribute(_constant__WEBPACK_IMPORTED_MODULE_2__["ORIGINAL_COLORATTR"], match);
                       } // 如果设置背景颜色，取消背景图片的影响
 
 
-                      var retColor = ColorParser(retColorStr);
+                      var retColor = Object(_color__WEBPACK_IMPORTED_MODULE_1__["ColorParser"])(retColorStr);
 
                       if (isBgColor && (retColor === null || retColor === void 0 ? void 0 : retColor.alpha()) >= _constant__WEBPACK_IMPORTED_MODULE_2__["IGNORE_ALPHA"] && dom[_constant__WEBPACK_IMPORTED_MODULE_2__["BGIMAGEATTR"]]) {
                         delete dom[_constant__WEBPACK_IMPORTED_MODULE_2__["BGIMAGEATTR"]];
@@ -4111,7 +4305,7 @@ var SDK = /*#__PURE__*/function () {
 
               if ((isBackgroundAttr || isBorderImageAttr) && /url\([^)]*\)/i.test(value)) {
                 cssChange = true;
-                var imgBgColor = mixColor((el[_constant__WEBPACK_IMPORTED_MODULE_2__["ORIGINAL_BGCOLORATTR"]] || _config__WEBPACK_IMPORTED_MODULE_3__["default"].defaultLightBgColor).split(_constant__WEBPACK_IMPORTED_MODULE_2__["BG_COLOR_DELIMITER"])); // const imgBgColor = el[BGCOLORATTR] || config.defaultLightBgColor;
+                var imgBgColor = Object(_color__WEBPACK_IMPORTED_MODULE_1__["mixColors"])((el[_constant__WEBPACK_IMPORTED_MODULE_2__["ORIGINAL_BGCOLORATTR"]] || _config__WEBPACK_IMPORTED_MODULE_3__["default"].defaultLightBgColor).split(_constant__WEBPACK_IMPORTED_MODULE_2__["BG_COLOR_DELIMITER"]), 'normal').toString(); // const imgBgColor = el[BGCOLORATTR] || config.defaultLightBgColor;
                 // 在背景图片下加一层原背景颜色：
                 // background-image使用多层背景(注意background-position也要多加一层 https://www.w3.org/TR/css-backgrounds-3/#layering)；
                 // border-image不支持多层背景，需要添加background-color
@@ -4177,15 +4371,26 @@ var SDK = /*#__PURE__*/function () {
             }
 
             if (cssChange) {
-              !isUpdate && _constant__WEBPACK_IMPORTED_MODULE_2__["IMPORTANT_REGEXP"].test(oldValue) && (styles[key] = removeImportant(oldValue)); // 清除inline style的!important
+              !isUpdate && _constant__WEBPACK_IMPORTED_MODULE_2__["IMPORTANT_REGEXP"].test(oldValue) && (styles[key] = oldValue.replace(_constant__WEBPACK_IMPORTED_MODULE_2__["IMPORTANT_REGEXP"], '')); // 清除inline style的!important
 
               if (isGradient) {
                 if (dmBgClassName) {
-                  // 如果是文字底图，则直接加样式
+                  // 如果是文字底图，则直接加样式（其实理论上不会走到这里）
                   bgCss += _global__WEBPACK_IMPORTED_MODULE_4__["cssUtils"].genCss(dmBgClassName, _global__WEBPACK_IMPORTED_MODULE_4__["cssUtils"].genCssKV(key, value));
+
+                  if (/^background/.test(key) && !/url\([^)]*\)/i.test(value)) {
+                    // 是无背景图的渐变，需要重新计算背景色
+                    css += _this._updateBgWithGradient(gradientMixColor, el, dmBgClassName, cssKVList, hasInlineColor, isUpdate);
+                  }
                 } else {
-                  // 否则背景图入栈
-                  _global__WEBPACK_IMPORTED_MODULE_4__["bgStack"].push(el, _global__WEBPACK_IMPORTED_MODULE_4__["cssUtils"].genCssKV(key, value)); // 渐变入栈
+                  // 否则渐变入栈
+                  _global__WEBPACK_IMPORTED_MODULE_4__["bgStack"].push(el, _global__WEBPACK_IMPORTED_MODULE_4__["cssUtils"].genCssKV(key, value), function (item) {
+                    // 渐变入栈
+                    if (/^background/.test(key) && !/url\([^)]*\)/i.test(value)) {
+                      // 是无背景图的渐变，需要重新计算背景色
+                      css += _this._updateBgWithGradient(gradientMixColor, el, item.className, cssKVList, hasInlineColor, isUpdate);
+                    }
+                  });
                 }
               } else {
                 cssKV += _global__WEBPACK_IMPORTED_MODULE_4__["cssUtils"].genCssKV(key, value);
@@ -4214,6 +4419,7 @@ var SDK = /*#__PURE__*/function () {
           } else {
             _global__WEBPACK_IMPORTED_MODULE_4__["bgStack"].contains(el, function (item) {
               css += _global__WEBPACK_IMPORTED_MODULE_4__["cssUtils"].genCss(item.className, item.cssKV);
+              typeof item.cb === 'function' && item.cb(item);
             });
           }
         }
@@ -4221,13 +4427,14 @@ var SDK = /*#__PURE__*/function () {
 
       _global__WEBPACK_IMPORTED_MODULE_4__["plugins"].emit("afterConvertNode".concat(isUpdate ? 'ByUpdateStyle' : ''), el);
       return css;
-    }
+    } // 获取两个颜色的对比度
+
   }, {
     key: "getContrast",
     value: function getContrast(colorStr1, colorStr2) {
-      var color1 = ColorParser(colorStr1);
-      var color2 = ColorParser(colorStr2);
-      return color1 && color2 ? _getContrast(color1.rgb().array(), color2.rgb().array()) : 0;
+      var color1 = Object(_color__WEBPACK_IMPORTED_MODULE_1__["ColorParser"])(colorStr1);
+      var color2 = Object(_color__WEBPACK_IMPORTED_MODULE_1__["ColorParser"])(colorStr2);
+      return color1 && color2 ? color1.contrast(color2) : 0;
     }
   }]);
 
@@ -4270,12 +4477,15 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  *
  * @method push 文本节点入队
  * @param {DOM Object} el 文本节点对象
+ * @return void
  *
  * @method forEach 遍历，遍历过的文本节点出队
  * @param {Function} callback 回调
+ * @return void
  *
  * @method update 更新队列的节点对象，主要解决前后节点不一致的问题
  * @param {DOM Object Array} els 要更新的节点对象列表
+ * @return void
  *
  */
 // Darkmode配置
@@ -4292,7 +4502,8 @@ var TextNodeQueue = /*#__PURE__*/function () {
     _defineProperty(this, "_idx", 0);
 
     this._prefix = prefix;
-  }
+  } // 文本节点入队
+
 
   _createClass(TextNodeQueue, [{
     key: "push",
@@ -4305,7 +4516,8 @@ var TextNodeQueue = /*#__PURE__*/function () {
         className: className,
         updated: !_config__WEBPACK_IMPORTED_MODULE_0__["default"].delayBgJudge
       });
-    }
+    } // 遍历，遍历过的文本节点出队
+
   }, {
     key: "forEach",
     value: function forEach(callback) {
@@ -4322,7 +4534,8 @@ var TextNodeQueue = /*#__PURE__*/function () {
         // 处理完之后删除部分节点
         this._queue.splice(idxStack.shift(), 1);
       }
-    }
+    } // 更新队列的节点对象，主要解决前后节点不一致的问题
+
   }, {
     key: "update",
     value: function update(els) {