diff --git a/src/core/echarts.ts b/src/core/echarts.ts
index eb827e2889..ad7cdf764a 100644
--- a/src/core/echarts.ts
+++ b/src/core/echarts.ts
@@ -108,7 +108,8 @@ import {
     ScaleDataValue,
     ZRElementEventName,
     ECElementEvent,
-    AnimationOption
+    AnimationOption,
+    Dictionary
 } from '../util/types';
 import Displayable from 'zrender/src/graphic/Displayable';
 import { seriesSymbolTask, dataSymbolTask } from '../visual/symbol';
@@ -324,6 +325,8 @@ export type EChartsInitOpts = {
     locale?: string | LocaleOption,
     renderer?: RendererType,
     devicePixelRatio?: number,
+    darkMode?: 'auto' | 'light' | 'dark',
+    darkColorMap?: Dictionary<string>,
     useDirtyRect?: boolean,
     useCoarsePointer?: boolean,
     pointerSize?: number,
@@ -412,6 +415,7 @@ class ECharts extends Eventful<ECEventDefinition> {
         this._dom = dom;
 
         let defaultRenderer = 'canvas';
+        let defaultDarkMode = 'auto' as const;
         let defaultCoarsePointer: 'auto' | boolean = 'auto';
         let defaultUseDirtyRect = false;
 
@@ -450,6 +454,8 @@ class ECharts extends Eventful<ECEventDefinition> {
             width: opts.width,
             height: opts.height,
             ssr: opts.ssr,
+            darkMode: opts.darkMode || defaultDarkMode,
+            darkColorMap: opts.darkColorMap,
             useDirtyRect: retrieve2(opts.useDirtyRect, defaultUseDirtyRect),
             useCoarsePointer: retrieve2(opts.useCoarsePointer, defaultCoarsePointer),
             pointerSize: opts.pointerSize
diff --git a/src/model/globalDefault.ts b/src/model/globalDefault.ts
index 304a550121..ff65aad254 100644
--- a/src/model/globalDefault.ts
+++ b/src/model/globalDefault.ts
@@ -30,7 +30,7 @@ const decalColor = 'rgba(0, 0, 0, 0.2)';
 export default {
 
     darkMode: 'auto',
-    // backgroundColor: 'rgba(0,0,0,0)',
+    backgroundColor: 'rgba(255,255,255,1)',
 
     colorBy: 'series',