diff --git a/package.json b/package.json
index e7136daa42..bbfa17058c 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "lib/component/*.js",
     "extension/**/*.js",
     "theme/*.js",
+    "theme/*.mjs",
     "i18n/*.js"
   ],
   "scripts": {
@@ -142,6 +143,16 @@
     "./index.simple.js": "./index.simple.js",
     "./index": "./index.js",
     "./index.js": "./index.js",
+    "./theme/v5": {
+      "import": "./theme/v5.mjs",
+      "require": "./theme/v5.js",
+      "default": "./theme/v5.js"
+    },
+    "./theme/v5.js": {
+      "import": "./theme/v5.mjs",
+      "require": "./theme/v5.js",
+      "default": "./theme/v5.js"
+    },
     "./theme/*": "./theme/*",
     "./i18n/*": "./i18n/*",
     "./types/dist/all": "./types/dist/all.d.ts",
diff --git a/theme/v5.mjs b/theme/v5.mjs
new file mode 100644
index 0000000000..de7c50708d
--- /dev/null
+++ b/theme/v5.mjs
@@ -0,0 +1,561 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { registerTheme } from '../core.js';
+
+// Keep this entry separate from v5.js so ESM consumers register the theme on
+// the same ECharts module instance as the application.
+
+var colorPalette = [
+    '#5470c6',
+    '#91cc75',
+    '#fac858',
+    '#ee6666',
+    '#73c0de',
+    '#3ba272',
+    '#fc8452',
+    '#9a60b4',
+    '#ea7ccc'
+];
+
+var axisCommon = function() {
+    return {
+        axisLine: {
+            lineStyle: {
+                color: '#6E7079'
+            }
+        },
+        axisLabel: {
+            color: null
+        },
+        splitLine: {
+            lineStyle: {
+                color: ['#E0E6F1']
+            }
+        },
+        splitArea: {
+            areaStyle: {
+                color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
+            }
+        },
+        minorSplitLine: {
+            color: '#F4F7FD'
+        }
+    };
+};
+
+var gradientColor = ['#f6efa6', '#d88273', '#bf444c'];
+
+registerTheme('v5', {
+    color: colorPalette,
+    gradientColor: gradientColor,
+
+    loading: {
+        textColor: 'red'
+    },
+
+    // Series
+
+    bar: {
+        defaultBarGap: '20%',
+        select: {
+            itemStyle: {
+                borderColor: '#212121',
+                borderWidth: 1
+            }
+        }
+    },
+
+    boxplot: {
+        emphasis: {
+            itemStyle: {
+                shadowColor: 'rgba(0,0,0,0.2)'
+            }
+        }
+    },
+
+    funnel: {
+        bottom: 60,
+        select: {
+            itemStyle: {
+                borderColor: '#212121',
+                borderWidth: 1
+            }
+        },
+        label: {
+            color: 'inherit'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [[1, '#E6EBF8']]
+            }
+        },
+        splitLine: {
+            lineStyle: {
+                color: '#63677A'
+            }
+        },
+        axisTick: {
+            lineStyle: {
+                color: '#63677A'
+            }
+        },
+        axisLabel: {
+            color: '#464646'
+        },
+        anchor: {
+            itemStyle: {
+                color: '#fff',
+                borderColor: '#5470c6'
+            }
+        },
+        title: {
+            color: '#464646',
+        },
+        detail: {
+            backgroundColor: 'rgba(0,0,0,0)',
+            borderColor: '#ccc',
+            color: '#464646'
+        }
+    },
+
+    graph: {
+        lineStyle: {
+            color: '#aaa'
+        },
+        select: {
+            itemStyle: {
+                borderColor: '#212121'
+            }
+        }
+    },
+
+    heatmap: {
+        select: {
+            itemStyle: {
+                borderColor: '#212121'
+            }
+        }
+    },
+
+    line: {
+        symbolSize: 4
+    },
+
+    pictorialBar: {
+        select: {
+            itemStyle: {
+                borderColor: '#212121',
+                borderWidth: 1
+            }
+        }
+    },
+
+    pie: {
+        radius: [0, '75%'],
+        labelLine: {
+            length2: 15
+        }
+    },
+
+    map: {
+        defaultItemStyleColor: '#eee',
+        label: {
+            color: '#000'
+        },
+        itemStyle: {
+            borderColor: '#444',
+            areaColor: '#eee'
+        },
+        emphasis: {
+            label: {
+                color: 'rgb(100,0,0)'
+            },
+            itemStyle: {
+                areaColor: 'rgba(255,215,0,0.8)'
+            }
+        },
+        select: {
+            label: {
+                color: 'rgb(100,0,0)'
+            },
+            itemStyle: {
+                color: 'rgba(255,215,0,0.8)'
+            }
+        },
+    },
+
+    sankey: {
+        lineStyle: {
+            color: '#314656'
+        },
+        select: {
+            itemStyle: {
+                borderColor: '#212121'
+            }
+        },
+    },
+
+    scatter: {
+        select: {
+            itemStyle: {
+                borderColor: '#212121'
+            }
+        }
+    },
+
+    tree: {
+        lineStyle: {
+            color: '#ccc'
+        }
+    },
+
+    treemap: {
+        left: 'center',
+        top: 'middle',
+        width: '80%',
+        height: '80%',
+        scaleLimit: {
+            max: null,
+            min: null
+        },
+        breadcrumb: {
+            top: 'bottom',
+            bottom: null,
+            itemStyle: {
+                color: 'rgba(0,0,0,0.7)', // '#5793f3',
+                textStyle: {
+                    color: '#fff'
+                }
+            },
+            emphasis: {
+                itemStyle: {
+                    color: 'rgba(0,0,0,0.9)' // '#5793f3',
+                }
+            }
+        }
+    },
+
+    // Components
+
+    timeAxis: axisCommon(),
+    logAxis: axisCommon(),
+    valueAxis: axisCommon(),
+    categoryAxis: (() => {
+        const axis = axisCommon();
+        axis.axisTick = {
+            show: true
+        };
+        return axis;
+    })(),
+
+    axisPointer: {
+        lineStyle: {
+            color: '#B9BEC9'
+        },
+        shadowStyle: {
+            color: 'rgba(210,219,238,0.2)'
+        },
+        label: {
+            backgroundColor: 'auto',
+            color: '#fff'
+        },
+        handle: {
+            color: '#333',
+            shadowBlur: 3,
+            shadowColor: '#aaa',
+            shadowOffsetX: 0,
+            shadowOffsetY: 2,
+        }
+    },
+
+    brush: {
+        brushStyle: {
+            color: 'rgba(210,219,238,0.3)',
+            borderColor: '#D2DBEE'
+        },
+        defaultOutOfBrushColor: '#ddd'
+    },
+
+    calendar: {
+        splitLine: {
+            lineStyle: {
+                color: '#000'
+            }
+        },
+        itemStyle: {
+            borderColor: '#ccc'
+        },
+        dayLabel: {
+            margin: '50%',
+            color: '#000'
+        },
+        monthLabel: {
+            margin: 5,
+            color: '#000'
+        },
+        yearLabel: {
+            margin: 30,
+            color: '#ccc'
+        }
+    },
+
+    dataZoom: {
+        borderColor: '#d2dbee',
+        borderRadius: 3,
+        backgroundColor: 'rgba(47,69,84,0)',
+        dataBackground: {
+            lineStyle: {
+                color: '#d2dbee',
+                width: 0.5
+            },
+            areaStyle: {
+                color: '#d2dbee',
+                opacity: 0.2
+            }
+        },
+        selectedDataBackground: {
+            lineStyle: {
+                color: '#8fb0f7',
+                width: 0.5
+            },
+            areaStyle: {
+                color: '#8fb0f7',
+                opacity: 0.2
+            }
+        },
+        handleStyle: {
+            color: '#fff',
+            borderColor: '#ACB8D1'
+        },
+        moveHandleStyle: {
+            color: '#D2DBEE',
+            opacity: 0.7
+        },
+        textStyle: {
+            color: '#6E7079'
+        },
+        brushStyle: {
+            color: 'rgba(135,175,274,0.15)'
+        },
+        emphasis: {
+            handleStyle: {
+                borderColor: '#8FB0F7'
+            },
+            moveHandleStyle: {
+                color: '#8FB0F7',
+                opacity: 0.7
+            }
+        },
+        defaultLocationEdgeGap: 7
+    },
+
+    geo: {
+        defaultItemStyleColor: '#eee',
+        label: {
+            color: '#000'
+        },
+        itemStyle: {
+            borderColor: '#444'
+        },
+        emphasis: {
+            label: {
+                color: 'rgb(100,0,0)'
+            },
+            itemStyle: {
+                color: 'rgba(255,215,0,0.8)'
+            }
+        },
+        select: {
+            label: {
+                color: 'rgb(100,0,0)'
+            },
+            itemStyle: {
+                color: 'rgba(255,215,0,0.8)'
+            }
+        }
+    },
+
+    grid: {
+        left: '10%',
+        top: 60,
+        bottom: 70,
+        borderColor: '#ccc'
+    },
+
+    legend: {
+        top: 0,
+        bottom: null,
+        backgroundColor: 'rgba(0,0,0,0)',
+        borderColor: '#ccc',
+        itemGap: 10,
+        inactiveColor: '#ccc',
+        inactiveBorderColor: '#ccc',
+        lineStyle: {
+            inactiveColor: '#ccc',
+        },
+        textStyle: {
+            color: '#333'
+        },
+        selectorLabel: {
+            color: '#666',
+            borderColor: '#666'
+        },
+        emphasis: {
+            selectorLabel: {
+                color: '#eee',
+                backgroundColor: '#666'
+            }
+        },
+        pageIconColor: '#2f4554',
+        pageIconInactiveColor: '#aaa',
+        pageTextStyle: {
+            color: '#333'
+        }
+    },
+
+    radar: (() => {
+        const radar = axisCommon();
+        radar.radius = '75%';
+        radar.axisName = {
+            color: '#bbb'
+        };
+        radar.axisLine.lineStyle.color = '#bbb';
+        return radar;
+    })(),
+
+    timeline: {
+        padding: 5,
+        borderColor: '#ccc',
+        lineStyle: {
+            color: '#DAE1F5'
+        },
+        label: {
+            color: '#A4B1D7'
+        },
+        itemStyle: {
+            color: '#A4B1D7',
+            borderWidth: 1
+        },
+        checkpointStyle: {
+            color: '#316bf3',
+            borderColor: '#fff',
+            borderWidth: 2,
+            shadowBlur: 2,
+            shadowOffsetX: 1,
+            shadowOffsetY: 1,
+            shadowColor: 'rgba(0, 0, 0, 0.3)',
+        },
+        controlStyle: {
+            playIcon: 'path://M31.6,53C17.5,53,6,41.5,6,27.4S17.5,1.8,31.6,1.8C45.7,1.8,57.2,13.3,57.2,27.4S45.7,53,31.6,53z M31.6,3.3 C18.4,3.3,7.5,14.1,7.5,27.4c0,13.3,10.8,24.1,24.1,24.1C44.9,51.5,55.7,40.7,55.7,27.4C55.7,14.1,44.9,3.3,31.6,3.3z M24.9,21.3 c0-2.2,1.6-3.1,3.5-2l10.5,6.1c1.899,1.1,1.899,2.9,0,4l-10.5,6.1c-1.9,1.1-3.5,0.2-3.5-2V21.3z', // jshint ignore:line
+            stopIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z', // jshint ignore:line
+            // eslint-disable-next-line max-len
+            nextIcon: 'M2,18.5A1.52,1.52,0,0,1,.92,18a1.49,1.49,0,0,1,0-2.12L7.81,9.36,1,3.11A1.5,1.5,0,1,1,3,.89l8,7.34a1.48,1.48,0,0,1,.49,1.09,1.51,1.51,0,0,1-.46,1.1L3,18.08A1.5,1.5,0,0,1,2,18.5Z', // jshint ignore:line
+            // eslint-disable-next-line max-len
+            prevIcon: 'M10,.5A1.52,1.52,0,0,1,11.08,1a1.49,1.49,0,0,1,0,2.12L4.19,9.64,11,15.89a1.5,1.5,0,1,1-2,2.22L1,10.77A1.48,1.48,0,0,1,.5,9.68,1.51,1.51,0,0,1,1,8.58L9,.92A1.5,1.5,0,0,1,10,.5Z', // jshint ignore:line
+            color: '#A4B1D7',
+            borderColor: '#A4B1D7',
+            borderWidth: 1
+        },
+        emphasis: {
+            label: {
+                color: '#6f778d'
+            },
+            itemStyle: {
+                color: '#316BF3'
+            },
+            controlStyle: {
+                color: '#316BF3',
+                borderColor: '#316BF3',
+                borderWidth: 2
+            }
+        },
+        progress: {
+            lineStyle: {
+                color: '#316BF3'
+            },
+            itemStyle: {
+                color: '#316BF3'
+            },
+            label: {
+                color: '#6f778d'
+            }
+        },
+    },
+
+    title: {
+        left: 0,
+        top: 0,
+        backgroundColor: 'rgba(0,0,0,0)',
+        borderColor: '#ccc',
+        textStyle: {
+            color: '#464646'
+        },
+        subtextStyle: {
+            color: '#6E7079'
+        }
+    },
+
+    toolbox: {
+        borderColor: '#ccc',
+        padding: 5,
+        itemGap: 8,
+        iconStyle: {
+            borderColor: '#666',
+        },
+        emphasis: {
+            iconStyle: {
+                borderColor: '#3E98C5'
+            }
+        }
+    },
+
+    tooltip: {
+        axisPointer: {
+            crossStyle: {
+                color: '#999'
+            }
+        },
+        textStyle: {
+            color: '#666'
+        },
+        backgroundColor: '#fff',
+        borderWidth: 1,
+        defaultBorderColor: '#fff'
+    },
+
+    visualMap: {
+        color: [gradientColor[2], gradientColor[1], gradientColor[0]],
+        inactive: ['rgba(0,0,0,0)'],
+        indicatorStyle: {
+            shadowColor: 'rgba(0,0,0,0.2)'
+        },
+        backgroundColor: 'rgba(0,0,0,0)',
+        borderColor: '#ccc',
+        contentColor: '#5793f3',
+        inactiveColor: '#aaa',
+        padding: 5,
+        textStyle: {
+            color: '#333'
+        }
+    }
+});