docs(demo): add theme switch demo

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;
 

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',

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"
+    }
+  ]
+}

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();
+      });
+    });
+  });

packages/site/examples/feature/theme/index.en.md

@@ -0,0 +1,3 @@
+---
+title: Theme
+---

packages/site/examples/feature/theme/index.zh.md

@@ -0,0 +1,3 @@
+---
+title: 主题
+---

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",