refactor(theme): make themes installable, provide self-registered lib, pure...

refactor(theme): make themes installable, provide self-registered lib, pure object lib and installable lib.
- Related apache/echarts#14351, apache/echarts#14352.

build/build-theme.js

+/*
+* 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.
+*/
+
+const fs = require('fs');
+const path = require('path');
+const fsExtra = require('fs-extra');
+const {
+    umdWrapperHead,
+    umdWrapperHeadWithECharts,
+    umdWrapperTail
+} = require('./umd-wrapper');
+
+async function buildThemeWrap() {
+    const targetDir = path.join(__dirname, '../theme');
+    const sourceDir = path.join(__dirname, '../src/theme');
+    const files = fs.readdirSync(sourceDir);
+    files.forEach(t => {
+        // only read dir
+        if(t.indexOf('.') !== -1) {
+            return;
+        }
+        const echartsRegister = `
+    echarts.registerTheme('${t}', themeObj);
+        `;
+        const pureExports = `
+    for (var key in themeObj) {
+        if (themeObj.hasOwnProperty(key)) {
+            exports[key] = themeObj[key];
+        }
+    }
+        `;
+        const code = fs.readFileSync(path.join(sourceDir, t + '/theme.ts'), 'utf-8');
+        const outputCode = code.replace(/export\s+?default/, 'var themeObj =')
+            .replace(/\/\*([\w\W]*?)\*\//, '')
+            // PENDING
+            .replace(/const /g, 'var ')
+            .replace(/ ?as any/g, '');
+
+        fsExtra.ensureDirSync(targetDir);
+
+        fs.writeFileSync(path.join(targetDir, t + '.js'), umdWrapperHeadWithECharts + outputCode + echartsRegister + umdWrapperTail, 'utf-8');
+        fs.writeFileSync(path.join(targetDir, t + '-obj.js'), umdWrapperHead + outputCode + pureExports + umdWrapperTail, 'utf-8');
+    })
+    console.log('theme build completed');
+}
+
+buildThemeWrap();
+
+module.exports = {
+    buildTheme: buildThemeWrap
+};

build/umd-wrapper.js

+const preamble = require('./preamble');
+
+exports.umdWrapperHead = `${preamble.js}
+/**
+* AUTO-GENERATED FILE. DO NOT MODIFY.
+*/
+(function (global, factory) {
+   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+   typeof define === 'function' && define.amd ? define(['exports'], factory) :
+   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory({}));
+ }(this, (function (exports) {
+`;
+
+exports.umdWrapperHeadWithECharts = `${preamble.js}
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('echarts/lib/echarts')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'echarts'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory({}, global.echarts));
+  }(this, (function (exports, echarts) {
+`;
+
+exports.umdWrapperTail = `
+})));`;

package.json

@@ -43,12 +43,13 @@
     "build": "node build/build.js --type all,common,simple --min",
     "build:esm": "node build/build.js --type all --min --format esm",
     "build:i18n": "node build/build-i18n.js",
+    "build:theme": "node build/build-theme.js",
     "build:lib": "node build/build.js --prepublish",
     "build:extension": "node build/build.js --type extension",
-    "dev:fast": "node build/build-i18n.js && node build/dev-fast.js",
+    "dev:fast": "npm run build:i18n && npm run build:theme && node build/dev-fast.js",
     "dev": "npm run dev:fast",
     "prepublish": "npm run build:lib",
-    "release": "npm run build:lib && npm run build:i18n && npm run build && npm run build:esm && npm run build:extension",
+    "release": "npm run build:lib && npm run build:i18n && npm run build:theme && npm run build && npm run build:esm && npm run build:extension",
     "help": "node build/build.js --help",
     "test:visual": "node test/runTest/server.js",
     "test:visual:report": "node test/runTest/genReport.js",

src/core/echarts.ts

@@ -66,8 +66,8 @@ import {throttle} from '../util/throttle';
 import {seriesStyleTask, dataStyleTask, dataColorPaletteTask} from '../visual/style';
 import loadingDefault from '../loading/default';
 import Scheduler from './Scheduler';
-import lightTheme from '../theme/light';
-import darkTheme from '../theme/dark';
+import lightTheme from '../theme/light/theme';
+import darkTheme from '../theme/dark/theme';
 import mapDataStorage from '../coord/geo/mapDataStorage';
 import {CoordinateSystemMaster, CoordinateSystemCreator, CoordinateSystemHostModel} from '../coord/CoordinateSystem';
 import { parseClassType } from '../util/clazz';

src/extension.ts

@@ -29,6 +29,7 @@ import {
     registerTransform,
     registerLoading,
     registerMap,
+    registerTheme,
     PRIORITY
 } from './core/echarts';
 import ComponentView from './view/Component';
@@ -54,6 +55,7 @@ const extensionRegisters = {
     registerTransform,
     registerLoading,
     registerMap,
+    registerTheme,
     PRIORITY,
 
     ComponentModel,

src/theme/azul.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './azul/install';
+
+use(install);

src/theme/azul/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import azulTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('azul', azulTheme);
+}

src/theme/azul/theme.ts

+/*
+ * 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.
+ */
+
+const colorPalette = [
+    '#f2385a',
+    '#f5a503',
+    '#4ad9d9',
+    '#f7879c',
+    '#c1d7a8',
+    '#4dffd2',
+    '#fccfd7',
+    '#d5f6f6'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#f2385a'
+        }
+    },
+
+    visualMap: {
+        color: ['#f2385a', '#f5a503']
+    },
+
+    toolbox: {
+        color: ['#f2385a', '#f2385a', '#f2385a', '#f2385a']
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        axisPointer: {
+            // Axis indicator, coordinate trigger effective
+            type: 'line', // The default is a straight line： 'line' | 'shadow'
+            lineStyle: {
+                // Straight line indicator style settings
+                color: '#f2385a',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#f2385a'
+            },
+            shadowStyle: {
+                // Shadow indicator style settings
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+        handleColor: '#f2385a' // Handle color
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#f2385a'
+        },
+        controlStyle: {
+            color: '#f2385a',
+            borderColor: '#f2385a'
+        }
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#f2385a',
+            color0: '#f5a503'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#f2385a',
+            color0: '#f5a503'
+        },
+        areaStyle: {
+            color: '#c1d7a8',
+            color0: '#4ad9d9'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#f2385a'
+        },
+        areaStyle: {
+            color: '#ddd'
+        },
+        label: {
+            color: '#c12e34'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#f2385a'
+        },
+        linkStyle: {
+            color: '#f2385a'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#f5a503'],
+                    [0.8, '#f2385a'],
+                    [1, '#c1d7a8']
+                ],
+                width: 8
+            }
+        }
+    }
+};

src/theme/bee-inspired.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './bee-inspired/install';
+
+use(install);

src/theme/bee-inspired/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import beeInspiredTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('bee-inspired', beeInspiredTheme);
+}

src/theme/bee-inspired/theme.ts

