From b6b49de79e7b35485804ad08f7ffe1dc8f8e4277 Mon Sep 17 00:00:00 2001
From: MiniPear <pearminipro@gmail.com>
Date: Mon, 6 Nov 2023 17:59:57 +0800
Subject: [PATCH] docs: custom theme

---
 __tests__/unit/api/theme.spec.ts  | 11 ++++++++
 site/docs/manual/core/theme.zh.md | 45 +++++++++++++++++++++++--------
 src/exports.ts                    |  2 ++
 3 files changed, 47 insertions(+), 11 deletions(-)
 create mode 100644 __tests__/unit/api/theme.spec.ts

diff --git a/__tests__/unit/api/theme.spec.ts b/__tests__/unit/api/theme.spec.ts
new file mode 100644
index 0000000000..113f430289
--- /dev/null
+++ b/__tests__/unit/api/theme.spec.ts
@@ -0,0 +1,11 @@
+import { Light, Dark, Classic, ClassicDark, Academy } from '../../../src';
+
+describe('theme', () => {
+  it('should export all the themes', () => {
+    expect(Light).toBeDefined();
+    expect(Dark).toBeDefined();
+    expect(Classic).toBeDefined();
+    expect(ClassicDark).toBeDefined();
+    expect(Academy).toBeDefined();
+  });
+});
diff --git a/site/docs/manual/core/theme.zh.md b/site/docs/manual/core/theme.zh.md
index 34a393c58f..9555da696d 100644
--- a/site/docs/manual/core/theme.zh.md
+++ b/site/docs/manual/core/theme.zh.md
@@ -86,22 +86,45 @@ chart.theme({ type: 'light', ...theme });
 })();
 ```
 
-如果希望自定义所有的主题样式，可以新增一个主题，注册，然后使用。
+如果希望自定义所有的主题样式，可以新增一个主题、覆盖默认主题、注册，然后使用。
 
-```js
-import { register } from '@antv/g2';
+```js | ob
+(() => {
+  // 定义主题
+  function CustomTheme() {
+    const light = G2.Light();
+    return { ...light, color: 'red' };
+  }
 
-const theme = {};
+  // 注册主题
+  G2.register('theme.custom', CustomTheme);
 
-register('theme.custom', theme);
+  const chart = new G2.Chart();
 
-// Spec 形式
-const options = {
-  theme: { type: 'custom' },
-};
+  chart.options({
+    type: 'interval',
+    data: {
+      type: 'fetch',
+      value:
+        'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
+    },
+    encode: { x: 'letter', y: 'frequency' },
+    axis: { y: { labelFormatter: '.0%' } },
+    theme: { type: 'custom' }, // 使用主题
+  });
 
-// API 形式
-chart.theme({ type: 'custom' });
+  chart.render();
+
+  return chart.getContainer();
+})();
 ```
 
+包含的默认主题有：
+
+- `G2.Light`
+- `G2.Dark`
+- `G2.Classic`
+- `G2.ClassicDark`
+- `G2.Academy`
+
 完整的主题配置可以参考 [light](https://github.com/antvis/G2/blob/v5/src/theme/light.ts) 主题。
diff --git a/src/exports.ts b/src/exports.ts
index 620359d9d2..79c7a519dd 100644
--- a/src/exports.ts
+++ b/src/exports.ts
@@ -30,3 +30,5 @@ export { ChartEvent } from './utils/event';
 export type { G2Context } from './runtime';
 
 export * from './spec';
+
+export { Light, Dark, Academy, Classic, ClassicDark } from './theme';