feat(dark): enable setting customized dark mapping

src/canvas/Painter.ts

@@ -4,7 +4,7 @@ import Layer, { LayerConfig } from './Layer';
 import requestAnimationFrame from '../animation/requestAnimationFrame';
 import env from '../core/env';
 import Displayable from '../graphic/Displayable';
-import { WXCanvasRenderingContext } from '../core/types';
+import { Dictionary, WXCanvasRenderingContext } from '../core/types';
 import { GradientObject } from '../graphic/Gradient';
 import { ImagePatternObject } from '../graphic/Pattern';
 import Storage from '../Storage';
@@ -69,7 +69,8 @@ interface CanvasPainterOption {
  width?: number | string // Can be 10 / 10px / auto
  height?: number | string,
  useDirtyRect?: boolean,
- darkMode?: boolean
+ darkMode?: boolean,
+ darkColorMap?: Dictionary<string>
 }
 
 export default class CanvasPainter implements PainterBase {
@@ -277,7 +278,8 @@ export default class CanvasPainter implements PainterBase {
  inHover: true,
  viewWidth: this._width,
  viewHeight: this._height,
- darkMode: this._opts.darkMode
+ darkMode: this._opts.darkMode,
+ darkColorMap: this._opts.darkColorMap
  };
 
  let ctx;
@@ -420,7 +422,8 @@ export default class CanvasPainter implements PainterBase {
  prevEl: null,
  viewWidth: this._width,
  viewHeight: this._height,
- darkMode: this._opts.darkMode
+ darkMode: this._opts.darkMode,
+ darkColorMap: this._opts.darkColorMap
  };
 
  for (i = start; i < layer.__endIndex; i++) {
@@ -791,7 +794,7 @@ export default class CanvasPainter implements PainterBase {
  setBackgroundColor(backgroundColor: string | GradientObject | ImagePatternObject) {
  // TODO: fix when is gradient or pattern
  this._backgroundColor = this._opts.darkMode
- ? convertToDark(backgroundColor as string, 'fill')
+ ? convertToDark(backgroundColor as string, 'fill', this._opts.darkColorMap)
  : backgroundColor;
 
  util.each(this._layers, layer => {
@@ -958,7 +961,8 @@ export default class CanvasPainter implements PainterBase {
  inHover: false,
  viewWidth: this._width,
  viewHeight: this._height,
- darkMode: this._opts.darkMode
+ darkMode: this._opts.darkMode,
+ darkColorMap: this._opts.darkColorMap
  };
  const displayList = this.storage.getDisplayList(true);
  for (let i = 0, len = displayList.length; i < len; i++) {

src/canvas/graphic.ts

@@ -4,7 +4,7 @@ import { GradientObject } from '../graphic/Gradient';
 import { ImagePatternObject, InnerImagePatternObject } from '../graphic/Pattern';
 import { LinearGradientObject } from '../graphic/LinearGradient';
 import { RadialGradientObject } from '../graphic/RadialGradient';
-import { ZRCanvasRenderingContext } from '../core/types';
+import { Dictionary, ZRCanvasRenderingContext } from '../core/types';
 import { createOrUpdateImage, isImageReady } from '../graphic/helper/image';
 import { getCanvasGradient, isClipPathChanged } from './helper';
 import Path, { PathStyleProps } from '../graphic/Path';
@@ -441,7 +441,7 @@ function bindPathAndTextCommonStyle(
  styleChanged = true;
  }
  isValidStrokeFillStyle(style.fill) && (ctx.fillStyle = scope.darkMode
- ? convertToDark(style.fill, 'fill')
+ ? convertToDark(style.fill, 'fill', scope.darkColorMap)
  : style.fill
  );
  }
@@ -451,7 +451,7 @@ function bindPathAndTextCommonStyle(
  styleChanged = true;
  }
  isValidStrokeFillStyle(style.stroke) && (ctx.strokeStyle = scope.darkMode
- ? convertToDark(style.stroke, 'stroke')
+ ? convertToDark(style.stroke, 'stroke', scope.darkColorMap)
  : style.stroke
  );
  }
@@ -575,6 +575,7 @@ export type BrushScope = {
  lastDrawType?: number
 
  darkMode?: boolean
+ darkColorMap?: Dictionary<string>
 }
 
 // If path can be batched
@@ -611,12 +612,18 @@ function getStyle(el: Displayable, inHover?: boolean) {
  return inHover ? (el.__hoverStyle || el.style) : el.style;
 }
 
-export function brushSingle(ctx: CanvasRenderingContext2D, el: Displayable, darkMode: boolean) {
+export function brushSingle(
+ ctx: CanvasRenderingContext2D,
+ el: Displayable,
+ darkMode: boolean,
+ darkColorMap: Dictionary<string>
+) {
  const scope: BrushScope = {
  inHover: false,
  viewWidth: 0,
  viewHeight: 0,
- darkMode
+ darkMode,
+ darkColorMap
  };
  brush(ctx, el, scope, true);
 }
@@ -801,7 +808,8 @@ function brushIncremental(
  viewWidth: scope.viewWidth,
  viewHeight: scope.viewHeight,
  inHover: scope.inHover,
- darkMode: scope.darkMode
+ darkMode: scope.darkMode,
+ darkColorMap: scope.darkColorMap
  };
  let i;
  let len;

src/tool/color.ts

@@ -1,4 +1,5 @@
 import LRU from '../core/LRU';
+import { Dictionary } from '../core/types';
 import { extend, isGradientObject, isString, map } from '../core/util';
 import { GradientObject } from '../graphic/Gradient';
 
@@ -604,11 +605,21 @@ export type ColorAttributeType = 'fill' | 'stroke' | 'textFill';
  * @param lightColor color in light mode
  * @return color in dark mode, in rgba format
  */
-export function convertToDark(lightColor: string, type: ColorAttributeType): string {
+export function convertToDark(
+ lightColor: string,
+ type: ColorAttributeType,
+ darkColorMap: Dictionary<string>
+): string {
  let colorArr = parse(lightColor);
 
  if (colorArr) {
+ const colorStr = stringify(colorArr, 'rgba');
+ if (darkColorMap && darkColorMap[colorStr]) {
+ return darkColorMap[colorStr];
+ }
+
  colorArr = rgba2hsla(colorArr);
+
  switch (type) {
  // TODO: Probably using other color space to enhance the result.
  // Just a quick demo for now.
@@ -629,3 +640,18 @@ export function convertToDark(lightColor: string, type: ColorAttributeType): str
  return stringify(hsla2rgba(colorArr), 'rgba');
  }
 }
+
+export function normalizeColorMap(map: Dictionary<string>): Dictionary<string> {
+ if (!map) {
+ return {};
+ }
+
+ const normalizedMap: Dictionary<string> = {};
+ for (let key in map) {
+ const normalizedKey = stringify(parse(key), 'rgba');
+ if (normalizedKey) {
+ normalizedMap[normalizedKey] = stringify(parse(map[key]), 'rgba');
+ }
+ }
+ return normalizedMap;
+}

src/zrender.ts

@@ -22,7 +22,7 @@ import { GradientObject } from './graphic/Gradient';
 import { PatternObject } from './graphic/Pattern';
 import { EventCallback } from './core/Eventful';
 import Displayable from './graphic/Displayable';
-import { lum } from './tool/color';
+import { lum, normalizeColorMap } from './tool/color';
 import { DARK_MODE_THRESHOLD } from './config';
 import Group from './graphic/Group';
 
@@ -123,6 +123,9 @@ class ZRender {
  ? false
  : (opts.darkMode === 'dark' ? true : isDark);
 
+ opts.darkColorMap = normalizeColorMap(opts.darkColorMap);
+ console.log(opts.darkColorMap)
+
  const painter = new painterCtors[rendererType](dom, storage,
  {
  darkMode,
@@ -502,6 +505,7 @@ export interface ZRenderInitOpt {
  width?: number | string // 10, 10px, 'auto'
  height?: number | string
  darkMode?: 'auto' | 'light' | 'dark'
+ darkColorMap?: Dictionary<string>,
  useDirtyRect?: boolean
  useCoarsePointer?: 'auto' | boolean
  pointerSize?: number