+/*
+ * 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.
+ */
+
+const colorPalette = [
+    '#001727',
+    '#805500',
+    '#ffff00',
+    '#ffd11a',
+    '#f2d71f',
+    '#f2be19',
+    '#f3a81a',
+    '#fff5cc'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#001727'
+        }
+    },
+
+    visualMap: {
+        color: ['#001727', '#805500']
+    },
+
+    toolbox: {
+        color: ['#001727', '#001727', '#001727', '#001727']
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        axisPointer: {
+            // Axis indicator, coordinate trigger effective
+            type: 'line', // The default is a straight line： 'line' | 'shadow'
+            lineStyle: {
+                // Straight line indicator style settings
+                color: '#001727',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#001727'
+            },
+            shadowStyle: {
+                // Shadow indicator style settings
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+        handleColor: '#001727' // Handle color
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#001727'
+        },
+        controlStyle: {
+            color: '#001727',
+            borderColor: '#001727'
+        }
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#f3a81a',
+            color0: '#ffff00'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#ffff00',
+            color0: '#f3a81a'
+        },
+        areaStyle: {
+            color: '#805500',
+            color0: '#ffff00'
+        }
+    },
+
+    chord: {
+        padding: 4,
+        itemStyle: {
+            color: '#f3a81a',
+            borderWidth: 1,
+            borderColor: 'rgba(128, 128, 128, 0.5)'
+        },
+        lineStyle: {
+            color: 'rgba(128, 128, 128, 0.5)'
+        },
+        areaStyle: {
+            color: '#805500'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#ffd11a'
+        },
+        areaStyle: {
+            color: '#f2be19'
+        },
+        label: {
+            color: '#ffd11a'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#001727'
+        },
+        linkStyle: {
+            color: '#001727'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#f2d71f'],
+                    [0.8, '#001727'],
+                    [1, '#ffff00']
+                ],
+                width: 8
+            }
+        }
+    }
+};

src/theme/blue.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './blue/install';
+
+use(install);

src/theme/blue/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import blueTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('blue', blueTheme);
+}

src/theme/blue/theme.ts

+/*
+ * 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.
+ */
+
+const colorPalette = [
+    '#1790cf',
+    '#1bb2d8',
+    '#99d2dd',
+    '#88b0bb',
+    '#1c7099',
+    '#038cc4',
+    '#75abd0',
+    '#afd6dd'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#1790cf'
+        }
+    },
+
+    visualMap: {
+        color: ['#1790cf', '#a2d4e6']
+    },
+
+    toolbox: {
+        color: ['#1790cf', '#1790cf', '#1790cf', '#1790cf']
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        axisPointer: {
+            // Axis indicator, coordinate trigger effective
+            type: 'line', // The default is a straight line： 'line' | 'shadow'
+            lineStyle: {
+                // Straight line indicator style settings
+                color: '#1790cf',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#1790cf'
+            },
+            shadowStyle: {
+                // Shadow indicator style settings
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(144,197,237,0.2)', // Fill the color
+        handleColor: '#1790cf' // Handle color
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#1790cfa'
+        },
+        controlStyle: {
+            color: '#1790cf',
+            borderColor: '#1790cf'
+        }
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#1bb2d8',
+            color0: '#99d2dd'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#1c7099',
+            color0: '#88b0bb'
+        },
+        areaStyle: {
+            color: '#1790cf',
+            color0: '#1bb2d8'
+        }
+    },
+
+    chord: {
+        padding: 4,
+        itemStyle: {
+            color: '#1bb2d8',
+            borderWidth: 1,
+            borderColor: 'rgba(128, 128, 128, 0.5)'
+        },
+        lineStyle: {
+            color: 'rgba(128, 128, 128, 0.5)'
+        },
+        areaStyle: {
+            color: '#1790cf'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#1bb2d8'
+        },
+        linkStyle: {
+            color: '#88b0bb'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#ddd'
+        },
+        areaStyle: {
+            color: '99d2dd'
+        },
+        label: {
+            color: '#c12e34'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#1bb2d8'],
+                    [0.8, '#1790cf'],
+                    [1, '#1c7099']
+                ],
+                width: 8
+            }
+        }
+    }
+};

src/theme/caravan.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './caravan/install';
+
+use(install);

src/theme/caravan/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import caravanTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('caravan', caravanTheme);
+}

src/theme/caravan/theme.ts

+/*
+ * 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.
+ */
+
+const colorPalette = [
+    '#fad089',
+    '#ff9c5b',
+    '#f5634a',
+    '#ed303c',
+    '#3b8183',
+    '#f7826e',
+    '#faac9e',
+    '#fcd5cf'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#fad089'
+        }
+    },
+
+    visualMap: {
+        color: ['#fad089', '#a2d4e6']
+    },
+
+    toolbox: {
+        color: ['#fad089', '#fad089', '#fad089', '#fad089']
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        axisPointer: {
+            // Axis indicator, coordinate trigger effective
+            type: 'line', // The default is a straight line： 'line' | 'shadow'
+            lineStyle: {
+                // Straight line indicator style settings
+                color: '#fad089',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#fad089'
+            },
+            shadowStyle: {
+                // Shadow indicator style settings
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(144,197,237,0.2)', // Fill the color
+        handleColor: '#fad089' // Handle color
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#fad089'
+        },
+        controlStyle: {
+            color: '#fad089',
+            borderColor: '#fad089'
+        }
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#ff9c5b',
+            color0: '#f5634a'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#3b8183',
+            color0: '#ed303c'
+        },
+        areaStyle: {
+            color: '#fad089',
+            color0: '#ed303c'
+        }
+    },
+
+    chord: {
+        padding: 4,
+        itemStyle: {
+            color: '#fad089',
+            borderWidth: 1,
+            borderColor: 'rgba(128, 128, 128, 0.5)'
+        },
+        lineStyle: {
+            color: 'rgba(128, 128, 128, 0.5)'
+        },
+        areaStyle: {
+            color: '#ed303c'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#ddd'
+        },
+        areaStyle: {
+            color: '#f5634a'
+        },
+        label: {
+            color: '#c12e34'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#f5634a'
+        },
+        linkStyle: {
+            color: '#fad089'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#ff9c5b'],
+                    [0.8, '#fad089'],
+                    [1, '#3b8183']
+                ],
+                width: 8
+            }
+        }
+    }
+};

src/theme/carp.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './carp/install';
+
+use(install);

src/theme/carp/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import carpTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('carp', carpTheme);
+}

src/theme/carp/theme.ts

+/*
+ * 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.
+ */
+
+const colorPalette = [
+    '#f0d8A8',
+    '#3d1c00',
+    '#86b8b1',
+    '#f2d694',
+    '#fa2a00',
+    '#ff8066',
+    '#ffd5cc',
+    '#f9edd2'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#f0d8A8'
+        }
+    },
+
+    visualMap: {
+        color: ['#f0d8A8', '#3d1c00']
+    },
+
+    toolbox: {
+        color: ['#f0d8A8', '#f0d8A8', '#f0d8A8', '#f0d8A8']
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        axisPointer: {
+            // Axis indicator, coordinate trigger effective
+            type: 'line', // The default is a straight line： 'line' | 'shadow'
+            lineStyle: {
+                // Straight line indicator style settings
+                color: '#f0d8A8',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#f0d8A8'
+            },
+            shadowStyle: {
+                // Shadow indicator style settings
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+        handleColor: '#f0d8A8' // Handle color
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#f0dba8'
+        },
+        controlStyle: {
+            color: '#f0dba8',
+            borderColor: '#f0dba8'
+        }
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#3d1c00',
+            color0: '#86b8b1'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#fa2a00',
+            color0: '#f2d694'
+        },
+        areaStyle: {
+            color: '#f0d8A8',
+            color0: '#86b8b1'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#ddd'
+        },
+        areaStyle: {
+            color: '#86b8b1'
+        },
+        label: {
+            color: '#c12e34'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#3d1c00'
+        },
+        linkStyle: {
+            color: '#f0d8A8'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#3d1c00'],
+                    [0.8, '#f0d8A8'],
+                    [1, '#fa2a00']
+                ],
+                width: 8
+            }
+        }
+    }
+};

src/theme/cool.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './cool/install';
+
+use(install);

src/theme/cool/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import coolTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('cool', coolTheme);
+}

src/theme/cool/theme.ts

