From 05b2d21e8e40501f19b623971f1d85313890de6f Mon Sep 17 00:00:00 2001
From: Aaron <yangtao.yangtao@antgroup.com>
Date: Mon, 20 May 2024 10:47:16 +0800
Subject: [PATCH 1/2] fix: fix setBackground not effect

---
 packages/g6/src/runtime/canvas.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/g6/src/runtime/canvas.ts b/packages/g6/src/runtime/canvas.ts
index 251025426d5..1319ae3b308 100644
--- a/packages/g6/src/runtime/canvas.ts
+++ b/packages/g6/src/runtime/canvas.ts
@@ -154,7 +154,10 @@ export class Canvas {
   private backgroundElement!: HTMLDivElement;
 
   private initBackgroundElement(options: Record<string, unknown>) {
-    if (this.backgroundElement) return this.backgroundElement;
+    if (this.backgroundElement) {
+      Object.assign(this.backgroundElement.style, options);
+      return this.backgroundElement;
+    }
 
     const { width, height } = this.config;
 

From 0e75a1d8b9641bc1139781b3a5b17ba138fe859e Mon Sep 17 00:00:00 2001
From: Aaron <yangtao.yangtao@antgroup.com>
Date: Mon, 20 May 2024 10:48:34 +0800
Subject: [PATCH 2/2] docs(demo): add theme switch demo

---
 packages/site/.dumirc.ts                      |  8 ++
 .../examples/feature/theme/demo/meta.json     | 16 ++++
 .../examples/feature/theme/demo/switch.js     | 77 +++++++++++++++++++
 .../site/examples/feature/theme/index.en.md   |  3 +
 .../site/examples/feature/theme/index.zh.md   |  3 +
 packages/site/package.json                    |  2 +-
 6 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 packages/site/examples/feature/theme/demo/meta.json
 create mode 100644 packages/site/examples/feature/theme/demo/switch.js
 create mode 100644 packages/site/examples/feature/theme/index.en.md
 create mode 100644 packages/site/examples/feature/theme/index.zh.md

diff --git a/packages/site/.dumirc.ts b/packages/site/.dumirc.ts
index f51014652e8..3c479a58c09 100644
--- a/packages/site/.dumirc.ts
+++ b/packages/site/.dumirc.ts
@@ -215,6 +215,14 @@ export default defineConfig({
       },
     ],
     examples: [
+      {
+        slug: 'feature',
+        icon: 'gallery',
+        title: {
+          zh: '特性',
+          en: 'Feature',
+        },
+      },
       {
         slug: 'scene-case',
         icon: 'gallery',
diff --git a/packages/site/examples/feature/theme/demo/meta.json b/packages/site/examples/feature/theme/demo/meta.json
new file mode 100644
index 00000000000..bf2c417366c
--- /dev/null
+++ b/packages/site/examples/feature/theme/demo/meta.json
@@ -0,0 +1,16 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "switch.js",
+      "title": {
+        "zh": "主题切换",
+        "en": "Switch Theme"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jCYaT7L2E7sAAAAAAAAAAAAADmJ7AQ/original"
+    }
+  ]
+}
diff --git a/packages/site/examples/feature/theme/demo/switch.js b/packages/site/examples/feature/theme/demo/switch.js
new file mode 100644
index 00000000000..65063bec6d0
--- /dev/null
+++ b/packages/site/examples/feature/theme/demo/switch.js
@@ -0,0 +1,77 @@
+import { Graph } from '@antv/g6';
+
+const themes = {
+  '🌞 Light': {
+    background: '#fff',
+    theme: 'light',
+    node: {
+      palette: {
+        type: 'group',
+        field: 'cluster',
+      },
+    },
+  },
+  '🌚 Dark': {
+    background: '#000',
+    theme: 'dark',
+    node: {
+      palette: {
+        type: 'group',
+        field: 'cluster',
+      },
+    },
+  },
+  '🌎 Blue': {
+    background: '#f3faff',
+    theme: 'light',
+    node: {
+      palette: {
+        type: 'group',
+        field: 'cluster',
+        color: 'blues',
+        invert: true,
+      },
+    },
+  },
+  '🌕 Yellow': {
+    background: '#fcf9f1',
+    theme: 'light',
+    node: {
+      palette: {
+        type: 'group',
+        field: 'cluster',
+        color: ['#ffe7ba', '#ffd591', '#ffc069', '#ffa940', '#fa8c16', '#d46b08', '#ad4e00', '#873800', '#612500'],
+      },
+    },
+  },
+};
+
+fetch('https://assets.antv.antgroup.com/g6/cluster.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const graph = new Graph({
+      container: 'container',
+      padding: 20,
+      autoFit: 'view',
+      theme: 'light',
+      data,
+      node: {
+        palette: {
+          type: 'group',
+          field: 'cluster',
+        },
+      },
+      layout: {
+        type: 'circular',
+      },
+    });
+
+    graph.render();
+
+    window.addPanel((gui) => {
+      gui.add({ theme: '🌞 Light' }, 'theme', Object.keys(themes)).onChange((theme) => {
+        graph.setOptions(themes[theme]);
+        graph.render();
+      });
+    });
+  });
diff --git a/packages/site/examples/feature/theme/index.en.md b/packages/site/examples/feature/theme/index.en.md
new file mode 100644
index 00000000000..5382de7fe38
--- /dev/null
+++ b/packages/site/examples/feature/theme/index.en.md
@@ -0,0 +1,3 @@
+---
+title: Theme
+---
diff --git a/packages/site/examples/feature/theme/index.zh.md b/packages/site/examples/feature/theme/index.zh.md
new file mode 100644
index 00000000000..68f3fa05417
--- /dev/null
+++ b/packages/site/examples/feature/theme/index.zh.md
@@ -0,0 +1,3 @@
+---
+title: 主题
+---
diff --git a/packages/site/package.json b/packages/site/package.json
index a30e7ae9046..7020e422421 100644
--- a/packages/site/package.json
+++ b/packages/site/package.json
@@ -51,7 +51,7 @@
     "@antv/layout-wasm": "^1.3.4",
     "@antv/util": "^3.3.7",
     "antd": "^5.10.2",
-    "dumi": "~2.2.14",
+    "dumi": "~2.2.17",
     "insert-css": "^2.0.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",