feat: reconfig color theme demo

docs/assets/examples/en/theme/theme-style.md

@@ -10,7 +10,6 @@ option: barChart#theme
 # Deffient Style of Theme Registration and Switching
 
 ## Live Demo
-
 ```javascript livedemo
 /** step1: perpare */ 
 // step1.1: mock spec
@@ -169,12 +168,21 @@ for (const colorKey in colorTheme) {
   };
   // register theme 
   VChart.ThemeManager.registerTheme(colorKey, theme[colorName]);
-  // option in select component
+   // option in select component
   const option = document.createElement("option");
   option.value = colorKey;
   option.text = colorName;
   select.appendChild(option);
 }
+// append select about vchart default theme
+const optionLight = document.createElement("option");
+optionLight.value = 'light';
+optionLight.text = 'light(VChart内置)';
+select.appendChild(optionLight);
+const optionDark = document.createElement("option");
+optionDark.value = 'dark';
+optionDark.text = 'dark(VChart内置)';
+select.appendChild(optionDark);
 // step2.4: init theme
 VChart.ThemeManager.setCurrentTheme("volcanoBlue");
 

docs/assets/examples/zh/theme/theme-style.md

@@ -10,7 +10,6 @@ option: barChart#theme
 # 不同风格的主题注册、切换
 
 ## 代码演示
-
 ```javascript livedemo
 /** step1: perpare */ 
 // step1.1: mock spec
@@ -175,6 +174,15 @@ for (const colorKey in colorTheme) {
   option.text = colorName;
   select.appendChild(option);
 }
+// append select about vchart default theme
+const optionLight = document.createElement("option");
+optionLight.value = 'light';
+optionLight.text = 'light(VChart内置)';
+select.appendChild(optionLight);
+const optionDark = document.createElement("option");
+optionDark.value = 'dark';
+optionDark.text = 'dark(VChart内置)';
+select.appendChild(optionDark);
 // step2.4: init theme
 VChart.ThemeManager.setCurrentTheme("volcanoBlue");
 

docs/assets/guide/en/tutorial_docs/Theme/Customize_Theme.md

@@ -431,13 +431,17 @@ For the big screen, which is heavy on performance and light on analysis, the the
 
 According to the design of the effect, the style of the chart is divided into three modules: "Color Palette", "Meta Style" and "Component Style".
 