+/*
+ * 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.
+ */
+
+const colorPalette = [
+    '#b21ab4',
+    '#6f0099',
+    '#2a2073',
+    '#0b5ea8',
+    '#17aecc',
+    '#b3b3ff',
+    '#eb99ff',
+    '#fae6ff',
+    '#e6f2ff',
+    '#eeeeee'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#00aecd'
+        }
+    },
+
+    visualMap: {
+        color: ['#00aecd', '#a2d4e6']
+    },
+
+    toolbox: {
+        color: ['#00aecd', '#00aecd', '#00aecd', '#00aecd']
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        axisPointer: {
+            // Axis indicator, coordinate trigger effective
+            type: 'line', // The default is a straight line： 'line' | 'shadow'
+            lineStyle: {
+                // Straight line indicator style settings
+                color: '#00aecd',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#00aecd'
+            },
+            shadowStyle: {
+                // Shadow indicator style settings
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(144,197,237,0.2)', // Fill the color
+        handleColor: '#00aecd' // Handle color
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#00aecd'
+        },
+        controlStyle: {
+            color: '#00aecd',
+            borderColor: '00aecd'
+        }
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#00aecd',
+            color0: '#a2d4e6'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#00aecd',
+            color0: '#a2d4e6'
+        },
+        areaStyle: {
+            color: '#b21ab4',
+            color0: '#0b5ea8'
+        }
+    },
+
+    chord: {
+        padding: 4,
+        itemStyle: {
+            color: '#b21ab4',
+            borderWidth: 1,
+            borderColor: 'rgba(128, 128, 128, 0.5)'
+        },
+        lineStyle: {
+            color: 'rgba(128, 128, 128, 0.5)'
+        },
+        areaStyle: {
+            color: '#0b5ea8'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#b21ab4'
+        },
+        linkStyle: {
+            color: '#2a2073'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#c12e34'
+        },
+        areaStyle: {
+            color: '#ddd'
+        },
+        label: {
+            color: '#c12e34'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#dddddd'],
+                    [0.8, '#00aecd'],
+                    [1, '#f5ccff']
+                ],
+                width: 8
+            }
+        }
+    }
+};

src/theme/dark-blue.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './dark-blue/install';
+
+use(install);

src/theme/dark-blue/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import darkBlueTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('dark-blue', darkBlueTheme);
+}

src/theme/dark-blue/theme.ts

+/*
+ * 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.
+ */
+
+const contrastColor = '#eee';
+const axisCommon = function () {
+    return {
+        axisLine: {
+            lineStyle: {
+                color: contrastColor
+            }
+        },
+        axisTick: {
+            lineStyle: {
+                color: contrastColor
+            }
+        },
+        axisLabel: {
+            color: contrastColor
+        },
+        splitLine: {
+            lineStyle: {
+                type: 'dashed',
+                color: '#aaa'
+            }
+        },
+        splitArea: {
+            areaStyle: {
+                color: contrastColor
+            }
+        }
+    };
+};
+
+const colorPalette = [
+    '#00305a',
+    '#004b8d',
+    '#0074d9',
+    '#4192d9',
+    '#7abaf2',
+    '#99cce6',
+    '#d6ebf5',
+    '#eeeeee'
+];
+
+const theme = {
+    color: colorPalette,
+    backgroundColor: '#333',
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: contrastColor
+            },
+            crossStyle: {
+                color: contrastColor
+            }
+        }
+    },
+    legend: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    title: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    toolbox: {
+        iconStyle: {
+            borderColor: contrastColor
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+        handleColor: '#00305a' // Handle color
+    },
+
+    timeline: {
+        itemStyle: {
+            color: colorPalette[1]
+        },
+        lineStyle: {
+            color: contrastColor
+        },
+        controlStyle: {
+            color: contrastColor,
+            borderColor: contrastColor
+        },
+        label: {
+            color: contrastColor
+        }
+    },
+
+    timeAxis: axisCommon(),
+    logAxis: axisCommon(),
+    valueAxis: axisCommon(),
+    categoryAxis: axisCommon(),
+
+    line: {
+        symbol: 'circle'
+    },
+    graph: {
+        color: colorPalette
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#004b8d'],
+                    [0.8, '#00305a'],
+                    [1, '#7abaf2']
+                ],
+                width: 8
+            }
+        }
+    }
+};
+
+(theme.categoryAxis.splitLine as any).show = false;
+
+export default theme;

src/theme/dark-bold.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './dark-bold/install';
+
+use(install);

src/theme/dark-bold/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import darkBoldTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('dark-bold', darkBoldTheme);
+}

src/theme/dark-bold/theme.ts

+/*
+ * 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.
+ */
+
+const contrastColor = '#eee';
+const axisCommon = function () {
+    return {
+        axisLine: {
+            lineStyle: {
+                color: contrastColor
+            }
+        },
+        axisTick: {
+            lineStyle: {
+                color: contrastColor
+            }
+        },
+        axisLabel: {
+            color: contrastColor
+        },
+        splitLine: {
+            lineStyle: {
+                type: 'dashed',
+                color: '#aaa'
+            }
+        },
+        splitArea: {
+            areaStyle: {
+                color: contrastColor
+            }
+        }
+    };
+};
+
+const colorPalette = [
+    '#458c6b',
+    '#f2da87',
+    '#d9a86c',
+    '#d94436',
+    '#a62424',
+    '#76bc9b',
+    '#cce6da',
+    '#eeeeee'
+];
+
+const theme = {
+    color: colorPalette,
+    backgroundColor: '#333',
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: contrastColor
+            },
+            crossStyle: {
+                color: contrastColor
+            }
+        }
+    },
+    legend: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    title: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    toolbox: {
+        iconStyle: {
+            borderColor: contrastColor
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+        handleColor: '#458c6b' // Handle color
+    },
+
+    timeline: {
+        itemStyle: {
+            color: colorPalette[1]
+        },
+        lineStyle: {
+            color: contrastColor
+        },
+        controlStyle: {
+            color: contrastColor,
+            borderColor: contrastColor
+        },
+        label: {
+            color: contrastColor
+        }
+    },
+
+    timeAxis: axisCommon(),
+    logAxis: axisCommon(),
+    valueAxis: axisCommon(),
+    categoryAxis: axisCommon(),
+
+    line: {
+        symbol: 'circle'
+    },
+    graph: {
+        color: colorPalette
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#f2da87'],
+                    [0.8, '#458c6b'],
+                    [1, '#a62424']
+                ],
+                width: 8
+            }
+        }
+    }
+};
+
+(theme.categoryAxis.splitLine as any).show = false;
+
+export default theme;

src/theme/dark-digerati.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './dark-digerati/install';
+
+use(install);

src/theme/dark-digerati/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import darkDigeratiTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('dark-digerati', darkDigeratiTheme);
+}

src/theme/dark-digerati/theme.ts

+/*
+ * 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.
+ */
+
+const contrastColor = '#eee';
+const axisCommon = function () {
+    return {
+        axisLine: {
+            lineStyle: {
+                color: contrastColor
+            }
+        },
+        axisTick: {
+            lineStyle: {
+                color: contrastColor
+            }
+        },
+        axisLabel: {
+            color: contrastColor
+        },
+        splitLine: {
+            lineStyle: {
+                type: 'dashed',
+                color: '#aaa'
+            }
+        },
+        splitArea: {
+            areaStyle: {
+                color: contrastColor
+            }
+        }
+    };
+};
+
+const colorPalette = [
+    '#52656b',
+    '#ff3b77',
+    '#a3cc00',
+    '#ffffff',
+    '#b8b89f',
+    '#ffccdb',
+    '#e5ff80',
+    '#f4f4f0'
+];
+
+const theme = {
+    color: colorPalette,
+    backgroundColor: '#333',
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: contrastColor
+            },
+            crossStyle: {
+                color: contrastColor
+            }
+        }
+    },
+    legend: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    title: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    toolbox: {
+        iconStyle: {
+            borderColor: contrastColor
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+        handleColor: '#52656b' // Handle color
+    },
+
+    timeline: {
+        itemStyle: {
+            color: colorPalette[1]
+        },
+        lineStyle: {
+            color: contrastColor
+        },
+        controlStyle: {
+            color: contrastColor,
+            borderColor: contrastColor
+        },
+        label: {
+            color: contrastColor
+        }
+    },
+
+    timeAxis: axisCommon(),
+    logAxis: axisCommon(),
+    valueAxis: axisCommon(),
+    categoryAxis: axisCommon(),
+
+    line: {
+        symbol: 'circle'
+    },
+    graph: {
+        color: colorPalette
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#ff3b77'],
+                    [0.8, '#52656b'],
+                    [1, '#b8b89f']
+                ],
+                width: 8
+            }
+        }
+    }
+};
+
+(theme.categoryAxis.splitLine as any).show = false;
+
+export default theme;

src/theme/dark-fresh-cut.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './dark-fresh-cut/install';
+
+use(install);

src/theme/dark-fresh-cut/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import darkFreshCutTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('dark-fresh-cut', darkFreshCutTheme);
+}

src/theme/dark-fresh-cut/theme.ts

+/*
+ * 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.
+ */
+
+const contrastColor = '#eee';
+const axisCommon = function () {
+    return {
+        axisLine: {
+            lineStyle: {
+                color: contrastColor
+            }
+        },
+        axisTick: {
+            lineStyle: {
+                color: contrastColor
+            }
+        },
+        axisLabel: {
+            color: contrastColor
+        },
+        splitLine: {
+            lineStyle: {
+                type: 'dashed',
+                color: '#aaa'
+            }
+        },
+        splitArea: {
+            areaStyle: {
+                color: contrastColor
+            }
+        }
+    };
+};
+
+const colorPalette = [
+    '#00a8c6',
+    '#40c0cb',
+    '#ebd3ad',
+    '#aee239',
+    '#8fbe00',
+    '#33e0ff',
+    '#b3f4ff',
+    '#e6ff99'
+];
+
+const theme = {
+    color: colorPalette,
+    backgroundColor: '#333',
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: contrastColor
+            },
+            crossStyle: {
+                color: contrastColor
+            }
+        }
+    },
+    legend: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    title: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    toolbox: {
+        iconStyle: {
+            borderColor: contrastColor
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+        handleColor: '#00a8c6' // Handle color
+    },
+
+    timeline: {
+        itemStyle: {
+            color: colorPalette[1]
+        },
+        lineStyle: {
+            color: contrastColor
+        },
+        controlStyle: {
+            color: contrastColor,
+            borderColor: contrastColor
+        },
+        label: {
+            color: contrastColor
+        }
+    },
+
+    timeAxis: axisCommon(),
+    logAxis: axisCommon(),
+    valueAxis: axisCommon(),
+    categoryAxis: axisCommon(),
+
+    line: {
+        symbol: 'circle'
+    },
+    graph: {
+        color: colorPalette
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#40c0cb'],
+                    [0.8, '#00a8c6'],
+                    [1, '#8fbe00']
+                ],
+                width: 8
+            }
+        }
+    }
+};
+
+(theme.categoryAxis.splitLine as any).show = false;
+
+export default theme;

src/theme/dark-mushroom.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './dark-mushroom/install';
+
+use(install);

src/theme/dark-mushroom/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import darkMushroomTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('dark-mushroom', darkMushroomTheme);
+}

src/theme/dark-mushroom/theme.ts

+/*
+* 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.
+*/
+
+const contrastColor = '#eee';
+const axisCommon = function () {
+    return {
+        axisLine: {
+            lineStyle: {
+                color: contrastColor
+            }
+        },
+        axisTick: {
+            lineStyle: {
+                color: contrastColor
+            }
+        },
+        axisLabel: {
+            color: contrastColor
+        },
+        splitLine: {
+            lineStyle: {
+                type: 'dashed',
+                color: '#aaa'
+            }
+        },
+        splitArea: {
+            areaStyle: {
+                color: contrastColor
+            }
+        }
+    };
+};
+
+const colorPalette = [
+    '#cc0e00',
+    '#ff1a0a',
+    '#ff8880',
+    '#ffc180',
+    '#ffc2b0',
+    '#ffffff',
+    '#ff8880',
+    '#ffe6e6'
+];
+const theme = {
+    color: colorPalette,
+    backgroundColor: '#333',
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: contrastColor
+            },
+            crossStyle: {
+                color: contrastColor
+            }
+        }
+    },
+    legend: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    title: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    toolbox: {
+        iconStyle: {
+            borderColor: contrastColor
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+        handleColor: '#cc0e00' // Handle color
+    },
+
+    timeline: {
+        itemStyle: {
+            color: colorPalette[1]
+        },
+        lineStyle: {
+            color: contrastColor
+        },
+        controlStyle: {
+            color: contrastColor,
+            borderColor: contrastColor
+        },
+        label: {
+            color: contrastColor
+        }
+    },
+
+    timeAxis: axisCommon(),
+    logAxis: axisCommon(),
+    valueAxis: axisCommon(),
+    categoryAxis: axisCommon(),
+
+    line: {
+        symbol: 'circle'
+    },
+    graph: {
+        color: colorPalette
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#ff1a0a'],
+                    [0.8, '#cc0e00'],
+                    [1, '#ffc2b0']
+                ],
+                width: 8
+            }
+        }
+    }
+};
+
+(theme.categoryAxis.splitLine as any).show = false;
+
+export default theme;

src/theme/dark/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import darkTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('dark', darkTheme);
+}

src/theme/dark.ts → src/theme/dark/theme.ts

@@ -17,6 +17,8 @@
 * under the License.
 */
 
+// registerd by default
+
 const contrastColor = '#B9B8CE';
 const backgroundColor = '#100C2A';
 const axisCommon = function () {

src/theme/eduardo.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './eduardo/install';
+
+use(install);

src/theme/eduardo/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import eduardoTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('eduardo', eduardoTheme);
+}

src/theme/eduardo/theme.ts

+/*
+ * 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.
+ */
+
+const colorPalette = [
+    '#59535e',
+    '#e7dcef',
+    '#f1baf3',
+    '#5d4970',
+    '#372049',
+    '#c0b2cd',
+    '#ffccff',
+    '#f2f0f5'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#59535e'
+        }
+    },
+
+    visualMap: {
+        color: ['#59535e', '#e7dcef']
+    },
+
+    toolbox: {
+        color: ['#59535e', '#59535e', '#59535e', '#59535e']
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        axisPointer: {
+            // Axis indicator, coordinate trigger effective
+            type: 'line', // The default is a straight line： 'line' | 'shadow'
+            lineStyle: {
+                // Straight line indicator style settings
+                color: '#59535e',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#59535e'
+            },
+            shadowStyle: {
+                // Shadow indicator style settings
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+        handleColor: '#59535e' // Handle color
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#59535e'
+        },
+        controlStyle: {
+            color: '#59535e',
+            borderColor: '#59535e'
+        }
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#e7dcef',
+            color0: '#f1baf3'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#372049',
+            color0: '#5d4970'
+        },
+        areaStyle: {
+            color: '#59535e',
+            color0: '#e7dcef'
+        }
+    },
+
+    chord: {
+        padding: 4,
+        itemStyle: {
+            color: '#59535e',
+            borderWidth: 1,
+            borderColor: 'rgba(128, 128, 128, 0.5)'
+        },
+        lineStyle: {
+            color: 'rgba(128, 128, 128, 0.5)'
+        },
+        areaStyle: {
+            color: '#e7dcef'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#ddd'
+        },
+        areaStyle: {
+            color: '#f1baf3'
+        },
+        label: {
+            color: '#c12e34'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#59535e'
+        },
+        linkStyle: {
+            color: '#59535e'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#e7dcef'],
+                    [0.8, '#59535e'],
+                    [1, '#372049']
+                ],
+                width: 8
+            }
+        }
+    }
+};