-- The 'color palette' is distilled from business deposits and is open for your reference here: [https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/theme.json](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/theme.json).
+- The 'color palette' is distilled from business deposits and is open for your reference here: [https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/colors.json](https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/colors.json).
 
 - "Mark Style" is a gradient effect, which is configured by [Mark Gradient Configuration](../../../option/barChart#bar.style.fill).
 
 - Component styles are realized through the specific configuration of each component.
 Eventually, these configurations are written into the theme, and then through the theme registration and switching to achieve different scenarios of the chart style effect.
 
+Of course, VChart also has two sets of built-in themes that users can use without registering. Their specific configurations are as follows:
+- dark: [https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/dark.json](https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/dark.json)
+- light: [https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/color.json](https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/color.json)
+
 The following example demonstrates the above process:
 
 ```javascript livedemo
@@ -604,6 +608,15 @@ for (const colorKey in colorTheme) {
   option.text = colorName;
   select.appendChild(option);
 }
+// append select about vchart default theme
+const optionLight = document.createElement("option");
+optionLight.value = 'light';
+optionLight.text = 'light(VChart内置)';
+select.appendChild(optionLight);
+const optionDark = document.createElement("option");
+optionDark.value = 'dark';
+optionDark.text = 'dark(VChart内置)';
+select.appendChild(optionDark);
 // step2.4: init theme
 VChart.ThemeManager.setCurrentTheme("volcanoBlue");
 
@@ -625,7 +638,6 @@ vchart.renderAsync();
 window['vchart'] = vchart;
 ```
 
-
 ## Conclusion
 
 In this chapter, we learned about theme and color palette configuration, how to use custom themes to set personalized styles for charts, and introduced two ways to register custom themes. In addition, we also learned how to dynamically update chart themes as needed. With these skills, you will be better able to use VChart to display beautiful and easy-to-understand data visualization effects. We hope this tutorial helps you get started quickly, making data visualization simpler and more fun!

docs/assets/guide/zh/tutorial_docs/Theme/Customize_Theme.md

@@ -431,12 +431,16 @@ vchart.renderAsync().then(() => {
 </div>
 
 根据效果的设计，图表的样式分为「色板」、「图元样式」、「组件样式」这三个模块。
-- 「色板」的提炼来自于业务沉淀，在此开放出来以供大家参考: [https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/theme.json](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/theme.json)。
+- 「色板」的提炼来自于业务沉淀，在此开放出来以供大家参考: [https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/colors.json](https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/colors.json)。
 - 「图元样式」为渐变效果，通过[图元渐变配置](../../../option/barChart#bar.style.fill)实现。
 - 「组件样式」则通过各个组件的具体配置实现。
 
 最终将这些配置写入主题中，再通过主题的注册和切换即可实现不同场景下的图表样式效果。
 
+当然，VChart内部也内置了两套主题，用户无需注册就可以使用，它们的具体配置如下：
+- dark: [https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/dark.json](https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/dark.json)
+- light: [https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/color.json](https://github.com/VisActor/VChart/blob/develop/docs/assets/themes/color.json)
+
 下面这个示例展示了上述过程：
 
 ```javascript livedemo
@@ -603,6 +607,15 @@ for (const colorKey in colorTheme) {
   option.text = colorName;
   select.appendChild(option);
 }
+// append select about vchart default theme
+const optionLight = document.createElement("option");
+optionLight.value = 'light';
+optionLight.text = 'light(VChart内置)';
+select.appendChild(optionLight);
+const optionDark = document.createElement("option");
+optionDark.value = 'dark';
+optionDark.text = 'dark(VChart内置)';
+select.appendChild(optionDark);
 // step2.4: init theme
 VChart.ThemeManager.setCurrentTheme("volcanoBlue");
 

docs/assets/themes/colors.json

@@ -0,0 +1,135 @@
+{
+    "volcanoBlue": {
+        "name": "火山蓝",
+        "colors": [
+            "#006EFF",
+            "#00E5E5",
+            "#2E55EA",
+            "#B8E7FE",
+            "#00D689",
+            "#B7F9F5",
+            "#FBCC71",
+            "#F46E50"
+        ]
+    },
+    "clean": {
+        "name": "清新蜡笔",
+        "colors": [
+            "#fd7f6f",
+            "#7eb0d5",
+            "#b2e061",
+            "#bd7ebe",
+            "#ffb55a",
+            "#ffee65",
+            "#beb9db",
+            "#fdcce5",
+            "#8bd3c7"
+        ]
+    },
+    "outskirts": {
+        "name": "郊外",
+        "colors": [
+            "#cfcfcf",
+            "#ffbc79",
+            "#a2c8ec",
+            "#898989",
+            "#c85200",
+            "#5f9ed1",
+            "#595959",
+            "#ababab",
+            "#ff800e",
+            "#006ba4"
+        ]
+    },
+    "blueOrange": {
+        "name": "汽车蓝橙",
+        "colors": [
+            "#4ABEFF",
+            "#E97A4B",
+            "#A0D8FF",
+            "#FFB99C",
+            "#91A9B1",
+            "#E9A94B",
+            "#4BE99D",
+            "#6F86FF"
+        ]
+    },
+    "financeYellow": {
+        "name": "金融黄",
+        "colors": [
+            "#FFCF67",
+            "#FF9254",
+            "#D7D7D7",
+            "#E1C396",
+            "#FFB99C",
+            "#C5BEB4",
+            "#96B9A8",
+            "#C59C7F"
+        ]
+    },
+    "wenLvCyan": {
+        "name": "文旅青",
+        "colors": [
+            "#32E2CD",
+            "#FFCE70",
+            "#B03C3C",
+            "#BEEAE4",
+            "#D66E41",
+            "#E1E1E1",
+            "#3BC080",
+            "#435BD8"
+        ]
+    },
+    "electricGreen": {
+        "name": "电力绿",
+        "colors": [
+            "#08FEF3",
+            "#FF7925",
+            "#FBCC71",
+            "#2EC8EA",
+            "#B8FEF1",
+            "#F9CFB7",
+            "#D43A30",
+            "#5FCEA6"
+        ]
+    },
+    "eCommercePurple": {
+        "name": "电商紫",
+        "colors": [
+            "#734AFF",
+            "#FF6960",
+            "#5484FF",
+            "#CDC4EC",
+            "#EAC4C2",
+            "#34CECC",
+            "#FFB054",
+            "#C13C5C"
+        ]
+    },
+    "redBlue": {
+        "name": "红蓝",
+        "colors": [
+            "#006EFF",
+            "#CC3B3B",
+            "#B8E5FE",
+            "#214FFF",
+            "#FFCFCF",
+            "#00E5E5",
+            "#B7F9F5",
+            "#FBCC71"
+        ]
+    },
+    "partyRed": {
+        "name": "党建红",
+        "colors": [
+            "#E82F2F",
+            "#FF9635",
+            "#D7D7D7",
+            "#E19B96",
+            "#FFB99C",
+            "#C5BEB4",
+            "#B99696",
+            "#C59C7F"
+        ]
+    }
+}