src/theme/forest.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './forest/install';
+
+use(install);

src/theme/forest/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import forestTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('forest', forestTheme);
+}

src/theme/forest/theme.ts

+/*
+ * 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.
+ */
+
+const colorPalette = [
+    '#313b23',
+    '#494f2b',
+    '#606233',
+    '#d6b77b',
+    '#0e0e0e',
+    '#076278',
+    '#808080',
+    '#e7d5b1'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#313b23'
+        }
+    },
+
+    visualMap: {
+        color: ['#313b23', '#494f2b']
+    },
+
+    toolbox: {
+        color: ['#313b23', '#313b23', '#313b23', '#313b23']
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        axisPointer: {
+            // Axis indicator, coordinate trigger effective
+            type: 'line', // The default is a straight line： 'line' | 'shadow'
+            lineStyle: {
+                // Straight line indicator style settings
+                color: '#313b23',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#313b23'
+            },
+            shadowStyle: {
+                // Shadow indicator style settings
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+        handleColor: '#313b23' // Handle color
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#313b23'
+        },
+        controlStyle: {
+            color: '#313b23',
+            borderColor: '#313b23'
+        }
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#494f2b',
+            color0: '#606233'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#0e0e0e',
+            color0: '#d6b77b'
+        },
+        areaStyle: {
+            color: '#494f2b',
+            color0: '#d6b77b'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#606233'
+        },
+        areaStyle: {
+            color: '#ddd'
+        },
+        label: {
+            color: '#c12e34'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#494f2b'
+        },
+        linkStyle: {
+            color: '#313b23'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#494f2b'],
+                    [0.8, '#313b23'],
+                    [1, '0e0e0e']
+                ],
+                width: 8
+            }
+        }
+    }
+};

src/theme/fresh-cut.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './fresh-cut/install';
+
+use(install);

src/theme/fresh-cut/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import freshCutTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('fresh-cut', freshCutTheme);
+}

src/theme/fresh-cut/theme.ts

+/*
+ * 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.
+ */
+
+const colorPalette = [
+    '#00a8c6',
+    '#40c0cb',
+    '#f0dec2',
+    '#aee239',
+    '#8fbe00',
+    '#33e0ff',
+    '#b3f4ff',
+    '#e6ff99'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#00a8c6'
+        }
+    },
+
+    visualMap: {
+        color: ['#00a8c6', '#a2d4e6']
+    },
+
+    toolbox: {
+        color: ['#00a8c6', '#00a8c6', '#00a8c6', '#00a8c6']
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        axisPointer: {
+            // Axis indicator, coordinate trigger effective
+            type: 'line', // The default is a straight line： 'line' | 'shadow'
+            lineStyle: {
+                // Straight line indicator style settings
+                color: '#00a8c6',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#00a8c6'
+            },
+            shadowStyle: {
+                // Shadow indicator style settings
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(144,197,237,0.2)', // Fill the color
+        handleColor: '#00a8c6' // Handle color
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#00a8c6'
+        },
+        controlStyle: {
+            color: '#00a8c6',
+            borderColor: '#00a8c6'
+        }
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#40c0cb',
+            color0: '#f0dec2'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#8fbe00',
+            color0: '#aee239'
+        },
+        areaStyle: {
+            color: '#00a8c6',
+            color0: '#aee239'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#ddd'
+        },
+        areaStyle: {
+            color: '#f0dec2'
+        },
+        label: {
+            color: '#c12e34'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#f0dec2'
+        },
+        linkStyle: {
+            color: '#00a8c6'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#40c0cb'],
+                    [0.8, '#00a8c6'],
+                    [1, '#8fbe00']
+                ],
+                width: 8
+            }
+        }
+    }
+};

src/theme/fruit.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './fruit/install';
+
+use(install);

src/theme/fruit/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import fruitTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('fruit', fruitTheme);
+}

src/theme/fruit/theme.ts

+/*
+ * 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.
+ */
+
+const colorPalette = [
+    '#ffcb6a',
+    '#ffa850',
+    '#ffe2c4',
+    '#e5834e',
+    '#ffb081',
+    '#f7826e',
+    '#faac9e',
+    '#fcd5cf'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#ffcb6a'
+        }
+    },
+
+    visualMap: {
+        color: ['#ffcb6a', '#ffa850']
+    },
+
+    toolbox: {
+        color: ['#ffcb6a', '#ffcb6a', '#ffcb6a', '#ffcb6a']
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        axisPointer: {
+            // Axis indicator, coordinate trigger effective
+            type: 'line', // The default is a straight line： 'line' | 'shadow'
+            lineStyle: {
+                // Straight line indicator style settings
+                color: '#ffcb6a',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#ffcb6a'
+            },
+            shadowStyle: {
+                // Shadow indicator style settings
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+        handleColor: '#ffcb6a' // Handle color
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#ffcb6a'
+        },
+        controlStyle: {
+            color: '#ffcb6a',
+            borderColor: '#ffcb6a'
+        }
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#ffa850',
+            color0: '#ffe2c4'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#ffb081',
+            color0: '#e5834e'
+        },
+        areaStyle: {
+            color: '#e5834e',
+            color0: '#fcd5cf'
+        }
+    },
+
+    chord: {
+        padding: 4,
+        itemStyle: {
+            color: '#fcd5cf',
+            borderWidth: 1,
+            borderColor: 'rgba(128, 128, 128, 0.5)'
+        },
+        lineStyle: {
+            color: 'rgba(128, 128, 128, 0.5)'
+        },
+        areaStyle: {
+            color: '#e5834e'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#ffe2c4'
+        },
+        areaStyle: {
+            color: '#ddd'
+        },
+        label: {
+            color: '#c12e34'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#f2385a'
+        },
+        linkStyle: {
+            color: '#ffcb6a'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#ffa850'],
+                    [0.8, '#ffcb6a'],
+                    [1, '#ffb081']
+                ],
+                width: 8
+            }
+        }
+    }
+};

src/theme/gray.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './gray/install';
+
+use(install);

src/theme/gray/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import grayTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('gray', grayTheme);
+}

src/theme/gray/theme.ts

+/*
+ * 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.
+ */
+
+const colorPalette = [
+    '#757575',
+    '#c7c7c7',
+    '#dadada',
+    '#8b8b8b',
+    '#b5b5b5',
+    '#e9e9e9'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#757575'
+        }
+    },
+
+    dataRange: {
+        color: ['#636363', '#dcdcdc']
+    },
+
+    toolbox: {
+        color: ['#757575', '#757575', '#757575', '#757575']
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        axisPointer: {
+            // Axis indicator, coordinate trigger effective
+            type: 'line', // The default is a straight line： 'line' | 'shadow'
+            lineStyle: {
+                // Straight line indicator style settings
+                color: '#757575',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#757575'
+            },
+            shadowStyle: {
+                // Shadow indicator style settings
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(117,117,117,0.2)', // Fill the color
+        handleColor: '#757575' // Handle color
+    },
+
+    grid: {
+        borderWidth: 0
+    },
+
+    categoryAxis: {
+        axisLine: {
+            // Coordinate axis
+            lineStyle: {
+                // Property 'lineStyle' controls line styles
+                color: '#757575'
+            }
+        },
+        splitLine: {
+            // Separation line
+            lineStyle: {
+                // Property 'lineStyle' (see lineStyle) controls line styles
+                color: ['#eee']
+            }
+        }
+    },
+
+    valueAxis: {
+        axisLine: {
+            // Coordinate axis
+            lineStyle: {
+                // Property 'lineStyle' controls line styles
+                color: '#757575'
+            }
+        },
+        splitArea: {
+            show: true,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
+            }
+        },
+        splitLine: {
+            // Separation line
+            lineStyle: {
+                // Property 'lineStyle' (see lineStyle) controls line styles
+                color: ['#eee']
+            }
+        }
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#757575'
+        },
+        controlStyle: {
+            color: '#757575',
+            borderColor: '#757575'
+        }
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#8b8b8b',
+            color0: '#dadada'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#757575',
+            color0: '#c7c7c7'
+        },
+        areaStyle: {
+            color: '#757575',
+            color0: '#e9e9e9'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#c7c7c7'
+        },
+        areaStyle: {
+            color: 'ddd'
+        },
+        label: {
+            color: '#c12e34'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#e9e9e9'
+        },
+        linkStyle: {
+            color: '#757575'
+        }
+    },
+
+    chord: {
+        padding: 4,
+        itemStyle: {
+            color: '#e9e9e9',
+            borderWidth: 1,
+            borderColor: 'rgba(128, 128, 128, 0.5)'
+        },
+        lineStyle: {
+            color: 'rgba(128, 128, 128, 0.5)'
+        },
+        areaStyle: {
+            color: '#757575'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#b5b5b5'],
+                    [0.8, '#757575'],
+                    [1, '#5c5c5c']
+                ],
+                width: 8
+            }
+        }
+    }
+};

src/theme/green.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './green/install';
+
+use(install);

src/theme/green/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import greenTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('green', greenTheme);
+}

src/theme/green/theme.ts

+/*
+ * 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.
+ */
+
+const colorPalette = [
+    '#408829',
+    '#68a54a',
+    '#a9cba2',
+    '#86b379',
+    '#397b29',
+    '#8abb6f',
+    '#759c6a',
+    '#bfd3b7'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#408829'
+        }
+    },
+
+    visualMap: {
+        color: ['408829', '#a9cba2']
+    },
+
+    toolbox: {
+        color: ['#408829', '#408829', '#408829', '#408829']
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        axisPointer: {
+            // Axis indicator, coordinate trigger effective
+            type: 'line', // The default is a straight line： 'line' | 'shadow'
+            lineStyle: {
+                // Straight line indicator style settings
+                color: '#408829',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#408829'
+            },
+            shadowStyle: {
+                // Shadow indicator style settings
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(64,136,41,0.2)', // Fill the color
+        handleColor: '#408829' // Handle color
+    },
+
+    grid: {
+        borderWidth: 0
+    },
+
+    categoryAxis: {
+        axisLine: {
+            // Coordinate axis
+            lineStyle: {
+                // Property 'lineStyle' controls line styles
+                color: '#408829'
+            }
+        },
+        splitLine: {
+            // Separation line
+            lineStyle: {
+                // Property 'lineStyle' (see lineStyle) controls line styles
+                color: ['#eee']
+            }
+        }
+    },
+
+    valueAxis: {
+        axisLine: {
+            // Coordinate axis
+            lineStyle: {
+                // Property 'lineStyle' controls line styles
+                color: '#408829'
+            }
+        },
+        splitArea: {
+            show: true,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
+            }
+        },
+        splitLine: {
+            // Separation line
+            lineStyle: {
+                // Property 'lineStyle' (see lineStyle) controls line styles
+                color: ['#eee']
+            }
+        }
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#408829'
+        },
+        controlStyle: {
+            color: '#408829',
+            borderColor: '#408829'
+        }
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#68a54a',
+            color0: '#a9cba2'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#408829',
+            color0: '#86b379'
+        },
+        areaStyle: {
+            color: '#408829',
+            color0: '#bfd3b7'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#bfd3b7'
+        },
+        linkStyle: {
+            color: '#408829'
+        }
+    },
+
+    chord: {
+        padding: 4,
+        itemStyle: {
+            color: '#bfd3b7',
+            borderWidth: 1,
+            borderColor: 'rgba(128, 128, 128, 0.5)'
+        },
+        lineStyle: {
+            color: 'rgba(128, 128, 128, 0.5)'
+        },
+        areaStyle: {
+            color: '#408829'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#ddd'
+        },
+        areaStyle: {
+            color: '#408829'
+        },
+        label: {
+            color: '#000'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#86b379'],
+                    [0.8, '#68a54a'],
+                    [1, '#408829']
+                ],
+                width: 8
+            }
+        }
+    }
+};

src/theme/helianthus.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './helianthus/install';
+
+use(install);

src/theme/helianthus/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import helianthusTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('helianthus', helianthusTheme);
+}

src/theme/helianthus/theme.ts

+/*
+ * 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.
+ */
+
+const colorPalette = [
+    '#44B7D3',
+    '#E42B6D',
+    '#F4E24E',
+    '#FE9616',
+    '#8AED35',
+    '#ff69b4',
+    '#ba55d3',
+    '#cd5c5c',
+    '#ffa500',
+    '#40e0d0',
+    '#E95569',
+    '#ff6347',
+    '#7b68ee',
+    '#00fa9a',
+    '#ffd700',
+    '#6699FF',
+    '#ff6666',
+    '#3cb371',
+    '#b8860b',
+    '#30e0e0'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#8A826D'
+        }
+    },
+
+    dataRange: {
+        x: 'right',
+        y: 'center',
+        itemWidth: 5,
+        itemHeight: 25,
+        color: ['#E42B6D', '#F9AD96'],
+        text: ['High', 'Low'], // Text, default is numeric text
+        textStyle: {
+            color: '#8A826D' // Range text color
+        }
+    },
+
+    toolbox: {
+        color: ['#E95569', '#E95569', '#E95569', '#E95569'],
+        effectiveColor: '#ff4500',
+        itemGap: 8
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(138,130,109,0.7)', // Prompt background color, default is black with a transparency of 0.7
+        axisPointer: {
+            // Axis indicator, coordinate trigger effective
+            type: 'line', // The default is a straight line： 'line' | 'shadow'
+            lineStyle: {
+                // Straight line indicator style settings
+                color: '#6B6455',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#A6A299'
+            },
+            shadowStyle: {
+                // Shadow indicator style settings
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: 'rgba(130,197,209,0.6)', // Data background color
+        fillerColor: 'rgba(233,84,105,0.1)', // Fill the color
+        handleColor: 'rgba(107,99,84,0.8)' // Handle color
+    },
+
+    grid: {
+        borderWidth: 0
+    },
+
+    categoryAxis: {
+        axisLine: {
+            // Coordinate axis
+            lineStyle: {
+                // Property 'lineStyle' controls line styles
+                color: '#6B6455'
+            }
+        },
+        splitLine: {
+            // separate line
+            show: false
+        }
+    },
+
+    valueAxis: {
+        axisLine: {
+            // Coordinate axis
+            show: true
+        },
+        splitArea: {
+            show: false
+        },
+        splitLine: {
+            // separate line
+            lineStyle: {
+                // Property 'lineStyle' controls line styles
+                color: ['#FFF'],
+                type: 'dashed'
+            }
+        }
+    },
+
+    polar: {
+        axisLine: {
+            // Coordinate axis
+            lineStyle: {
+                // // Property 'lineStyle' controls line styles
+                color: '#ddd'
+            }
+        },
+        splitArea: {
+            show: true,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.2)', 'rgba(200,200,200,0.2)']
+            }
+        },
+        splitLine: {
+            lineStyle: {
+                color: '#ddd'
+            }
+        }
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#6B6455'
+        },
+        controlStyle: {
+            color: '#6B6455',
+            borderColor: '#6B6455'
+        }
+    },
+
+    line: {
+        smooth: true,
+        symbol: 'emptyCircle', // Inflection point graphic type
+        symbolSize: 3 // Inflection point graphic size
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#e42B6d',
+            color0: '#44B7d3'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#e42B6d',
+            color0: '#44B7d3'
+        },
+        areaStyle: {
+            color: '#fe994e',
+            color0: '#e42B6d'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#6b6455'
+        },
+        areaStyle: {
+            color: '#ddd'
+        },
+        label: {
+            color: '#e42B6d'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#e42B6d'
+        },
+        linkStyle: {
+            color: '#6b6455'
+        }
+    },
+
+    chord: {
+        padding: 4,
+        itemStyle: {
+            color: '#e42B6d',
+            borderWidth: 1,
+            borderColor: 'rgba(128, 128, 128, 0.5)'
+        },
+        lineStyle: {
+            color: 'rgba(128, 128, 128, 0.5)'
+        },
+        areaStyle: {
+            color: '#6b6455'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#44B7D3'],
+                    [0.8, '#6B6455'],
+                    [1, '#E42B6D']
+                ],
+                width: 8
+            }
+        }
+    }
+};

src/theme/helper.ts

+import type { EChartsExtensionInstallRegisters } from '../extension';
+
+export function checkECharts(registers: EChartsExtensionInstallRegisters) {
+    const log = function (msg: any) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    };
+    if (!registers) {
+        log('ECharts is not Loaded');
+        return;
+    }
+}

src/theme/infographic.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './infographic/install';
+
+use(install);

src/theme/infographic/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import infographicTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('infographic', infographicTheme);
+}

src/theme/infographic/theme.ts

+/*
+* 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.
+*/
+
+const colorPalette = [
+    '#C1232B',
+    '#27727B',
+    '#FCCE10',
+    '#E87C25',
+    '#B5C334',
+    '#FE8463',
+    '#9BCA63',
+    '#FAD860',
+    '#F3A43B',
+    '#60C0DD',
+    '#D7504B',
+    '#C6E579',
+    '#F4E001',
+    '#F0805A',
+    '#26C0C0'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#27727B'
+        }
+    },
+
+    visualMap: {
+        color: ['#C1232B', '#FCCE10']
+    },
+
+    toolbox: {
+        iconStyle: {
+            normal: {
+                borderColor: colorPalette[0]
+            }
+        }
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(50,50,50,0.5)',
+        axisPointer: {
+            type: 'line',
+            lineStyle: {
+                color: '#27727B',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#27727B'
+            },
+            shadowStyle: {
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    dataZoom: {
+        dataBackgroundColor: 'rgba(181,195,52,0.3)',
+        fillerColor: 'rgba(181,195,52,0.2)',
+        handleColor: '#27727B'
+    },
+
+    categoryAxis: {
+        axisLine: {
+            lineStyle: {
+                color: '#27727B'
+            }
+        },
+        splitLine: {
+            show: false
+        }
+    },
+
+    valueAxis: {
+        axisLine: {
+            show: false
+        },
+        splitArea: {
+            show: false
+        },
+        splitLine: {
+            lineStyle: {
+                color: ['#ccc'],
+                type: 'dashed'
+            }
+        }
+    },
+
+    timeline: {
+        itemStyle: {
+            color: '#27727B'
+        },
+        lineStyle: {
+            color: '#27727B'
+        },
+        controlStyle: {
+            color: '#27727B',
+            borderColor: '#27727B'
+        },
+        symbol: 'emptyCircle',
+        symbolSize: 3
+    },
+
+    line: {
+        itemStyle: {
+            borderWidth: 2,
+            borderColor: '#fff',
+            lineStyle: {
+                width: 3
+            },
+            emphasis: {
+                borderWidth: 0
+            }
+        },
+        symbol: 'circle',
+        symbolSize: 3.5
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#c1232b',
+            color0: '#b5c334'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#c1232b',
+            color0: '#b5c334'
+        },
+        areaStyle: {
+            color: '#c1232b',
+            color0: '#27727b'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#c1232b'
+        },
+        linkStyle: {
+            color: '#b5c334'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#f2385a',
+            areaColor: '#ddd',
+            borderColor: '#eee'
+        },
+        areaStyle: {
+            color: '#fe994e'
+        },
+        label: {
+            color: '#c1232b'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#B5C334'],
+                    [0.8, '#27727B'],
+                    [1, '#C1232B']
+                ]
+            }
+        },
+        axisTick: {
+            splitNumber: 2,
+            length: 5,
+            lineStyle: {
+                color: '#fff'
+            }
+        },
+        axisLabel: {
+            color: '#fff'
+        },
+        splitLine: {
+            length: '5%',
+            lineStyle: {
+                color: '#fff'
+            }
+        },
+        title: {
+            offsetCenter: [0, -20]
+        }
+    }
+};

src/theme/inspired.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './inspired/install';
+
+use(install);

src/theme/inspired/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import inspiredTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('inspired', inspiredTheme);
+}

src/theme/inspired/theme.ts

+/*
+ * 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.
+ */
+
+const colorPalette = [
+    '#cc0000',
+    '#002266',
+    '#ff9900',
+    '#006600',
+    '#8a150f',
+    '#076278',
+    '#808080',
+    '#f07b75'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#cc0000'
+        }
+    },
+
+    visualMap: {
+        color: ['#cc0000', '#002266']
+    },
+
+    toolbox: {
+        color: ['#cc0000', '#cc0000', '#cc0000', '#cc0000']
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        axisPointer: {
+            // Axis indicator, coordinate trigger effective
+            type: 'line', // The default is a straight line： 'line' | 'shadow'
+            lineStyle: {
+                // Straight line indicator style settings
+                color: '#cc0000',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#cc0000'
+            },
+            shadowStyle: {
+                // Shadow indicator style settings
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+        handleColor: '#cc0000' // Handle color
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#cc0000'
+        },
+        controlStyle: {
+            color: '#cc0000',
+            borderColor: '#cc0000'
+        }
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#002266',
+            color0: '#ff9900'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#8a150f',
+            color0: '#006600'
+        },
+        areaStyle: {
+            color: '#cc0000',
+            color0: '#ff9900'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#ff9900'
+        },
+        areaStyle: {
+            color: '#ddd'
+        },
+        label: {
+            color: '#c12e34'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#ff9900'
+        },
+        linkStyle: {
+            color: '#cc0000'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#002266'],
+                    [0.8, '#cc0000'],
+                    [1, '8a150f']
+                ],
+                width: 8
+            }
+        }
+    }
+};

src/theme/jazz.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './jazz/install';
+
+use(install);

src/theme/jazz/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import jazzTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('jazz', jazzTheme);
+}

src/theme/jazz/theme.ts

+/*
+ * 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.
+ */
+
+const colorPalette = [
+    '#e9e0d1',
+    '#91a398',
+    '#33605a',
+    '#070001',
+    '#68462b',
+    '#58a79c',
+    '#abd3ce',
+    '#eef6f5'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#e9e0d1'
+        }
+    },
+
+    visualMap: {
+        color: ['#e9e0d1', '#91a398']
+    },
+
+    toolbox: {
+        color: ['#e9e0d1', '#e9e0d1', '#e9e0d1', '#e9e0d1']
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        axisPointer: {
+            // Axis indicator, coordinate trigger effective
+            type: 'line', // The default is a straight line： 'line' | 'shadow'
+            lineStyle: {
+                // Straight line indicator style settings
+                color: '#e9e0d1',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#e9e0d1'
+            },
+            shadowStyle: {
+                // Shadow indicator style settings
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(200,200,200,0.2)', // Fill the color
+        handleColor: '#e9e0d1' // Handle color
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#e9e0d1'
+        },
+        controlStyle: {
+            color: '#e9e0d1',
+            borderColor: '#e9e0d1'
+        }
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#91a398',
+            color0: '#33605a'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#68462b',
+            color0: '#070001'
+        },
+        areaStyle: {
+            color: '#91a398',
+            color0: '#abd3ce'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#c12e34'
+        },
+        areaStyle: {
+            color: '#ddd'
+        },
+        label: {
+            color: '#c12e34'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#33605a'
+        },
+        linkStyle: {
+            color: '#e9e0d1'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#91a398'],
+                    [0.8, '#e9e0d1'],
+                    [1, '#68462b']
+                ],
+                width: 8
+            }
+        }
+    }
+};

src/theme/light/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import lightTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('light', lightTheme);
+}

src/theme/light.ts → src/theme/light/theme.ts

@@ -17,6 +17,8 @@
 * under the License.
 */
 
+// registerd by default
+
 const colorAll = [
     '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f',
     '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'
@@ -32,4 +34,4 @@ export default {
         ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
         colorAll
     ]
-};
\ No newline at end of file
+};

src/theme/london.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './london/install';
+
+use(install);

src/theme/london/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import londonTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('london', londonTheme);
+}

src/theme/london/theme.ts

+/*
+ * 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.
+ */
+
+const colorPalette = [
+    '#02151a',
+    '#043a47',
+    '#087891',
+    '#c8c8c8',
+    '#b31d14',
+    '#0b9cc1',
+    '#f2f2f2',
+    '#f07b75'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#02151a'
+        }
+    },
+
+    visualMap: {
+        color: ['#02151a', '#a2d4e6']
+    },
+
+    toolbox: {
+        color: ['#02151a', '#02151a', '#02151a', '#02151a']
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        axisPointer: {
+            // Axis indicator, coordinate trigger effective
+            type: 'line', // The default is a straight line： 'line' | 'shadow'
+            lineStyle: {
+                // Straight line indicator style settings
+                color: '#02151a',
+                type: 'dashed'
+            },
+            crossStyle: {
+                color: '#02151a'
+            },
+            shadowStyle: {
+                // Shadow indicator style settings
+                color: 'rgba(200,200,200,0.3)'
+            }
+        }
+    },
+
+    // Area scaling controller
+    dataZoom: {
+        dataBackgroundColor: '#eee', // Data background color
+        fillerColor: 'rgba(144,197,237,0.2)', // Fill the color
+        handleColor: '#02151a' // Handle color
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#02151a'
+        },
+        controlStyle: {
+            color: '#02151a',
+            borderColor: '#02151a'
+        }
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#043a47',
+            color0: '#087891'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#b31d14',
+            color0: '#c8c8c8'
+        },
+        areaStyle: {
+            color: '#087891',
+            color0: '#c8c8c8'
+        }
+    },
+
+    map: {
+        itemStyle: {
+            color: '#ddd'
+        },
+        areaStyle: {
+            color: '#087891'
+        },
+        label: {
+            color: '#c12e34'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#c12e34'
+        },
+        linkStyle: {
+            color: '#02151a'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#043a47'],
+                    [0.8, '#02151a'],
+                    [1, '#b31d14']
+                ],
+                width: 8
+            }
+        }
+    }
+};

src/theme/macarons.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './macarons/install';
+
+use(install);

src/theme/macarons/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import macaronsTheme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('macarons', macaronsTheme);
+}

src/theme/macarons/theme.ts

+/*
+* 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.
+*/
+
+const colorPalette = [
+    '#2ec7c9',
+    '#b6a2de',
+    '#5ab1ef',
+    '#ffb980',
+    '#d87a80',
+    '#8d98b3',
+    '#e5cf0d',
+    '#97b552',
+    '#95706d',
+    '#dc69aa',
+    '#07a2a4',
+    '#9a7fd1',
+    '#588dd5',
+    '#f5994e',
+    '#c05050',
+    '#59678c',
+    '#c9ab00',
+    '#7eb00a',
+    '#6f5553',
+    '#c14089'
+];
+
+export default {
+    color: colorPalette,
+
+    title: {
+        textStyle: {
+            fontWeight: 'normal',
+            color: '#008acd'
+        }
+    },
+
+    visualMap: {
+        itemWidth: 15,
+        color: ['#5ab1ef', '#e0ffff']
+    },
+
+    toolbox: {
+        iconStyle: {
+            normal: {
+                borderColor: colorPalette[0]
+            }
+        }
+    },
+
+    tooltip: {
+        backgroundColor: 'rgba(50,50,50,0.5)',
+        axisPointer: {
+            type: 'line',
+            lineStyle: {
+                color: '#008acd'
+            },
+            crossStyle: {
+                color: '#008acd'
+            },
+            shadowStyle: {
+                color: 'rgba(200,200,200,0.2)'
+            }
+        }
+    },
+
+    dataZoom: {
+        dataBackgroundColor: '#efefff',
+        fillerColor: 'rgba(182,162,222,0.2)',
+        handleColor: '#008acd'
+    },
+
+    grid: {
+        borderColor: '#eee'
+    },
+
+    categoryAxis: {
+        axisLine: {
+            lineStyle: {
+                color: '#008acd'
+            }
+        },
+        splitLine: {
+            lineStyle: {
+                color: ['#eee']
+            }
+        }
+    },
+
+    valueAxis: {
+        axisLine: {
+            lineStyle: {
+                color: '#008acd'
+            }
+        },
+        splitArea: {
+            show: true,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
+            }
+        },
+        splitLine: {
+            lineStyle: {
+                color: ['#eee']
+            }
+        }
+    },
+
+    timeline: {
+        lineStyle: {
+            color: '#008acd'
+        },
+        controlStyle: {
+            color: '#008acd',
+            borderColor: '#008acd'
+        },
+        symbol: 'emptyCircle',
+        symbolSize: 3
+    },
+
+    line: {
+        smooth: true,
+        symbol: 'emptyCircle',
+        symbolSize: 3
+    },
+
+    candlestick: {
+        itemStyle: {
+            color: '#d87a80',
+            color0: '#2ec7c9'
+        },
+        lineStyle: {
+            width: 1,
+            color: '#d87a80',
+            color0: '#2ec7c9'
+        },
+        areaStyle: {
+            color: '#2ec7c9',
+            color0: '#b6a2de'
+        }
+    },
+
+    scatter: {
+        symbol: 'circle',
+        symbolSize: 4
+    },
+
+    map: {
+        itemStyle: {
+            color: '#ddd'
+        },
+        areaStyle: {
+            color: '#fe994e'
+        },
+        label: {
+            color: '#d87a80'
+        }
+    },
+
+    graph: {
+        itemStyle: {
+            color: '#d87a80'
+        },
+        linkStyle: {
+            color: '#2ec7c9'
+        }
+    },
+
+    gauge: {
+        axisLine: {
+            lineStyle: {
+                color: [
+                    [0.2, '#2ec7c9'],
+                    [0.8, '#5ab1ef'],
+                    [1, '#d87a80']
+                ],
+                width: 10
+            }
+        },
+        axisTick: {
+            splitNumber: 10,
+            length: 15,
+            lineStyle: {
+                color: 'auto'
+            }
+        },
+        splitLine: {
+            length: 22,
+            lineStyle: {
+                color: 'auto'
+            }
+        },
+        pointer: {
+            width: 5
+        }
+    }
+};
+

src/theme/macarons2.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './macarons2/install';
+
+use(install);

src/theme/macarons2/install.ts

+/*
+* 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 type { EChartsExtensionInstallRegisters } from '../../extension';
+import macarons2Theme from './theme';
+
+export function install(registers: EChartsExtensionInstallRegisters) {
+    registers.registerTheme('macarons2', macarons2Theme);
+}

src/theme/mint.ts

+/*
+* 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 { use } from '../extension';
+import { install } from './mint/install';
+
+use(install);