diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap
index 83f875da4a..5c58a90cbd 100644
--- a/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap
+++ b/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap
@@ -1,5 +1,1053 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SpreadSheet Theme Tests Theme Default Value Tests should get colorful theme 1`] = `
+Object {
+  "background": Object {
+    "color": "#FFFFFF",
+    "opacity": 1,
+  },
+  "colCell": Object {
+    "bolderText": Object {
+      "fill": "#FFFFFF",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "center",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#3471F9",
+      "backgroundColorOpacity": 1,
+      "horizontalBorderColor": "#5286FA",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "interactionState": Object {
+        "highlight": Object {
+          "backgroundColor": "#87B5FF",
+          "backgroundOpacity": 1,
+        },
+        "hover": Object {
+          "backgroundColor": "#2C60D4",
+          "backgroundOpacity": 0.6,
+        },
+        "prepareSelect": Object {
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "searchResult": Object {
+          "backgroundColor": "#F0F7FF",
+          "backgroundOpacity": 1,
+        },
+        "selected": Object {
+          "backgroundColor": "#2C60D4",
+          "backgroundOpacity": 0.6,
+        },
+        "unselected": Object {
+          "backgroundOpacity": 0.3,
+          "opacity": 0.3,
+          "textOpacity": 0.3,
+        },
+      },
+      "padding": Object {
+        "bottom": 4,
+        "left": 8,
+        "right": 8,
+        "top": 4,
+      },
+      "verticalBorderColor": "#5286FA",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#FFFFFF",
+      "margin": Object {
+        "bottom": 6,
+        "left": 4,
+        "right": 4,
+        "top": 6,
+      },
+      "size": 10,
+    },
+    "measureText": Object {
+      "fill": "#FFFFFF",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+    "text": Object {
+      "fill": "#FFFFFF",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "opacity": 1,
+      "textAlign": "center",
+      "textBaseline": "middle",
+    },
+  },
+  "cornerCell": Object {
+    "bolderText": Object {
+      "fill": "#FFFFFF",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#3471F9",
+      "backgroundColorOpacity": 1,
+      "horizontalBorderColor": "#5286FA",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "padding": Object {
+        "bottom": 4,
+        "left": 8,
+        "right": 8,
+        "top": 4,
+      },
+      "verticalBorderColor": "#5286FA",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#FFFFFF",
+      "margin": Object {
+        "left": 4,
+        "right": 4,
+      },
+      "size": 10,
+    },
+    "text": Object {
+      "fill": "#FFFFFF",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+  },
+  "dataCell": Object {
+    "bolderText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "linkTextFill": "#2C60D4",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#FFFFFF",
+      "backgroundColorOpacity": 1,
+      "crossBackgroundColor": "#F5F8FF",
+      "horizontalBorderColor": "#E1EAFE",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "interactionState": Object {
+        "highlight": Object {
+          "backgroundColor": "#87B5FF",
+          "backgroundOpacity": 1,
+        },
+        "hover": Object {
+          "backgroundColor": "#E1EAFE",
+          "backgroundOpacity": 0.6,
+        },
+        "hoverFocus": Object {
+          "backgroundColor": "#E1EAFE",
+          "backgroundOpacity": 0.6,
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "prepareSelect": Object {
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "searchResult": Object {
+          "backgroundColor": "#F0F7FF",
+          "backgroundOpacity": 1,
+        },
+        "selected": Object {
+          "backgroundColor": "#E1EAFE",
+          "backgroundOpacity": 0.6,
+        },
+        "unselected": Object {
+          "backgroundOpacity": 0.3,
+          "opacity": 0.3,
+          "textOpacity": 0.3,
+        },
+      },
+      "padding": Object {
+        "bottom": 8,
+        "left": 8,
+        "right": 8,
+        "top": 8,
+      },
+      "verticalBorderColor": "#E1EAFE",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#000000",
+      "margin": Object {
+        "left": 4,
+        "right": 4,
+      },
+      "size": 10,
+    },
+    "miniChart": Object {
+      "bar": Object {
+        "fill": "#2C60D4",
+        "intervalPadding": 4,
+        "opacity": 1,
+      },
+      "bullet": Object {
+        "backgroundColor": "#E9E9E9",
+        "comparativeMeasure": Object {
+          "fill": "#000000",
+          "height": 12,
+          "opacity": 0.25,
+          "width": 1,
+        },
+        "progressBar": Object {
+          "height": 10,
+          "innerHeight": 6,
+          "widthPercent": 0.6,
+        },
+        "rangeColors": Object {
+          "bad": "#FF4D4F",
+          "good": "#29A294",
+          "satisfactory": "#FAAD14",
+        },
+      },
+      "interval": Object {
+        "fill": "#3471F9",
+        "height": 12,
+      },
+      "line": Object {
+        "linkLine": Object {
+          "fill": "#2C60D4",
+          "opacity": 0.6,
+          "size": 1.5,
+        },
+        "point": Object {
+          "fill": "#2C60D4",
+          "opacity": 1,
+          "size": 2.2,
+        },
+      },
+    },
+    "text": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#2C60D4",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+  },
+  "mergedCell": Object {
+    "bolderText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "linkTextFill": "#2C60D4",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#FFFFFF",
+      "backgroundColorOpacity": 1,
+      "crossBackgroundColor": "#F5F8FF",
+      "horizontalBorderColor": "#E1EAFE",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "interactionState": Object {
+        "highlight": Object {
+          "backgroundColor": "#87B5FF",
+          "backgroundOpacity": 1,
+        },
+        "hover": Object {
+          "backgroundColor": "#E1EAFE",
+          "backgroundOpacity": 0.6,
+        },
+        "hoverFocus": Object {
+          "backgroundColor": "#E1EAFE",
+          "backgroundOpacity": 0.6,
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "prepareSelect": Object {
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "searchResult": Object {
+          "backgroundColor": "#F0F7FF",
+          "backgroundOpacity": 1,
+        },
+        "selected": Object {
+          "backgroundColor": "#E1EAFE",
+          "backgroundOpacity": 0.6,
+        },
+        "unselected": Object {
+          "backgroundOpacity": 0.3,
+          "opacity": 0.3,
+          "textOpacity": 0.3,
+        },
+      },
+      "padding": Object {
+        "bottom": 8,
+        "left": 8,
+        "right": 8,
+        "top": 8,
+      },
+      "verticalBorderColor": "#E1EAFE",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#000000",
+      "margin": Object {
+        "left": 4,
+        "right": 4,
+      },
+      "size": 10,
+    },
+    "miniChart": Object {
+      "bar": Object {
+        "fill": "#2C60D4",
+        "intervalPadding": 4,
+        "opacity": 1,
+      },
+      "bullet": Object {
+        "backgroundColor": "#E9E9E9",
+        "comparativeMeasure": Object {
+          "fill": "#000000",
+          "height": 12,
+          "opacity": 0.25,
+          "width": 1,
+        },
+        "progressBar": Object {
+          "height": 10,
+          "innerHeight": 6,
+          "widthPercent": 0.6,
+        },
+        "rangeColors": Object {
+          "bad": "#FF4D4F",
+          "good": "#29A294",
+          "satisfactory": "#FAAD14",
+        },
+      },
+      "interval": Object {
+        "fill": "#3471F9",
+        "height": 12,
+      },
+      "line": Object {
+        "linkLine": Object {
+          "fill": "#2C60D4",
+          "opacity": 0.6,
+          "size": 1.5,
+        },
+        "point": Object {
+          "fill": "#2C60D4",
+          "opacity": 1,
+          "size": 2.2,
+        },
+      },
+    },
+    "text": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#2C60D4",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+  },
+  "prepareSelectMask": Object {
+    "backgroundColor": "#2C60D4",
+    "backgroundOpacity": 0.3,
+  },
+  "resizeArea": Object {
+    "background": "#3471F9",
+    "backgroundOpacity": 0,
+    "guideLineColor": "#3471F9",
+    "guideLineDash": Array [
+      3,
+      3,
+    ],
+    "guideLineDisableColor": "rgba(0,0,0,0.25)",
+    "interactionState": Object {
+      "hover": Object {
+        "backgroundColor": "#3471F9",
+        "backgroundOpacity": 1,
+      },
+    },
+    "size": 3,
+  },
+  "rowCell": Object {
+    "bolderText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "linkTextFill": "#2C60D4",
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#F5F8FF",
+      "backgroundColorOpacity": 1,
+      "horizontalBorderColor": "#E1EAFE",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "interactionState": Object {
+        "highlight": Object {
+          "backgroundColor": "#87B5FF",
+          "backgroundOpacity": 1,
+        },
+        "hover": Object {
+          "backgroundColor": "#E1EAFE",
+          "backgroundOpacity": 0.6,
+        },
+        "prepareSelect": Object {
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "searchResult": Object {
+          "backgroundColor": "#F0F7FF",
+          "backgroundOpacity": 1,
+        },
+        "selected": Object {
+          "backgroundColor": "#E1EAFE",
+          "backgroundOpacity": 0.6,
+        },
+        "unselected": Object {
+          "backgroundOpacity": 0.3,
+          "opacity": 0.3,
+          "textOpacity": 0.3,
+        },
+      },
+      "padding": Object {
+        "bottom": 4,
+        "left": 8,
+        "right": 8,
+        "top": 4,
+      },
+      "verticalBorderColor": "#E1EAFE",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#000000",
+      "margin": Object {
+        "left": 4,
+        "right": 4,
+      },
+      "size": 10,
+    },
+    "measureText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#2C60D4",
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
+    "seriesNumberWidth": 80,
+    "seriesText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#2C60D4",
+      "opacity": 1,
+      "textAlign": "center",
+      "textBaseline": "middle",
+    },
+    "text": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#2C60D4",
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
+  },
+  "scrollBar": Object {
+    "hoverSize": 8,
+    "lineCap": "round",
+    "size": 6,
+    "thumbColor": "rgba(0,0,0,0.15)",
+    "thumbHorizontalMinSize": 32,
+    "thumbHoverColor": "rgba(0,0,0,0.25)",
+    "thumbVerticalMinSize": 32,
+    "trackColor": "rgba(0,0,0,0.01)",
+  },
+  "splitLine": Object {
+    "horizontalBorderColor": "#3471F9",
+    "horizontalBorderColorOpacity": 0.2,
+    "horizontalBorderWidth": 2,
+    "shadowColors": Object {
+      "left": "rgba(0,0,0,0.1)",
+      "right": "rgba(0,0,0,0)",
+    },
+    "shadowWidth": 8,
+    "showShadow": true,
+    "verticalBorderColor": "#5286FA",
+    "verticalBorderColorOpacity": 0.25,
+    "verticalBorderWidth": 2,
+  },
+}
+`;
+
+exports[`SpreadSheet Theme Tests Theme Default Value Tests should get dark theme 1`] = `
+Object {
+  "background": Object {
+    "color": "#191919",
+    "opacity": 1,
+  },
+  "colCell": Object {
+    "bolderText": Object {
+      "fill": "#ffffff",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "center",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#133aad",
+      "backgroundColorOpacity": 1,
+      "horizontalBorderColor": "#0647b1",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "interactionState": Object {
+        "highlight": Object {
+          "backgroundColor": "#4b91ff",
+          "backgroundOpacity": 1,
+        },
+        "hover": Object {
+          "backgroundColor": "#213f94",
+          "backgroundOpacity": 0.6,
+        },
+        "prepareSelect": Object {
+          "borderColor": "#dcdcdc",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "searchResult": Object {
+          "backgroundColor": "#213f94",
+          "backgroundOpacity": 1,
+        },
+        "selected": Object {
+          "backgroundColor": "#213f94",
+          "backgroundOpacity": 0.6,
+        },
+        "unselected": Object {
+          "backgroundOpacity": 0.3,
+          "opacity": 0.3,
+          "textOpacity": 0.3,
+        },
+      },
+      "padding": Object {
+        "bottom": 4,
+        "left": 8,
+        "right": 8,
+        "top": 4,
+      },
+      "verticalBorderColor": "#0647b1",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#ffffff",
+      "margin": Object {
+        "bottom": 6,
+        "left": 4,
+        "right": 4,
+        "top": 6,
+      },
+      "size": 10,
+    },
+    "measureText": Object {
+      "fill": "#ffffff",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+    "text": Object {
+      "fill": "#ffffff",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "opacity": 1,
+      "textAlign": "center",
+      "textBaseline": "middle",
+    },
+  },
+  "cornerCell": Object {
+    "bolderText": Object {
+      "fill": "#ffffff",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#133aad",
+      "backgroundColorOpacity": 1,
+      "horizontalBorderColor": "#0647b1",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "padding": Object {
+        "bottom": 4,
+        "left": 8,
+        "right": 8,
+        "top": 4,
+      },
+      "verticalBorderColor": "#0647b1",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#ffffff",
+      "margin": Object {
+        "left": 4,
+        "right": 4,
+      },
+      "size": 10,
+    },
+    "text": Object {
+      "fill": "#ffffff",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+  },
+  "dataCell": Object {
+    "bolderText": Object {
+      "fill": "#f0f0f0",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "linkTextFill": "#4b91ff",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#191919",
+      "backgroundColorOpacity": 1,
+      "crossBackgroundColor": "#151a27",
+      "horizontalBorderColor": "#1e2436",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "interactionState": Object {
+        "highlight": Object {
+          "backgroundColor": "#4b91ff",
+          "backgroundOpacity": 1,
+        },
+        "hover": Object {
+          "backgroundColor": "#213f94",
+          "backgroundOpacity": 0.6,
+        },
+        "hoverFocus": Object {
+          "backgroundColor": "#213f94",
+          "backgroundOpacity": 0.6,
+          "borderColor": "#dcdcdc",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "prepareSelect": Object {
+          "borderColor": "#dcdcdc",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "searchResult": Object {
+          "backgroundColor": "#213f94",
+          "backgroundOpacity": 1,
+        },
+        "selected": Object {
+          "backgroundColor": "#213f94",
+          "backgroundOpacity": 0.6,
+        },
+        "unselected": Object {
+          "backgroundOpacity": 0.3,
+          "opacity": 0.3,
+          "textOpacity": 0.3,
+        },
+      },
+      "padding": Object {
+        "bottom": 8,
+        "left": 8,
+        "right": 8,
+        "top": 8,
+      },
+      "verticalBorderColor": "#1e2436",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#f0f0f0",
+      "margin": Object {
+        "left": 4,
+        "right": 4,
+      },
+      "size": 10,
+    },
+    "miniChart": Object {
+      "bar": Object {
+        "fill": "#4b91ff",
+        "intervalPadding": 4,
+        "opacity": 1,
+      },
+      "bullet": Object {
+        "backgroundColor": "#E9E9E9",
+        "comparativeMeasure": Object {
+          "fill": "#f0f0f0",
+          "height": 12,
+          "opacity": 0.25,
+          "width": 1,
+        },
+        "progressBar": Object {
+          "height": 10,
+          "innerHeight": 6,
+          "widthPercent": 0.6,
+        },
+        "rangeColors": Object {
+          "bad": "#FF4D4F",
+          "good": "#29A294",
+          "satisfactory": "#FAAD14",
+        },
+      },
+      "interval": Object {
+        "fill": "#4b91ff",
+        "height": 12,
+      },
+      "line": Object {
+        "linkLine": Object {
+          "fill": "#4b91ff",
+          "opacity": 0.6,
+          "size": 1.5,
+        },
+        "point": Object {
+          "fill": "#4b91ff",
+          "opacity": 1,
+          "size": 2.2,
+        },
+      },
+    },
+    "text": Object {
+      "fill": "#f0f0f0",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#4b91ff",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+  },
+  "mergedCell": Object {
+    "bolderText": Object {
+      "fill": "#f0f0f0",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "linkTextFill": "#4b91ff",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#191919",
+      "backgroundColorOpacity": 1,
+      "crossBackgroundColor": "#151a27",
+      "horizontalBorderColor": "#1e2436",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "interactionState": Object {
+        "highlight": Object {
+          "backgroundColor": "#4b91ff",
+          "backgroundOpacity": 1,
+        },
+        "hover": Object {
+          "backgroundColor": "#213f94",
+          "backgroundOpacity": 0.6,
+        },
+        "hoverFocus": Object {
+          "backgroundColor": "#213f94",
+          "backgroundOpacity": 0.6,
+          "borderColor": "#dcdcdc",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "prepareSelect": Object {
+          "borderColor": "#dcdcdc",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "searchResult": Object {
+          "backgroundColor": "#213f94",
+          "backgroundOpacity": 1,
+        },
+        "selected": Object {
+          "backgroundColor": "#213f94",
+          "backgroundOpacity": 0.6,
+        },
+        "unselected": Object {
+          "backgroundOpacity": 0.3,
+          "opacity": 0.3,
+          "textOpacity": 0.3,
+        },
+      },
+      "padding": Object {
+        "bottom": 8,
+        "left": 8,
+        "right": 8,
+        "top": 8,
+      },
+      "verticalBorderColor": "#1e2436",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#f0f0f0",
+      "margin": Object {
+        "left": 4,
+        "right": 4,
+      },
+      "size": 10,
+    },
+    "miniChart": Object {
+      "bar": Object {
+        "fill": "#4b91ff",
+        "intervalPadding": 4,
+        "opacity": 1,
+      },
+      "bullet": Object {
+        "backgroundColor": "#E9E9E9",
+        "comparativeMeasure": Object {
+          "fill": "#f0f0f0",
+          "height": 12,
+          "opacity": 0.25,
+          "width": 1,
+        },
+        "progressBar": Object {
+          "height": 10,
+          "innerHeight": 6,
+          "widthPercent": 0.6,
+        },
+        "rangeColors": Object {
+          "bad": "#FF4D4F",
+          "good": "#29A294",
+          "satisfactory": "#FAAD14",
+        },
+      },
+      "interval": Object {
+        "fill": "#4b91ff",
+        "height": 12,
+      },
+      "line": Object {
+        "linkLine": Object {
+          "fill": "#4b91ff",
+          "opacity": 0.6,
+          "size": 1.5,
+        },
+        "point": Object {
+          "fill": "#4b91ff",
+          "opacity": 1,
+          "size": 2.2,
+        },
+      },
+    },
+    "text": Object {
+      "fill": "#f0f0f0",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#4b91ff",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+  },
+  "prepareSelectMask": Object {
+    "backgroundColor": "#255dff",
+    "backgroundOpacity": 0.3,
+  },
+  "resizeArea": Object {
+    "background": "#4b91ff",
+    "backgroundOpacity": 0,
+    "guideLineColor": "#4b91ff",
+    "guideLineDash": Array [
+      3,
+      3,
+    ],
+    "guideLineDisableColor": "rgba(0,0,0,0.25)",
+    "interactionState": Object {
+      "hover": Object {
+        "backgroundColor": "#4b91ff",
+        "backgroundOpacity": 1,
+      },
+    },
+    "size": 3,
+  },
+  "rowCell": Object {
+    "bolderText": Object {
+      "fill": "#dcdcdc",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "linkTextFill": "#4b91ff",
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#151a27",
+      "backgroundColorOpacity": 1,
+      "horizontalBorderColor": "#1e2436",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "interactionState": Object {
+        "highlight": Object {
+          "backgroundColor": "#4b91ff",
+          "backgroundOpacity": 1,
+        },
+        "hover": Object {
+          "backgroundColor": "#213f94",
+          "backgroundOpacity": 0.6,
+        },
+        "prepareSelect": Object {
+          "borderColor": "#dcdcdc",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "searchResult": Object {
+          "backgroundColor": "#213f94",
+          "backgroundOpacity": 1,
+        },
+        "selected": Object {
+          "backgroundColor": "#213f94",
+          "backgroundOpacity": 0.6,
+        },
+        "unselected": Object {
+          "backgroundOpacity": 0.3,
+          "opacity": 0.3,
+          "textOpacity": 0.3,
+        },
+      },
+      "padding": Object {
+        "bottom": 4,
+        "left": 8,
+        "right": 8,
+        "top": 4,
+      },
+      "verticalBorderColor": "#1e2436",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#dcdcdc",
+      "margin": Object {
+        "left": 4,
+        "right": 4,
+      },
+      "size": 10,
+    },
+    "measureText": Object {
+      "fill": "#dcdcdc",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#4b91ff",
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
+    "seriesNumberWidth": 80,
+    "seriesText": Object {
+      "fill": "#dcdcdc",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#4b91ff",
+      "opacity": 1,
+      "textAlign": "center",
+      "textBaseline": "middle",
+    },
+    "text": Object {
+      "fill": "#dcdcdc",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#4b91ff",
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
+  },
+  "scrollBar": Object {
+    "hoverSize": 8,
+    "lineCap": "round",
+    "size": 6,
+    "thumbColor": "rgba(0,0,0,0.15)",
+    "thumbHorizontalMinSize": 32,
+    "thumbHoverColor": "rgba(0,0,0,0.25)",
+    "thumbVerticalMinSize": 32,
+    "trackColor": "rgba(0,0,0,0.01)",
+  },
+  "splitLine": Object {
+    "horizontalBorderColor": "#7899ff",
+    "horizontalBorderColorOpacity": 0.2,
+    "horizontalBorderWidth": 2,
+    "shadowColors": Object {
+      "left": "rgba(0,0,0,0.1)",
+      "right": "rgba(0,0,0,0)",
+    },
+    "shadowWidth": 8,
+    "showShadow": true,
+    "verticalBorderColor": "#7899ff",
+    "verticalBorderColorOpacity": 0.25,
+    "verticalBorderWidth": 2,
+  },
+}
+`;
+
 exports[`SpreadSheet Theme Tests Theme Default Value Tests should get default theme 1`] = `
 Object {
   "background": Object {
@@ -17,9 +1065,1057 @@ Object {
       "textBaseline": "middle",
     },
     "cell": Object {
-      "backgroundColor": "#E0E9FD",
+      "backgroundColor": "#E0E9FD",
+      "backgroundColorOpacity": 1,
+      "horizontalBorderColor": "#CCDBFC",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "interactionState": Object {
+        "highlight": Object {
+          "backgroundColor": "#87B5FF",
+          "backgroundOpacity": 1,
+        },
+        "hover": Object {
+          "backgroundColor": "#CCDBFC",
+          "backgroundOpacity": 0.6,
+        },
+        "prepareSelect": Object {
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "searchResult": Object {
+          "backgroundColor": "#F0F7FF",
+          "backgroundOpacity": 1,
+        },
+        "selected": Object {
+          "backgroundColor": "#CCDBFC",
+          "backgroundOpacity": 0.6,
+        },
+        "unselected": Object {
+          "backgroundOpacity": 0.3,
+          "opacity": 0.3,
+          "textOpacity": 0.3,
+        },
+      },
+      "padding": Object {
+        "bottom": 4,
+        "left": 8,
+        "right": 8,
+        "top": 4,
+      },
+      "verticalBorderColor": "#CCDBFC",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#000000",
+      "margin": Object {
+        "bottom": 6,
+        "left": 4,
+        "right": 4,
+        "top": 6,
+      },
+      "size": 10,
+    },
+    "measureText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+    "text": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "opacity": 1,
+      "textAlign": "center",
+      "textBaseline": "middle",
+    },
+  },
+  "cornerCell": Object {
+    "bolderText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#E0E9FD",
+      "backgroundColorOpacity": 1,
+      "horizontalBorderColor": "#CCDBFC",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "padding": Object {
+        "bottom": 4,
+        "left": 8,
+        "right": 8,
+        "top": 4,
+      },
+      "verticalBorderColor": "#CCDBFC",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#000000",
+      "margin": Object {
+        "left": 4,
+        "right": 4,
+      },
+      "size": 10,
+    },
+    "text": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+  },
+  "dataCell": Object {
+    "bolderText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "linkTextFill": "#326EF4",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#FFFFFF",
+      "backgroundColorOpacity": 1,
+      "crossBackgroundColor": "#F5F8FE",
+      "horizontalBorderColor": "#E0E9FD",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "interactionState": Object {
+        "highlight": Object {
+          "backgroundColor": "#87B5FF",
+          "backgroundOpacity": 1,
+        },
+        "hover": Object {
+          "backgroundColor": "#E0E9FD",
+          "backgroundOpacity": 0.6,
+        },
+        "hoverFocus": Object {
+          "backgroundColor": "#E0E9FD",
+          "backgroundOpacity": 0.6,
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "prepareSelect": Object {
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "searchResult": Object {
+          "backgroundColor": "#F0F7FF",
+          "backgroundOpacity": 1,
+        },
+        "selected": Object {
+          "backgroundColor": "#E0E9FD",
+          "backgroundOpacity": 0.6,
+        },
+        "unselected": Object {
+          "backgroundOpacity": 0.3,
+          "opacity": 0.3,
+          "textOpacity": 0.3,
+        },
+      },
+      "padding": Object {
+        "bottom": 8,
+        "left": 8,
+        "right": 8,
+        "top": 8,
+      },
+      "verticalBorderColor": "#E0E9FD",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#000000",
+      "margin": Object {
+        "left": 4,
+        "right": 4,
+      },
+      "size": 10,
+    },
+    "miniChart": Object {
+      "bar": Object {
+        "fill": "#326EF4",
+        "intervalPadding": 4,
+        "opacity": 1,
+      },
+      "bullet": Object {
+        "backgroundColor": "#E9E9E9",
+        "comparativeMeasure": Object {
+          "fill": "#000000",
+          "height": 12,
+          "opacity": 0.25,
+          "width": 1,
+        },
+        "progressBar": Object {
+          "height": 10,
+          "innerHeight": 6,
+          "widthPercent": 0.6,
+        },
+        "rangeColors": Object {
+          "bad": "#FF4D4F",
+          "good": "#29A294",
+          "satisfactory": "#FAAD14",
+        },
+      },
+      "interval": Object {
+        "fill": "#326EF4",
+        "height": 12,
+      },
+      "line": Object {
+        "linkLine": Object {
+          "fill": "#326EF4",
+          "opacity": 0.6,
+          "size": 1.5,
+        },
+        "point": Object {
+          "fill": "#326EF4",
+          "opacity": 1,
+          "size": 2.2,
+        },
+      },
+    },
+    "text": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#326EF4",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+  },
+  "mergedCell": Object {
+    "bolderText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "linkTextFill": "#326EF4",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#FFFFFF",
+      "backgroundColorOpacity": 1,
+      "crossBackgroundColor": "#F5F8FE",
+      "horizontalBorderColor": "#E0E9FD",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "interactionState": Object {
+        "highlight": Object {
+          "backgroundColor": "#87B5FF",
+          "backgroundOpacity": 1,
+        },
+        "hover": Object {
+          "backgroundColor": "#E0E9FD",
+          "backgroundOpacity": 0.6,
+        },
+        "hoverFocus": Object {
+          "backgroundColor": "#E0E9FD",
+          "backgroundOpacity": 0.6,
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "prepareSelect": Object {
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "searchResult": Object {
+          "backgroundColor": "#F0F7FF",
+          "backgroundOpacity": 1,
+        },
+        "selected": Object {
+          "backgroundColor": "#E0E9FD",
+          "backgroundOpacity": 0.6,
+        },
+        "unselected": Object {
+          "backgroundOpacity": 0.3,
+          "opacity": 0.3,
+          "textOpacity": 0.3,
+        },
+      },
+      "padding": Object {
+        "bottom": 8,
+        "left": 8,
+        "right": 8,
+        "top": 8,
+      },
+      "verticalBorderColor": "#E0E9FD",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#000000",
+      "margin": Object {
+        "left": 4,
+        "right": 4,
+      },
+      "size": 10,
+    },
+    "miniChart": Object {
+      "bar": Object {
+        "fill": "#326EF4",
+        "intervalPadding": 4,
+        "opacity": 1,
+      },
+      "bullet": Object {
+        "backgroundColor": "#E9E9E9",
+        "comparativeMeasure": Object {
+          "fill": "#000000",
+          "height": 12,
+          "opacity": 0.25,
+          "width": 1,
+        },
+        "progressBar": Object {
+          "height": 10,
+          "innerHeight": 6,
+          "widthPercent": 0.6,
+        },
+        "rangeColors": Object {
+          "bad": "#FF4D4F",
+          "good": "#29A294",
+          "satisfactory": "#FAAD14",
+        },
+      },
+      "interval": Object {
+        "fill": "#326EF4",
+        "height": 12,
+      },
+      "line": Object {
+        "linkLine": Object {
+          "fill": "#326EF4",
+          "opacity": 0.6,
+          "size": 1.5,
+        },
+        "point": Object {
+          "fill": "#326EF4",
+          "opacity": 1,
+          "size": 2.2,
+        },
+      },
+    },
+    "text": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#326EF4",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+  },
+  "prepareSelectMask": Object {
+    "backgroundColor": "#234DAB",
+    "backgroundOpacity": 0.3,
+  },
+  "resizeArea": Object {
+    "background": "#326EF4",
+    "backgroundOpacity": 0,
+    "guideLineColor": "#326EF4",
+    "guideLineDash": Array [
+      3,
+      3,
+    ],
+    "guideLineDisableColor": "rgba(0,0,0,0.25)",
+    "interactionState": Object {
+      "hover": Object {
+        "backgroundColor": "#326EF4",
+        "backgroundOpacity": 1,
+      },
+    },
+    "size": 3,
+  },
+  "rowCell": Object {
+    "bolderText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "linkTextFill": "#326EF4",
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#F5F8FE",
+      "backgroundColorOpacity": 1,
+      "horizontalBorderColor": "#E0E9FD",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "interactionState": Object {
+        "highlight": Object {
+          "backgroundColor": "#87B5FF",
+          "backgroundOpacity": 1,
+        },
+        "hover": Object {
+          "backgroundColor": "#E0E9FD",
+          "backgroundOpacity": 0.6,
+        },
+        "prepareSelect": Object {
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "searchResult": Object {
+          "backgroundColor": "#F0F7FF",
+          "backgroundOpacity": 1,
+        },
+        "selected": Object {
+          "backgroundColor": "#E0E9FD",
+          "backgroundOpacity": 0.6,
+        },
+        "unselected": Object {
+          "backgroundOpacity": 0.3,
+          "opacity": 0.3,
+          "textOpacity": 0.3,
+        },
+      },
+      "padding": Object {
+        "bottom": 4,
+        "left": 8,
+        "right": 8,
+        "top": 4,
+      },
+      "verticalBorderColor": "#E0E9FD",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#000000",
+      "margin": Object {
+        "left": 4,
+        "right": 4,
+      },
+      "size": 10,
+    },
+    "measureText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#326EF4",
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
+    "seriesNumberWidth": 80,
+    "seriesText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#326EF4",
+      "opacity": 1,
+      "textAlign": "center",
+      "textBaseline": "middle",
+    },
+    "text": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#326EF4",
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
+  },
+  "scrollBar": Object {
+    "hoverSize": 8,
+    "lineCap": "round",
+    "size": 6,
+    "thumbColor": "rgba(0,0,0,0.15)",
+    "thumbHorizontalMinSize": 32,
+    "thumbHoverColor": "rgba(0,0,0,0.25)",
+    "thumbVerticalMinSize": 32,
+    "trackColor": "rgba(0,0,0,0.01)",
+  },
+  "splitLine": Object {
+    "horizontalBorderColor": "#326EF4",
+    "horizontalBorderColorOpacity": 0.2,
+    "horizontalBorderWidth": 2,
+    "shadowColors": Object {
+      "left": "rgba(0,0,0,0.1)",
+      "right": "rgba(0,0,0,0)",
+    },
+    "shadowWidth": 8,
+    "showShadow": true,
+    "verticalBorderColor": "#326EF4",
+    "verticalBorderColorOpacity": 0.25,
+    "verticalBorderWidth": 2,
+  },
+}
+`;
+
+exports[`SpreadSheet Theme Tests Theme Default Value Tests should get default theme 2`] = `
+Object {
+  "background": Object {
+    "color": "#FFFFFF",
+    "opacity": 1,
+  },
+  "colCell": Object {
+    "bolderText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "center",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#E0E9FD",
+      "backgroundColorOpacity": 1,
+      "horizontalBorderColor": "#CCDBFC",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "interactionState": Object {
+        "highlight": Object {
+          "backgroundColor": "#87B5FF",
+          "backgroundOpacity": 1,
+        },
+        "hover": Object {
+          "backgroundColor": "#CCDBFC",
+          "backgroundOpacity": 0.6,
+        },
+        "prepareSelect": Object {
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "searchResult": Object {
+          "backgroundColor": "#F0F7FF",
+          "backgroundOpacity": 1,
+        },
+        "selected": Object {
+          "backgroundColor": "#CCDBFC",
+          "backgroundOpacity": 0.6,
+        },
+        "unselected": Object {
+          "backgroundOpacity": 0.3,
+          "opacity": 0.3,
+          "textOpacity": 0.3,
+        },
+      },
+      "padding": Object {
+        "bottom": 4,
+        "left": 8,
+        "right": 8,
+        "top": 4,
+      },
+      "verticalBorderColor": "#CCDBFC",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#000000",
+      "margin": Object {
+        "bottom": 6,
+        "left": 4,
+        "right": 4,
+        "top": 6,
+      },
+      "size": 10,
+    },
+    "measureText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+    "text": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "opacity": 1,
+      "textAlign": "center",
+      "textBaseline": "middle",
+    },
+  },
+  "cornerCell": Object {
+    "bolderText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#E0E9FD",
+      "backgroundColorOpacity": 1,
+      "horizontalBorderColor": "#CCDBFC",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "padding": Object {
+        "bottom": 4,
+        "left": 8,
+        "right": 8,
+        "top": 4,
+      },
+      "verticalBorderColor": "#CCDBFC",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#000000",
+      "margin": Object {
+        "left": 4,
+        "right": 4,
+      },
+      "size": 10,
+    },
+    "text": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+  },
+  "dataCell": Object {
+    "bolderText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "linkTextFill": "#326EF4",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#FFFFFF",
+      "backgroundColorOpacity": 1,
+      "crossBackgroundColor": "#F5F8FE",
+      "horizontalBorderColor": "#E0E9FD",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "interactionState": Object {
+        "highlight": Object {
+          "backgroundColor": "#87B5FF",
+          "backgroundOpacity": 1,
+        },
+        "hover": Object {
+          "backgroundColor": "#E0E9FD",
+          "backgroundOpacity": 0.6,
+        },
+        "hoverFocus": Object {
+          "backgroundColor": "#E0E9FD",
+          "backgroundOpacity": 0.6,
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "prepareSelect": Object {
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "searchResult": Object {
+          "backgroundColor": "#F0F7FF",
+          "backgroundOpacity": 1,
+        },
+        "selected": Object {
+          "backgroundColor": "#E0E9FD",
+          "backgroundOpacity": 0.6,
+        },
+        "unselected": Object {
+          "backgroundOpacity": 0.3,
+          "opacity": 0.3,
+          "textOpacity": 0.3,
+        },
+      },
+      "padding": Object {
+        "bottom": 8,
+        "left": 8,
+        "right": 8,
+        "top": 8,
+      },
+      "verticalBorderColor": "#E0E9FD",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#000000",
+      "margin": Object {
+        "left": 4,
+        "right": 4,
+      },
+      "size": 10,
+    },
+    "miniChart": Object {
+      "bar": Object {
+        "fill": "#326EF4",
+        "intervalPadding": 4,
+        "opacity": 1,
+      },
+      "bullet": Object {
+        "backgroundColor": "#E9E9E9",
+        "comparativeMeasure": Object {
+          "fill": "#000000",
+          "height": 12,
+          "opacity": 0.25,
+          "width": 1,
+        },
+        "progressBar": Object {
+          "height": 10,
+          "innerHeight": 6,
+          "widthPercent": 0.6,
+        },
+        "rangeColors": Object {
+          "bad": "#FF4D4F",
+          "good": "#29A294",
+          "satisfactory": "#FAAD14",
+        },
+      },
+      "interval": Object {
+        "fill": "#326EF4",
+        "height": 12,
+      },
+      "line": Object {
+        "linkLine": Object {
+          "fill": "#326EF4",
+          "opacity": 0.6,
+          "size": 1.5,
+        },
+        "point": Object {
+          "fill": "#326EF4",
+          "opacity": 1,
+          "size": 2.2,
+        },
+      },
+    },
+    "text": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#326EF4",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+  },
+  "mergedCell": Object {
+    "bolderText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "linkTextFill": "#326EF4",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#FFFFFF",
+      "backgroundColorOpacity": 1,
+      "crossBackgroundColor": "#F5F8FE",
+      "horizontalBorderColor": "#E0E9FD",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "interactionState": Object {
+        "highlight": Object {
+          "backgroundColor": "#87B5FF",
+          "backgroundOpacity": 1,
+        },
+        "hover": Object {
+          "backgroundColor": "#E0E9FD",
+          "backgroundOpacity": 0.6,
+        },
+        "hoverFocus": Object {
+          "backgroundColor": "#E0E9FD",
+          "backgroundOpacity": 0.6,
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "prepareSelect": Object {
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "searchResult": Object {
+          "backgroundColor": "#F0F7FF",
+          "backgroundOpacity": 1,
+        },
+        "selected": Object {
+          "backgroundColor": "#E0E9FD",
+          "backgroundOpacity": 0.6,
+        },
+        "unselected": Object {
+          "backgroundOpacity": 0.3,
+          "opacity": 0.3,
+          "textOpacity": 0.3,
+        },
+      },
+      "padding": Object {
+        "bottom": 8,
+        "left": 8,
+        "right": 8,
+        "top": 8,
+      },
+      "verticalBorderColor": "#E0E9FD",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#000000",
+      "margin": Object {
+        "left": 4,
+        "right": 4,
+      },
+      "size": 10,
+    },
+    "miniChart": Object {
+      "bar": Object {
+        "fill": "#326EF4",
+        "intervalPadding": 4,
+        "opacity": 1,
+      },
+      "bullet": Object {
+        "backgroundColor": "#E9E9E9",
+        "comparativeMeasure": Object {
+          "fill": "#000000",
+          "height": 12,
+          "opacity": 0.25,
+          "width": 1,
+        },
+        "progressBar": Object {
+          "height": 10,
+          "innerHeight": 6,
+          "widthPercent": 0.6,
+        },
+        "rangeColors": Object {
+          "bad": "#FF4D4F",
+          "good": "#29A294",
+          "satisfactory": "#FAAD14",
+        },
+      },
+      "interval": Object {
+        "fill": "#326EF4",
+        "height": 12,
+      },
+      "line": Object {
+        "linkLine": Object {
+          "fill": "#326EF4",
+          "opacity": 0.6,
+          "size": 1.5,
+        },
+        "point": Object {
+          "fill": "#326EF4",
+          "opacity": 1,
+          "size": 2.2,
+        },
+      },
+    },
+    "text": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#326EF4",
+      "opacity": 1,
+      "textAlign": "right",
+      "textBaseline": "middle",
+    },
+  },
+  "prepareSelectMask": Object {
+    "backgroundColor": "#234DAB",
+    "backgroundOpacity": 0.3,
+  },
+  "resizeArea": Object {
+    "background": "#326EF4",
+    "backgroundOpacity": 0,
+    "guideLineColor": "#326EF4",
+    "guideLineDash": Array [
+      3,
+      3,
+    ],
+    "guideLineDisableColor": "rgba(0,0,0,0.25)",
+    "interactionState": Object {
+      "hover": Object {
+        "backgroundColor": "#326EF4",
+        "backgroundOpacity": 1,
+      },
+    },
+    "size": 3,
+  },
+  "rowCell": Object {
+    "bolderText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "linkTextFill": "#326EF4",
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#F5F8FE",
+      "backgroundColorOpacity": 1,
+      "horizontalBorderColor": "#E0E9FD",
+      "horizontalBorderColorOpacity": 1,
+      "horizontalBorderWidth": 1,
+      "interactionState": Object {
+        "highlight": Object {
+          "backgroundColor": "#87B5FF",
+          "backgroundOpacity": 1,
+        },
+        "hover": Object {
+          "backgroundColor": "#E0E9FD",
+          "backgroundOpacity": 0.6,
+        },
+        "prepareSelect": Object {
+          "borderColor": "#000000",
+          "borderOpacity": 1,
+          "borderWidth": 1,
+        },
+        "searchResult": Object {
+          "backgroundColor": "#F0F7FF",
+          "backgroundOpacity": 1,
+        },
+        "selected": Object {
+          "backgroundColor": "#E0E9FD",
+          "backgroundOpacity": 0.6,
+        },
+        "unselected": Object {
+          "backgroundOpacity": 0.3,
+          "opacity": 0.3,
+          "textOpacity": 0.3,
+        },
+      },
+      "padding": Object {
+        "bottom": 4,
+        "left": 8,
+        "right": 8,
+        "top": 4,
+      },
+      "verticalBorderColor": "#E0E9FD",
+      "verticalBorderColorOpacity": 1,
+      "verticalBorderWidth": 1,
+    },
+    "icon": Object {
+      "fill": "#000000",
+      "margin": Object {
+        "left": 4,
+        "right": 4,
+      },
+      "size": 10,
+    },
+    "measureText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#326EF4",
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
+    "seriesNumberWidth": 80,
+    "seriesText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#326EF4",
+      "opacity": 1,
+      "textAlign": "center",
+      "textBaseline": "middle",
+    },
+    "text": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": "normal",
+      "linkTextFill": "#326EF4",
+      "opacity": 1,
+      "textAlign": "left",
+      "textBaseline": "middle",
+    },
+  },
+  "scrollBar": Object {
+    "hoverSize": 8,
+    "lineCap": "round",
+    "size": 6,
+    "thumbColor": "rgba(0,0,0,0.15)",
+    "thumbHorizontalMinSize": 32,
+    "thumbHoverColor": "rgba(0,0,0,0.25)",
+    "thumbVerticalMinSize": 32,
+    "trackColor": "rgba(0,0,0,0.01)",
+  },
+  "splitLine": Object {
+    "horizontalBorderColor": "#326EF4",
+    "horizontalBorderColorOpacity": 0.2,
+    "horizontalBorderWidth": 2,
+    "shadowColors": Object {
+      "left": "rgba(0,0,0,0.1)",
+      "right": "rgba(0,0,0,0)",
+    },
+    "shadowWidth": 8,
+    "showShadow": true,
+    "verticalBorderColor": "#326EF4",
+    "verticalBorderColorOpacity": 0.25,
+    "verticalBorderWidth": 2,
+  },
+}
+`;
+
+exports[`SpreadSheet Theme Tests Theme Default Value Tests should get gray theme 1`] = `
+Object {
+  "background": Object {
+    "color": "#FFFFFF",
+    "opacity": 1,
+  },
+  "colCell": Object {
+    "bolderText": Object {
+      "fill": "#000000",
+      "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
+      "fontSize": 12,
+      "fontWeight": 700,
+      "opacity": 1,
+      "textAlign": "center",
+      "textBaseline": "middle",
+    },
+    "cell": Object {
+      "backgroundColor": "#F0F2F4",
       "backgroundColorOpacity": 1,
-      "horizontalBorderColor": "#CCDBFC",
+      "horizontalBorderColor": "#E7E9ED",
       "horizontalBorderColorOpacity": 1,
       "horizontalBorderWidth": 1,
       "interactionState": Object {
@@ -28,7 +2124,7 @@ Object {
           "backgroundOpacity": 1,
         },
         "hover": Object {
-          "backgroundColor": "#CCDBFC",
+          "backgroundColor": "#E7E9ED",
           "backgroundOpacity": 0.6,
         },
         "prepareSelect": Object {
@@ -41,7 +2137,7 @@ Object {
           "backgroundOpacity": 1,
         },
         "selected": Object {
-          "backgroundColor": "#CCDBFC",
+          "backgroundColor": "#E7E9ED",
           "backgroundOpacity": 0.6,
         },
         "unselected": Object {
@@ -56,7 +2152,7 @@ Object {
         "right": 8,
         "top": 4,
       },
-      "verticalBorderColor": "#CCDBFC",
+      "verticalBorderColor": "#E7E9ED",
       "verticalBorderColorOpacity": 1,
       "verticalBorderWidth": 1,
     },
@@ -100,9 +2196,9 @@ Object {
       "textBaseline": "middle",
     },
     "cell": Object {
-      "backgroundColor": "#E0E9FD",
+      "backgroundColor": "#F0F2F4",
       "backgroundColorOpacity": 1,
-      "horizontalBorderColor": "#CCDBFC",
+      "horizontalBorderColor": "#E7E9ED",
       "horizontalBorderColorOpacity": 1,
       "horizontalBorderWidth": 1,
       "padding": Object {
@@ -111,7 +2207,7 @@ Object {
         "right": 8,
         "top": 4,
       },
-      "verticalBorderColor": "#CCDBFC",
+      "verticalBorderColor": "#E7E9ED",
       "verticalBorderColorOpacity": 1,
       "verticalBorderWidth": 1,
     },
@@ -139,7 +2235,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "linkTextFill": "#326EF4",
+      "linkTextFill": "#565C64",
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
@@ -147,8 +2243,8 @@ Object {
     "cell": Object {
       "backgroundColor": "#FFFFFF",
       "backgroundColorOpacity": 1,
-      "crossBackgroundColor": "#F5F8FE",
-      "horizontalBorderColor": "#E0E9FD",
+      "crossBackgroundColor": "#FAFBFB",
+      "horizontalBorderColor": "#F0F2F4",
       "horizontalBorderColorOpacity": 1,
       "horizontalBorderWidth": 1,
       "interactionState": Object {
@@ -157,11 +2253,11 @@ Object {
           "backgroundOpacity": 1,
         },
         "hover": Object {
-          "backgroundColor": "#E0E9FD",
+          "backgroundColor": "#F0F2F4",
           "backgroundOpacity": 0.6,
         },
         "hoverFocus": Object {
-          "backgroundColor": "#E0E9FD",
+          "backgroundColor": "#F0F2F4",
           "backgroundOpacity": 0.6,
           "borderColor": "#000000",
           "borderOpacity": 1,
@@ -177,7 +2273,7 @@ Object {
           "backgroundOpacity": 1,
         },
         "selected": Object {
-          "backgroundColor": "#E0E9FD",
+          "backgroundColor": "#F0F2F4",
           "backgroundOpacity": 0.6,
         },
         "unselected": Object {
@@ -192,7 +2288,7 @@ Object {
         "right": 8,
         "top": 8,
       },
-      "verticalBorderColor": "#E0E9FD",
+      "verticalBorderColor": "#F0F2F4",
       "verticalBorderColorOpacity": 1,
       "verticalBorderWidth": 1,
     },
@@ -206,7 +2302,7 @@ Object {
     },
     "miniChart": Object {
       "bar": Object {
-        "fill": "#326EF4",
+        "fill": "#565C64",
         "intervalPadding": 4,
         "opacity": 1,
       },
@@ -230,17 +2326,17 @@ Object {
         },
       },
       "interval": Object {
-        "fill": "#326EF4",
+        "fill": "#9DA7B6",
         "height": 12,
       },
       "line": Object {
         "linkLine": Object {
-          "fill": "#326EF4",
+          "fill": "#565C64",
           "opacity": 0.6,
           "size": 1.5,
         },
         "point": Object {
-          "fill": "#326EF4",
+          "fill": "#565C64",
           "opacity": 1,
           "size": 2.2,
         },
@@ -251,7 +2347,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "linkTextFill": "#326EF4",
+      "linkTextFill": "#565C64",
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
@@ -263,7 +2359,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "linkTextFill": "#326EF4",
+      "linkTextFill": "#565C64",
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
@@ -271,8 +2367,8 @@ Object {
     "cell": Object {
       "backgroundColor": "#FFFFFF",
       "backgroundColorOpacity": 1,
-      "crossBackgroundColor": "#F5F8FE",
-      "horizontalBorderColor": "#E0E9FD",
+      "crossBackgroundColor": "#FAFBFB",
+      "horizontalBorderColor": "#F0F2F4",
       "horizontalBorderColorOpacity": 1,
       "horizontalBorderWidth": 1,
       "interactionState": Object {
@@ -281,11 +2377,11 @@ Object {
           "backgroundOpacity": 1,
         },
         "hover": Object {
-          "backgroundColor": "#E0E9FD",
+          "backgroundColor": "#F0F2F4",
           "backgroundOpacity": 0.6,
         },
         "hoverFocus": Object {
-          "backgroundColor": "#E0E9FD",
+          "backgroundColor": "#F0F2F4",
           "backgroundOpacity": 0.6,
           "borderColor": "#000000",
           "borderOpacity": 1,
@@ -301,7 +2397,7 @@ Object {
           "backgroundOpacity": 1,
         },
         "selected": Object {
-          "backgroundColor": "#E0E9FD",
+          "backgroundColor": "#F0F2F4",
           "backgroundOpacity": 0.6,
         },
         "unselected": Object {
@@ -316,7 +2412,7 @@ Object {
         "right": 8,
         "top": 8,
       },
-      "verticalBorderColor": "#E0E9FD",
+      "verticalBorderColor": "#F0F2F4",
       "verticalBorderColorOpacity": 1,
       "verticalBorderWidth": 1,
     },
@@ -330,7 +2426,7 @@ Object {
     },
     "miniChart": Object {
       "bar": Object {
-        "fill": "#326EF4",
+        "fill": "#565C64",
         "intervalPadding": 4,
         "opacity": 1,
       },
@@ -354,17 +2450,17 @@ Object {
         },
       },
       "interval": Object {
-        "fill": "#326EF4",
+        "fill": "#9DA7B6",
         "height": 12,
       },
       "line": Object {
         "linkLine": Object {
-          "fill": "#326EF4",
+          "fill": "#565C64",
           "opacity": 0.6,
           "size": 1.5,
         },
         "point": Object {
-          "fill": "#326EF4",
+          "fill": "#565C64",
           "opacity": 1,
           "size": 2.2,
         },
@@ -375,20 +2471,20 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "linkTextFill": "#326EF4",
+      "linkTextFill": "#565C64",
       "opacity": 1,
       "textAlign": "right",
       "textBaseline": "middle",
     },
   },
   "prepareSelectMask": Object {
-    "backgroundColor": "#234DAB",
+    "backgroundColor": "#6E757F",
     "backgroundOpacity": 0.3,
   },
   "resizeArea": Object {
-    "background": "#326EF4",
+    "background": "#9DA7B6",
     "backgroundOpacity": 0,
-    "guideLineColor": "#326EF4",
+    "guideLineColor": "#9DA7B6",
     "guideLineDash": Array [
       3,
       3,
@@ -396,7 +2492,7 @@ Object {
     "guideLineDisableColor": "rgba(0,0,0,0.25)",
     "interactionState": Object {
       "hover": Object {
-        "backgroundColor": "#326EF4",
+        "backgroundColor": "#9DA7B6",
         "backgroundOpacity": 1,
       },
     },
@@ -408,15 +2504,15 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": 700,
-      "linkTextFill": "#326EF4",
+      "linkTextFill": "#565C64",
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
     },
     "cell": Object {
-      "backgroundColor": "#F5F8FE",
+      "backgroundColor": "#FAFBFB",
       "backgroundColorOpacity": 1,
-      "horizontalBorderColor": "#E0E9FD",
+      "horizontalBorderColor": "#F0F2F4",
       "horizontalBorderColorOpacity": 1,
       "horizontalBorderWidth": 1,
       "interactionState": Object {
@@ -425,7 +2521,7 @@ Object {
           "backgroundOpacity": 1,
         },
         "hover": Object {
-          "backgroundColor": "#E0E9FD",
+          "backgroundColor": "#F0F2F4",
           "backgroundOpacity": 0.6,
         },
         "prepareSelect": Object {
@@ -438,7 +2534,7 @@ Object {
           "backgroundOpacity": 1,
         },
         "selected": Object {
-          "backgroundColor": "#E0E9FD",
+          "backgroundColor": "#F0F2F4",
           "backgroundOpacity": 0.6,
         },
         "unselected": Object {
@@ -453,7 +2549,7 @@ Object {
         "right": 8,
         "top": 4,
       },
-      "verticalBorderColor": "#E0E9FD",
+      "verticalBorderColor": "#F0F2F4",
       "verticalBorderColorOpacity": 1,
       "verticalBorderWidth": 1,
     },
@@ -470,7 +2566,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "linkTextFill": "#326EF4",
+      "linkTextFill": "#565C64",
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
@@ -481,7 +2577,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "linkTextFill": "#326EF4",
+      "linkTextFill": "#565C64",
       "opacity": 1,
       "textAlign": "center",
       "textBaseline": "middle",
@@ -491,7 +2587,7 @@ Object {
       "fontFamily": "Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif",
       "fontSize": 12,
       "fontWeight": "normal",
-      "linkTextFill": "#326EF4",
+      "linkTextFill": "#565C64",
       "opacity": 1,
       "textAlign": "left",
       "textBaseline": "middle",
@@ -508,7 +2604,7 @@ Object {
     "trackColor": "rgba(0,0,0,0.01)",
   },
   "splitLine": Object {
-    "horizontalBorderColor": "#326EF4",
+    "horizontalBorderColor": "#BAC1CC",
     "horizontalBorderColorOpacity": 0.2,
     "horizontalBorderWidth": 2,
     "shadowColors": Object {
@@ -517,7 +2613,7 @@ Object {
     },
     "shadowWidth": 8,
     "showShadow": true,
-    "verticalBorderColor": "#326EF4",
+    "verticalBorderColor": "#BAC1CC",
     "verticalBorderColorOpacity": 0.25,
     "verticalBorderWidth": 2,
   },
diff --git a/packages/s2-core/__tests__/spreadsheet/theme-spec.ts b/packages/s2-core/__tests__/spreadsheet/theme-spec.ts
index ab7f8c6a9e..950807e4d7 100644
--- a/packages/s2-core/__tests__/spreadsheet/theme-spec.ts
+++ b/packages/s2-core/__tests__/spreadsheet/theme-spec.ts
@@ -13,6 +13,7 @@ import type {
   TextBaseline,
   TextTheme,
   ThemeCfg,
+  ThemeName,
 } from '@/common/interface/theme';
 import type { Node } from '@/facet/layout/node';
 import type { PivotSheet } from '@/sheet-type';
@@ -66,6 +67,17 @@ describe('SpreadSheet Theme Tests', () => {
       expect(s2.theme).toEqual(s2.getTheme());
     });
 
+    test.each(['dark', 'gray', 'colorful', 'default'] as ThemeName[])(
+      'should get %s theme',
+      (name) => {
+        s2.setThemeCfg({
+          name,
+        });
+
+        expect(s2.theme).toMatchSnapshot();
+      },
+    );
+
     test.each(CELL_TYPES)(
       "should assign the same color for %s's text and icon",
       async (cellType: CellType) => {
diff --git a/packages/s2-core/src/theme/palette/dark.ts b/packages/s2-core/src/theme/palette/dark.ts
index 5f3894f559..c809ced41e 100644
--- a/packages/s2-core/src/theme/palette/dark.ts
+++ b/packages/s2-core/src/theme/palette/dark.ts
@@ -18,7 +18,7 @@ export const paletteDark: Palette = {
     '#7899ff',
     '#7899ff',
     '#f0f0f0',
-    '#ffffff',
+    '#dcdcdc',
   ],
   semanticColors: { red: '#FF4D4F', green: '#29A294', yellow: '#FAAD14' },
 };
diff --git a/packages/s2-react/__tests__/spreadsheet/__snapshots__/pagination-spec.tsx.snap b/packages/s2-react/__tests__/spreadsheet/__snapshots__/pagination-spec.tsx.snap
deleted file mode 100644
index ff010406a7..0000000000
--- a/packages/s2-react/__tests__/spreadsheet/__snapshots__/pagination-spec.tsx.snap
+++ /dev/null
@@ -1,769 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Pagination Tests should receive antd <Pagination/> component extra props 1`] = `
-<div
-  class="antv-s2-pagination"
->
-  <ul
-    class="ant-pagination ant-pagination-mini css-dev-only-do-not-override-1adbn6x"
-  >
-    <li
-      aria-disabled="false"
-      class="ant-pagination-prev"
-      tabindex="0"
-      title="Previous Page"
-    >
-      <button
-        class="ant-pagination-item-link"
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </li>
-    <li
-      class="ant-pagination-item ant-pagination-item-1"
-      tabindex="0"
-      title="1"
-    >
-      <a
-        rel="nofollow"
-      >
-        1
-      </a>
-    </li>
-    <li
-      class="ant-pagination-item ant-pagination-item-2 ant-pagination-item-active"
-      tabindex="0"
-      title="2"
-    >
-      <a
-        rel="nofollow"
-      >
-        2
-      </a>
-    </li>
-    <li
-      aria-disabled="true"
-      class="ant-pagination-next ant-pagination-disabled"
-      title="Next Page"
-    >
-      <button
-        class="ant-pagination-item-link"
-        disabled=""
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-    </li>
-    <li
-      class="ant-pagination-options"
-    >
-      <div
-        class="ant-pagination-options-quick-jumper"
-      >
-        Go to
-        <input
-          aria-label="Page"
-          type="text"
-          value=""
-        />
-        Page
-      </div>
-    </li>
-  </ul>
-  <span
-    class="antv-s2-pagination-count"
-    title="Total2"
-  >
-    Total
-    2
-  </span>
-</div>
-`;
-
-exports[`Pagination Tests should render locale text for { locale: 'en_US', page: '1 / page', count: 'Total2' } 1`] = `
-<div
-  class="antv-s2-pagination"
->
-  <ul
-    class="ant-pagination ant-pagination-mini css-dev-only-do-not-override-1adbn6x"
-  >
-    <li
-      aria-disabled="true"
-      class="ant-pagination-prev ant-pagination-disabled"
-      title="Previous Page"
-    >
-      <button
-        class="ant-pagination-item-link"
-        disabled=""
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </li>
-    <li
-      class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-      tabindex="0"
-      title="1"
-    >
-      <a
-        rel="nofollow"
-      >
-        1
-      </a>
-    </li>
-    <li
-      class="ant-pagination-item ant-pagination-item-2"
-      tabindex="0"
-      title="2"
-    >
-      <a
-        rel="nofollow"
-      >
-        2
-      </a>
-    </li>
-    <li
-      aria-disabled="false"
-      class="ant-pagination-next"
-      tabindex="0"
-      title="Next Page"
-    >
-      <button
-        class="ant-pagination-item-link"
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-    </li>
-    <li
-      class="ant-pagination-options"
-    >
-      <div
-        aria-label="Page Size"
-        class="ant-select ant-select-sm ant-pagination-options-size-changer css-dev-only-do-not-override-1adbn6x ant-select-single ant-select-show-arrow ant-select-show-search"
-      >
-        <div
-          class="ant-select-selector"
-        >
-          <span
-            class="ant-select-selection-search"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-label="Page Size"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              role="combobox"
-              type="search"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="1 / page"
-          >
-            1 / page
-          </span>
-        </div>
-        <span
-          aria-hidden="true"
-          class="ant-select-arrow"
-          style="user-select: none;"
-          unselectable="on"
-        >
-          <span
-            aria-label="down"
-            class="anticon anticon-down ant-select-suffix"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="down"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-              />
-            </svg>
-          </span>
-        </span>
-      </div>
-    </li>
-  </ul>
-  <span
-    class="antv-s2-pagination-count"
-    title="Total2"
-  >
-    Total
-    2
-  </span>
-</div>
-`;
-
-exports[`Pagination Tests should render locale text for { locale: 'zh_CN', page: '1 条/页', count: '共计2条' } 1`] = `
-<div
-  class="antv-s2-pagination"
->
-  <ul
-    class="ant-pagination ant-pagination-mini css-dev-only-do-not-override-1adbn6x"
-  >
-    <li
-      aria-disabled="true"
-      class="ant-pagination-prev ant-pagination-disabled"
-      title="上一页"
-    >
-      <button
-        class="ant-pagination-item-link"
-        disabled=""
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </li>
-    <li
-      class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-disabled"
-      tabindex="0"
-      title="1"
-    >
-      <a
-        rel="nofollow"
-      >
-        1
-      </a>
-    </li>
-    <li
-      aria-disabled="true"
-      class="ant-pagination-next ant-pagination-disabled"
-      title="下一页"
-    >
-      <button
-        class="ant-pagination-item-link"
-        disabled=""
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-    </li>
-    <li
-      class="ant-pagination-options"
-    >
-      <div
-        aria-label="页码"
-        class="ant-select ant-select-sm ant-pagination-options-size-changer css-dev-only-do-not-override-1adbn6x ant-select-single ant-select-show-arrow ant-select-show-search"
-      >
-        <div
-          class="ant-select-selector"
-        >
-          <span
-            class="ant-select-selection-search"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-label="页码"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              role="combobox"
-              type="search"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="1 条/页"
-          >
-            1 条/页
-          </span>
-        </div>
-        <span
-          aria-hidden="true"
-          class="ant-select-arrow"
-          style="user-select: none;"
-          unselectable="on"
-        >
-          <span
-            aria-label="down"
-            class="anticon anticon-down ant-select-suffix"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="down"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-              />
-            </svg>
-          </span>
-        </span>
-      </div>
-    </li>
-  </ul>
-  <span
-    class="antv-s2-pagination-count"
-    title="共计0条"
-  >
-    共计
-     - 
-    条
-  </span>
-</div>
-`;
-
-exports[`Pagination Tests should render locale text for { locale: 'zh_CN', page: '1 条/页', count: '共计2条' } 2`] = `
-<div
-  class="antv-s2-pagination"
->
-  <ul
-    class="ant-pagination ant-pagination-mini css-dev-only-do-not-override-1adbn6x"
-  >
-    <li
-      aria-disabled="true"
-      class="ant-pagination-prev ant-pagination-disabled"
-      title="上一页"
-    >
-      <button
-        class="ant-pagination-item-link"
-        disabled=""
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </li>
-    <li
-      class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-disabled"
-      tabindex="0"
-      title="1"
-    >
-      <a
-        rel="nofollow"
-      >
-        1
-      </a>
-    </li>
-    <li
-      aria-disabled="true"
-      class="ant-pagination-next ant-pagination-disabled"
-      title="下一页"
-    >
-      <button
-        class="ant-pagination-item-link"
-        disabled=""
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-    </li>
-    <li
-      class="ant-pagination-options"
-    >
-      <div
-        aria-label="页码"
-        class="ant-select ant-select-sm ant-pagination-options-size-changer css-dev-only-do-not-override-1adbn6x ant-select-single ant-select-show-arrow ant-select-show-search"
-      >
-        <div
-          class="ant-select-selector"
-        >
-          <span
-            class="ant-select-selection-search"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-label="页码"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              role="combobox"
-              type="search"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="1 条/页"
-          >
-            1 条/页
-          </span>
-        </div>
-        <span
-          aria-hidden="true"
-          class="ant-select-arrow"
-          style="user-select: none;"
-          unselectable="on"
-        >
-          <span
-            aria-label="down"
-            class="anticon anticon-down ant-select-suffix"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="down"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-              />
-            </svg>
-          </span>
-        </span>
-      </div>
-    </li>
-  </ul>
-  <span
-    class="antv-s2-pagination-count"
-    title="共计0条"
-  >
-    共计
-     - 
-    条
-  </span>
-</div>
-`;
-
-exports[`Pagination Tests should render locale text for { locale: 'zh_CN', page: '1 条/页', count: '共计2条' } 3`] = `
-<div
-  class="antv-s2-pagination"
->
-  <ul
-    class="ant-pagination ant-pagination-mini css-dev-only-do-not-override-1adbn6x"
-  >
-    <li
-      aria-disabled="true"
-      class="ant-pagination-prev ant-pagination-disabled"
-      title="上一页"
-    >
-      <button
-        class="ant-pagination-item-link"
-        disabled=""
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          aria-label="left"
-          class="anticon anticon-left"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="left"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-            />
-          </svg>
-        </span>
-      </button>
-    </li>
-    <li
-      class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
-      tabindex="0"
-      title="1"
-    >
-      <a
-        rel="nofollow"
-      >
-        1
-      </a>
-    </li>
-    <li
-      class="ant-pagination-item ant-pagination-item-2"
-      tabindex="0"
-      title="2"
-    >
-      <a
-        rel="nofollow"
-      >
-        2
-      </a>
-    </li>
-    <li
-      aria-disabled="false"
-      class="ant-pagination-next"
-      tabindex="0"
-      title="下一页"
-    >
-      <button
-        class="ant-pagination-item-link"
-        tabindex="-1"
-        type="button"
-      >
-        <span
-          aria-label="right"
-          class="anticon anticon-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-            />
-          </svg>
-        </span>
-      </button>
-    </li>
-    <li
-      class="ant-pagination-options"
-    >
-      <div
-        aria-label="页码"
-        class="ant-select ant-select-sm ant-pagination-options-size-changer css-dev-only-do-not-override-1adbn6x ant-select-single ant-select-show-arrow ant-select-show-search"
-      >
-        <div
-          class="ant-select-selector"
-        >
-          <span
-            class="ant-select-selection-search"
-          >
-            <input
-              aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              aria-label="页码"
-              aria-owns="rc_select_TEST_OR_SSR_list"
-              autocomplete="off"
-              class="ant-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
-              role="combobox"
-              type="search"
-              value=""
-            />
-          </span>
-          <span
-            class="ant-select-selection-item"
-            title="1 条/页"
-          >
-            1 条/页
-          </span>
-        </div>
-        <span
-          aria-hidden="true"
-          class="ant-select-arrow"
-          style="user-select: none;"
-          unselectable="on"
-        >
-          <span
-            aria-label="down"
-            class="anticon anticon-down ant-select-suffix"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="down"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-              />
-            </svg>
-          </span>
-        </span>
-      </div>
-    </li>
-  </ul>
-  <span
-    class="antv-s2-pagination-count"
-    title="共计2条"
-  >
-    共计
-    2
-    条
-  </span>
-</div>
-`;
diff --git a/packages/s2-react/__tests__/spreadsheet/pagination-spec.tsx b/packages/s2-react/__tests__/spreadsheet/pagination-spec.tsx
index dc440117fa..34ea40d934 100644
--- a/packages/s2-react/__tests__/spreadsheet/pagination-spec.tsx
+++ b/packages/s2-react/__tests__/spreadsheet/pagination-spec.tsx
@@ -55,7 +55,6 @@ describe('Pagination Tests', () => {
 
       await waitFor(() => {
         expect(spreadsheet).toBeDefined();
-        expect(document.querySelector('.antv-s2-pagination')).toMatchSnapshot();
         expect(
           document.querySelector('.ant-select-selection-item')?.innerHTML,
         ).toEqual(page);
@@ -90,7 +89,6 @@ describe('Pagination Tests', () => {
 
     await waitFor(() => {
       expect(spreadsheet).toBeDefined();
-      expect(document.querySelector('.antv-s2-pagination')).toMatchSnapshot();
       expect(
         document.querySelector('.ant-pagination-options-quick-jumper'),
       ).toBeTruthy();
diff --git a/packages/s2-react/__tests__/unit/components/drill-down/__snapshots__/index-spec.tsx.snap b/packages/s2-react/__tests__/unit/components/drill-down/__snapshots__/index-spec.tsx.snap
index e73f872cd8..41d6a4d503 100644
--- a/packages/s2-react/__tests__/unit/components/drill-down/__snapshots__/index-spec.tsx.snap
+++ b/packages/s2-react/__tests__/unit/components/drill-down/__snapshots__/index-spec.tsx.snap
@@ -141,7 +141,7 @@ exports[`DrillDown Component Tests should render component 1`] = `
       <div
         class="ant-empty-description"
       >
-        暂无数据
+        No data
       </div>
     </div>
     <ul
diff --git a/packages/s2-react/playground/components/CustomGrid.tsx b/packages/s2-react/playground/components/CustomGrid.tsx
index 7be73c1f04..d2cdac8062 100644
--- a/packages/s2-react/playground/components/CustomGrid.tsx
+++ b/packages/s2-react/playground/components/CustomGrid.tsx
@@ -14,6 +14,7 @@ import {
 } from '../../src';
 import { meta } from '../../__tests__/data/mock-dataset.json';
 import { onSheetMounted } from '../utils';
+import { usePlaygroundContext } from '../context/playground.context';
 import { ResizeConfig } from './ResizeConfig';
 
 export const customRowGridOptions: SheetComponentOptions = {
@@ -84,6 +85,7 @@ type CustomGridProps = Partial<SheetComponentsProps>;
 
 export const CustomGrid = React.forwardRef<SpreadSheet, CustomGridProps>(
   (props, ref) => {
+    const context = usePlaygroundContext();
     const [customType, setCustomType] = React.useState<CustomType>(
       (localStorage.getItem('debugCustomType') as unknown as CustomType) ||
         CustomType.Row,
@@ -97,6 +99,7 @@ export const CustomGrid = React.forwardRef<SpreadSheet, CustomGridProps>(
     });
     const [themeCfg, setThemeCfg] = React.useState<ThemeCfg>({
       name: 'default',
+      ...context.themeCfg,
     });
     const [sheetType, setSheetType] =
       React.useState<SheetComponentsProps['sheetType']>('pivot');
@@ -169,6 +172,7 @@ export const CustomGrid = React.forwardRef<SpreadSheet, CustomGridProps>(
 
         <SheetComponent
           {...props}
+          {...context}
           sheetType={sheetType}
           dataCfg={dataCfg}
           options={options}
diff --git a/packages/s2-react/playground/components/CustomTree.tsx b/packages/s2-react/playground/components/CustomTree.tsx
index c85616f89a..727c83c90c 100644
--- a/packages/s2-react/playground/components/CustomTree.tsx
+++ b/packages/s2-react/playground/components/CustomTree.tsx
@@ -8,6 +8,7 @@ import {
 import { customTreeFields } from '../../__tests__/data/custom-tree-fields';
 import { customTreeData } from '../../__tests__/data/data-custom-trees';
 import { meta } from '../../__tests__/data/mock-dataset.json';
+import { usePlaygroundContext } from '../context/playground.context';
 
 export const customTreeDataCfg: S2DataConfig = {
   meta,
@@ -25,12 +26,17 @@ export const customTreeOptions: SheetComponentOptions = {
 type CustomTreeProps = Partial<SheetComponentsProps>;
 
 export const CustomTree = React.forwardRef<SpreadSheet, CustomTreeProps>(
-  (props, ref) => (
-    <SheetComponent
-      {...props}
-      dataCfg={customTreeDataCfg}
-      options={customTreeOptions}
-      ref={ref}
-    />
-  ),
+  (props, ref) => {
+    const context = usePlaygroundContext();
+
+    return (
+      <SheetComponent
+        dataCfg={customTreeDataCfg}
+        options={customTreeOptions}
+        ref={ref}
+        {...props}
+        {...context}
+      />
+    );
+  },
 );
diff --git a/packages/s2-react/playground/components/EditableSheet.tsx b/packages/s2-react/playground/components/EditableSheet.tsx
index 930e87ba81..f5d2534667 100644
--- a/packages/s2-react/playground/components/EditableSheet.tsx
+++ b/packages/s2-react/playground/components/EditableSheet.tsx
@@ -6,7 +6,7 @@ import {
   type SheetComponentsProps,
 } from '../../src/components';
 import { tableSheetDataCfg } from '../config';
-import { onSheetMounted } from '../utils';
+import { usePlaygroundContext } from '../context/playground.context';
 
 export const options: SheetComponentOptions = {
   width: 600,
@@ -18,12 +18,17 @@ export const options: SheetComponentOptions = {
 
 export const EditableSheet: React.FC<
   Partial<SheetComponentsProps> & React.RefAttributes<SpreadSheet>
-> = React.forwardRef((props, ref) => (
-  <SheetComponent
-    sheetType="editable"
-    dataCfg={tableSheetDataCfg}
-    options={options}
-    ref={ref}
-    onMounted={onSheetMounted}
-  />
-));
+> = React.forwardRef((props, ref) => {
+  const context = usePlaygroundContext();
+
+  return (
+    <SheetComponent
+      sheetType="editable"
+      dataCfg={tableSheetDataCfg}
+      options={options}
+      ref={ref}
+      {...props}
+      {...context}
+    />
+  );
+});
diff --git a/packages/s2-react/playground/components/GridAnalysisSheet.tsx b/packages/s2-react/playground/components/GridAnalysisSheet.tsx
index 1934ba9fca..51b43a5f70 100644
--- a/packages/s2-react/playground/components/GridAnalysisSheet.tsx
+++ b/packages/s2-react/playground/components/GridAnalysisSheet.tsx
@@ -6,6 +6,7 @@ import {
   type SheetComponentsProps,
 } from '../../src/components';
 import { mockGridAnalysisDataCfg } from '../../__tests__/data/grid-analysis-data';
+import { usePlaygroundContext } from '../context/playground.context';
 
 export const mockGridAnalysisOptions: SheetComponentOptions = {
   width: 1600,
@@ -43,12 +44,17 @@ export const mockGridAnalysisOptions: SheetComponentOptions = {
 
 export const GridAnalysisSheet: React.FC<
   Partial<SheetComponentsProps> & React.RefAttributes<SpreadSheet>
-> = React.forwardRef((props, ref) => (
-  <SheetComponent
-    {...props}
-    sheetType="gridAnalysis"
-    dataCfg={mockGridAnalysisDataCfg}
-    options={mockGridAnalysisOptions}
-    ref={ref}
-  />
-));
+> = React.forwardRef((props, ref) => {
+  const context = usePlaygroundContext();
+
+  return (
+    <SheetComponent
+      sheetType="gridAnalysis"
+      dataCfg={mockGridAnalysisDataCfg}
+      options={mockGridAnalysisOptions}
+      ref={ref}
+      {...props}
+      {...context}
+    />
+  );
+});
diff --git a/packages/s2-react/playground/components/Mobile.tsx b/packages/s2-react/playground/components/Mobile.tsx
index fe3943bb65..74ed209885 100644
--- a/packages/s2-react/playground/components/Mobile.tsx
+++ b/packages/s2-react/playground/components/Mobile.tsx
@@ -2,13 +2,17 @@ import React from 'react';
 import { customMerge, type S2DataConfig } from '@antv/s2';
 import { MobileSheet } from '../../src/components/sheets/mobile-sheet';
 import { defaultOptions, pivotSheetDataCfg } from '../config';
-import type { SheetComponentOptions } from '../../src';
+import type { SheetComponentOptions, SheetComponentsProps } from '../../src';
+import { usePlaygroundContext } from '../context/playground.context';
 
 const MobileDataCfg: S2DataConfig = {
   ...pivotSheetDataCfg,
 };
 
-export const MobileSheetComponent = () => {
+export const MobileSheetComponent: React.FC<Partial<SheetComponentsProps>> = (
+  props,
+) => {
+  const context = usePlaygroundContext();
   const mobileOptions: SheetComponentOptions = {
     width: 400,
     style: {
@@ -29,5 +33,12 @@ export const MobileSheetComponent = () => {
     mobileOptions,
   );
 
-  return <MobileSheet dataCfg={MobileDataCfg} options={options} />;
+  return (
+    <MobileSheet
+      dataCfg={MobileDataCfg}
+      options={options}
+      {...props}
+      {...context}
+    />
+  );
 };
diff --git a/packages/s2-react/playground/components/StrategySheet.tsx b/packages/s2-react/playground/components/StrategySheet.tsx
index 63d0e485ca..7fa3bdf9c5 100644
--- a/packages/s2-react/playground/components/StrategySheet.tsx
+++ b/packages/s2-react/playground/components/StrategySheet.tsx
@@ -16,10 +16,12 @@ import {
   StrategyOptions,
   StrategySheetDataConfig,
 } from '../../__tests__/data/strategy-data';
+import { usePlaygroundContext } from '../context/playground.context';
 
 export const StrategySheet: React.FC<
   Partial<SheetComponentsProps> & React.RefAttributes<SpreadSheet>
 > = React.forwardRef((props, ref) => {
+  const context = usePlaygroundContext();
   const [strategyDataCfg, setStrategyDataCfg] = React.useState<S2DataConfig>(
     StrategySheetDataConfig,
   );
@@ -84,7 +86,6 @@ export const StrategySheet: React.FC<
 
   return (
     <SheetComponent
-      {...props}
       ref={ref}
       sheetType="strategy"
       dataCfg={strategyDataCfg}
@@ -127,6 +128,8 @@ export const StrategySheet: React.FC<
           </>
         ),
       }}
+      {...props}
+      {...context}
     />
   );
 });
diff --git a/packages/s2-react/playground/context/playground.context.ts b/packages/s2-react/playground/context/playground.context.ts
new file mode 100644
index 0000000000..2376ead647
--- /dev/null
+++ b/packages/s2-react/playground/context/playground.context.ts
@@ -0,0 +1,17 @@
+import React from 'react';
+import type { SpreadSheet, ThemeCfg } from '@antv/s2';
+import { noop } from 'lodash';
+import type { SheetComponentsProps } from '../../src';
+
+export const PlaygroundContext = React.createContext<{
+  ref?: React.MutableRefObject<SpreadSheet | null>;
+  onMounted: SheetComponentsProps['onMounted'];
+  themeCfg: ThemeCfg;
+}>({
+  onMounted: noop,
+  themeCfg: { name: 'default' },
+});
+
+export function usePlaygroundContext() {
+  return React.useContext(PlaygroundContext);
+}
diff --git a/packages/s2-react/playground/index.less b/packages/s2-react/playground/index.less
index c547f1e8a7..993d8a8f0a 100644
--- a/packages/s2-react/playground/index.less
+++ b/packages/s2-react/playground/index.less
@@ -1,5 +1,7 @@
 .playground {
   padding: 40px;
+  background-color: var(--antv-s2-background, #fff);
+  color: var(--antv-s2-font, #fff);
 
   .filter-section {
     margin: 20px 0;
@@ -29,7 +31,7 @@
 
     .label {
       font-size: 16px;
-      color: rgba(0, 0, 0, 0.9);
+      color: var(--antv-s2-font-70, rgba(0, 0, 0, 0.9));
       font-weight: bold;
     }
   }
diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
index 5742fda99f..9f96ef7ac9 100644
--- a/packages/s2-react/playground/index.tsx
+++ b/packages/s2-react/playground/index.tsx
@@ -47,6 +47,8 @@ import { createRoot } from 'react-dom/client';
 import reactPkg from '../package.json';
 import type { SheetComponentOptions } from '../src';
 import { SheetComponent } from '../src';
+import { ConfigProvider } from '../src/components/config-provider';
+import { PlaygroundContext } from './context/playground.context';
 import { CustomGrid } from './components/CustomGrid';
 import { CustomTree } from './components/CustomTree';
 import { EditableSheet } from './components/EditableSheet';
@@ -94,7 +96,7 @@ function MainLayout() {
   const [showPagination, setShowPagination] = React.useState(false);
   const [showTotals, setShowTotals] = React.useState(false);
   const [themeCfg, setThemeCfg] = React.useState<ThemeCfg>({
-    name: 'default',
+    name: 'dark',
   });
   const [themeColor, setThemeColor] = React.useState<string>('#FFF');
   const [showCustomTooltip, setShowCustomTooltip] = React.useState(false);
@@ -339,957 +341,1003 @@ function MainLayout() {
   );
 
   return (
-    <div className="playground">
-      <Links />
-      <Tabs
-        defaultActiveKey={localStorage.getItem('debugTabKey') || 'basic'}
-        type="card"
-        destroyInactiveTabPane
-        items={[
-          {
-            key: 'basic',
-            label: '基础表',
-            children: (
-              <>
-                <Collapse defaultActiveKey={['filter']}>
-                  <Collapse.Panel header="筛选器" key="filter">
-                    <Space>
-                      <Tooltip title="表格类型">
-                        <Radio.Group
-                          onChange={onSheetTypeChange}
-                          defaultValue={sheetType}
-                        >
-                          <Radio.Button value="pivot">透视表</Radio.Button>
-                          <Radio.Button value="table">明细表</Radio.Button>
-                        </Radio.Group>
-                      </Tooltip>
-                      {sheetType === 'table' && (
-                        <Tooltip title="明细表多级表头">
-                          <Radio.Group
-                            onChange={onTableColumnTypeChange}
-                            defaultValue={tableSheetColumnType}
+    <ConfigProvider themeName={themeCfg?.name}>
+      <PlaygroundContext.Provider
+        value={{
+          ref: s2Ref,
+          onMounted: onSheetMounted,
+          themeCfg,
+        }}
+      >
+        <div className="playground">
+          <Links />
+          <Tabs
+            defaultActiveKey={localStorage.getItem('debugTabKey') || 'basic'}
+            type="card"
+            destroyInactiveTabPane
+            items={[
+              {
+                key: 'basic',
+                label: '基础表',
+                children: (
+                  <>
+                    <Collapse defaultActiveKey={['filter']}>
+                      <Collapse.Panel header="筛选器" key="filter">
+                        <Space>
+                          <Tooltip title="表格类型">
+                            <Radio.Group
+                              onChange={onSheetTypeChange}
+                              defaultValue={sheetType}
+                            >
+                              <Radio.Button value="pivot">透视表</Radio.Button>
+                              <Radio.Button value="table">明细表</Radio.Button>
+                            </Radio.Group>
+                          </Tooltip>
+                          {sheetType === 'table' && (
+                            <Tooltip title="明细表多级表头">
+                              <Radio.Group
+                                onChange={onTableColumnTypeChange}
+                                defaultValue={tableSheetColumnType}
+                              >
+                                <Radio.Button value="single">
+                                  单列头
+                                </Radio.Button>
+                                <Radio.Button value="multiple">
+                                  多列头
+                                </Radio.Button>
+                              </Radio.Group>
+                            </Tooltip>
+                          )}
+                          <Tooltip title="布局类型">
+                            <Radio.Group
+                              onChange={onLayoutWidthTypeChange}
+                              defaultValue="adaptive"
+                            >
+                              <Radio.Button value="adaptive">
+                                行列等宽
+                              </Radio.Button>
+                              <Radio.Button value="colAdaptive">
+                                列等宽
+                              </Radio.Button>
+                              <Radio.Button value="compact">紧凑</Radio.Button>
+                            </Radio.Group>
+                          </Tooltip>
+                          <Button
+                            danger
+                            onClick={() => {
+                              s2Ref.current?.destroy();
+                              s2Ref.current?.render();
+                            }}
                           >
-                            <Radio.Button value="single">单列头</Radio.Button>
-                            <Radio.Button value="multiple">多列头</Radio.Button>
-                          </Radio.Group>
-                        </Tooltip>
-                      )}
-                      <Tooltip title="布局类型">
-                        <Radio.Group
-                          onChange={onLayoutWidthTypeChange}
-                          defaultValue="adaptive"
-                        >
-                          <Radio.Button value="adaptive">行列等宽</Radio.Button>
-                          <Radio.Button value="colAdaptive">
-                            列等宽
-                          </Radio.Button>
-                          <Radio.Button value="compact">紧凑</Radio.Button>
-                        </Radio.Group>
-                      </Tooltip>
-                      <Button
-                        danger
-                        onClick={() => {
-                          s2Ref.current?.destroy();
-                          s2Ref.current?.render();
-                        }}
-                      >
-                        卸载组件 (s2.destroy)
-                      </Button>
-                    </Space>
-                    <Space className="filter-container">
-                      <Switch
-                        checkedChildren="渲染组件"
-                        unCheckedChildren="卸载组件"
-                        defaultChecked={render}
-                        onChange={onToggleRender}
-                      />
-                      <Switch
-                        checkedChildren="调试模式开"
-                        unCheckedChildren="调试模式关"
-                        defaultChecked={mergedOptions.debug}
-                        onChange={(checked) => {
-                          updateOptions({ debug: checked });
-                        }}
-                      />
-                      <Switch
-                        checkedChildren="树形"
-                        unCheckedChildren="平铺"
-                        checked={mergedOptions.hierarchyType === 'tree'}
-                        onChange={(checked) => {
-                          updateOptions({
-                            hierarchyType: checked ? 'tree' : 'grid',
-                          });
-                        }}
-                        disabled={sheetType === 'table'}
-                      />
-                      <Switch
-                        checkedChildren="数值挂列头"
-                        unCheckedChildren="数值挂行头"
-                        defaultChecked={dataCfg.fields?.valueInCols}
-                        onChange={(checked) => {
-                          updateDataCfg({
-                            fields: {
-                              valueInCols: checked,
-                            },
-                          });
-                        }}
-                        disabled={sheetType === 'table'}
-                      />
-                      <Switch
-                        checkedChildren="隐藏数值"
-                        unCheckedChildren="显示数值"
-                        defaultChecked={mergedOptions.style?.colCell?.hideValue}
-                        onChange={(checked) => {
-                          updateOptions({
-                            style: {
-                              colCell: {
-                                hideValue: checked,
-                              },
-                            },
-                          });
-                        }}
-                        disabled={sheetType === 'table'}
-                      />
-                      <Switch
-                        checkedChildren="显示行小计/总计"
-                        unCheckedChildren="隐藏行小计/总计"
-                        defaultChecked={
-                          mergedOptions.totals?.row?.showSubTotals as boolean
-                        }
-                        onChange={(checked) => {
-                          updateOptions({
-                            totals: {
-                              row: {
-                                showGrandTotals: checked,
-                                showSubTotals: checked,
-                                reverseGrandTotalsLayout: true,
-                                reverseSubTotalsLayout: true,
-                                subTotalsDimensions: ['province'],
-                              },
-                            },
-                          });
-                        }}
-                        disabled={sheetType === 'table'}
-                      />
-                      <Switch
-                        checkedChildren="显示列小计/总计"
-                        unCheckedChildren="隐藏列小计/总计"
-                        defaultChecked={
-                          mergedOptions.totals?.col?.showSubTotals as boolean
-                        }
-                        onChange={(checked) => {
-                          updateOptions({
-                            totals: {
-                              col: {
-                                showGrandTotals: checked,
-                                showSubTotals: checked,
-                                reverseGrandTotalsLayout: true,
-                                reverseSubTotalsLayout: true,
-                                subTotalsDimensions: ['type'],
-                              },
-                            },
-                          });
-                        }}
-                        disabled={sheetType === 'table'}
-                      />
-                      <Tooltip title="透视表有效">
-                        <Switch
-                          checkedChildren="冻结行头开"
-                          unCheckedChildren="冻结行头关"
-                          defaultChecked={!!mergedOptions.frozen?.rowHeader}
-                          onChange={(checked) => {
-                            updateOptions({
-                              frozen: {
-                                rowHeader: checked,
-                              },
-                            });
-                          }}
-                          disabled={sheetType === 'table'}
-                        />
-                      </Tooltip>
-                      <Tooltip title="明细表有效">
-                        <Switch
-                          checkedChildren="冻结列头开"
-                          unCheckedChildren="冻结列头关"
-                          defaultChecked={
-                            !!mergedOptions.frozen?.trailingColCount
-                          }
-                          onChange={(checked) => {
-                            if (checked) {
+                            卸载组件 (s2.destroy)
+                          </Button>
+                        </Space>
+                        <Space className="filter-container">
+                          <Switch
+                            checkedChildren="渲染组件"
+                            unCheckedChildren="卸载组件"
+                            defaultChecked={render}
+                            onChange={onToggleRender}
+                          />
+                          <Switch
+                            checkedChildren="调试模式开"
+                            unCheckedChildren="调试模式关"
+                            defaultChecked={mergedOptions.debug}
+                            onChange={(checked) => {
+                              updateOptions({ debug: checked });
+                            }}
+                          />
+                          <Switch
+                            checkedChildren="树形"
+                            unCheckedChildren="平铺"
+                            checked={mergedOptions.hierarchyType === 'tree'}
+                            onChange={(checked) => {
                               updateOptions({
-                                frozen: TableSheetFrozenOptions,
+                                hierarchyType: checked ? 'tree' : 'grid',
+                              });
+                            }}
+                            disabled={sheetType === 'table'}
+                          />
+                          <Switch
+                            checkedChildren="数值挂列头"
+                            unCheckedChildren="数值挂行头"
+                            defaultChecked={dataCfg.fields?.valueInCols}
+                            onChange={(checked) => {
+                              updateDataCfg({
+                                fields: {
+                                  valueInCols: checked,
+                                },
                               });
-                            } else {
+                            }}
+                            disabled={sheetType === 'table'}
+                          />
+                          <Switch
+                            checkedChildren="隐藏数值"
+                            unCheckedChildren="显示数值"
+                            defaultChecked={
+                              mergedOptions.style?.colCell?.hideValue
+                            }
+                            onChange={(checked) => {
                               updateOptions({
-                                frozen: {
-                                  rowCount: 0,
-                                  colCount: 0,
-                                  trailingColCount: 0,
-                                  trailingRowCount: 0,
+                                style: {
+                                  colCell: {
+                                    hideValue: checked,
+                                  },
                                 },
                               });
+                            }}
+                            disabled={sheetType === 'table'}
+                          />
+                          <Switch
+                            checkedChildren="显示行小计/总计"
+                            unCheckedChildren="隐藏行小计/总计"
+                            defaultChecked={
+                              mergedOptions.totals?.row
+                                ?.showSubTotals as boolean
                             }
-                          }}
-                          disabled={sheetType === 'pivot'}
-                        />
-                      </Tooltip>
-                      <Switch
-                        checkedChildren="显示序号"
-                        unCheckedChildren="不显示序号"
-                        checked={mergedOptions.showSeriesNumber}
-                        onChange={(checked) => {
-                          updateOptions({
-                            showSeriesNumber: checked,
-                          });
-                        }}
-                      />
-                      <Switch
-                        checkedChildren="自定义序号文本"
-                        unCheckedChildren="默认序号文本"
-                        checked={
-                          mergedOptions.seriesNumberText === '自定义序号文本'
-                        }
-                        onChange={(checked) => {
-                          updateOptions({
-                            seriesNumberText: checked
-                              ? '自定义序号文本'
-                              : getDefaultSeriesNumberText(),
-                          });
-                        }}
-                        disabled={!mergedOptions.showSeriesNumber}
-                      />
-                      <Switch
-                        checkedChildren="分页"
-                        unCheckedChildren="不分页"
-                        checked={showPagination}
-                        onChange={setShowPagination}
-                      />
-                      <Switch
-                        checkedChildren="汇总"
-                        unCheckedChildren="无汇总"
-                        checked={showTotals}
-                        onChange={setShowTotals}
-                      />
-                      <Switch
-                        checkedChildren="默认 headerActionIcons"
-                        unCheckedChildren="自定义 headerActionIcons"
-                        checked={mergedOptions.showDefaultHeaderActionIcon}
-                        onChange={(checked) => {
-                          updateOptions({
-                            showDefaultHeaderActionIcon: checked,
-                          });
-                        }}
-                      />
-                      <Switch
-                        checkedChildren="打开链接跳转"
-                        unCheckedChildren="无链接跳转"
-                        checked={
-                          !isEmpty(mergedOptions.interaction?.linkFields)
-                        }
-                        onChange={(checked) => {
-                          updateOptions({
-                            interaction: {
-                              linkFields: checked ? ['province', 'city'] : [],
-                            },
-                          });
-                        }}
-                      />
-                      <Tooltip title="将列头高度设为0">
-                        <Switch
-                          checkedChildren="隐藏列头和对应角头"
-                          unCheckedChildren="显示列头和对应角头"
-                          checked={mergedOptions.style?.colCell?.height === 0}
-                          onChange={(checked) => {
-                            updateOptions({
-                              style: {
-                                colCell: {
-                                  height: checked
-                                    ? 0
-                                    : s2Options?.style?.colCell?.height ??
-                                      DEFAULT_STYLE.colCell?.height,
+                            onChange={(checked) => {
+                              updateOptions({
+                                totals: {
+                                  row: {
+                                    showGrandTotals: checked,
+                                    showSubTotals: checked,
+                                    reverseGrandTotalsLayout: true,
+                                    reverseSubTotalsLayout: true,
+                                    subTotalsDimensions: ['province'],
+                                  },
                                 },
-                              },
-                            });
-                          }}
-                        />
-                      </Tooltip>
-                      <Tooltip title="改变 dataConfig 配置">
-                        <Switch
-                          checkedChildren="隐藏列头但保留角头"
-                          unCheckedChildren="显示列头"
-                          checked={isEmpty(dataCfg.fields?.columns)}
-                          onChange={(checked) => {
-                            setDataCfg(
-                              customMerge(dataCfg, {
-                                fields: {
-                                  columns: checked
-                                    ? []
-                                    : pivotSheetDataCfg.fields.columns,
+                              });
+                            }}
+                            disabled={sheetType === 'table'}
+                          />
+                          <Switch
+                            checkedChildren="显示列小计/总计"
+                            unCheckedChildren="隐藏列小计/总计"
+                            defaultChecked={
+                              mergedOptions.totals?.col
+                                ?.showSubTotals as boolean
+                            }
+                            onChange={(checked) => {
+                              updateOptions({
+                                totals: {
+                                  col: {
+                                    showGrandTotals: checked,
+                                    showSubTotals: checked,
+                                    reverseGrandTotalsLayout: true,
+                                    reverseSubTotalsLayout: true,
+                                    subTotalsDimensions: ['type'],
+                                  },
                                 },
-                              }),
-                            );
-                          }}
-                        />
-                      </Tooltip>
-                      <Switch
-                        checkedChildren="字段标记开"
-                        unCheckedChildren="字段标记关"
-                        checked={!isEmpty(mergedOptions.conditions)}
-                        onChange={(checked) => {
-                          updateOptions({
-                            conditions: checked ? s2ConditionsOptions : null,
-                          });
-                        }}
-                      />
-                    </Space>
-                    <Space className="filter-container">
-                      <span className="label">
-                        主题配置
-                        <Divider type="vertical" />
-                      </span>
-                      <Radio.Group
-                        onChange={onThemeChange}
-                        defaultValue="default"
-                      >
-                        <Radio.Button value="default">默认</Radio.Button>
-                        <Radio.Button value="gray">简约灰</Radio.Button>
-                        <Radio.Button value="colorful">多彩蓝</Radio.Button>
-                        <Radio.Button value="dark">暗黑</Radio.Button>
-                      </Radio.Group>
-                      <Popover
-                        placement="bottomRight"
-                        content={
-                          <>
-                            <ChromePicker
-                              color={themeColor}
-                              onChangeComplete={(color) => {
-                                setThemeColor(color.hex);
-                                const palette = getPalette(themeCfg.name);
-                                const newPalette = generatePalette({
-                                  ...palette,
-                                  brandColor: color.hex,
+                              });
+                            }}
+                            disabled={sheetType === 'table'}
+                          />
+                          <Tooltip title="透视表有效">
+                            <Switch
+                              checkedChildren="冻结行头开"
+                              unCheckedChildren="冻结行头关"
+                              defaultChecked={!!mergedOptions.frozen?.rowHeader}
+                              onChange={(checked) => {
+                                updateOptions({
+                                  frozen: {
+                                    rowHeader: checked,
+                                  },
                                 });
-
-                                setThemeCfg({
-                                  name: themeCfg.name,
-                                  palette: newPalette,
+                              }}
+                              disabled={sheetType === 'table'}
+                            />
+                          </Tooltip>
+                          <Tooltip title="明细表有效">
+                            <Switch
+                              checkedChildren="冻结列头开"
+                              unCheckedChildren="冻结列头关"
+                              defaultChecked={
+                                !!mergedOptions.frozen?.trailingColCount
+                              }
+                              onChange={(checked) => {
+                                if (checked) {
+                                  updateOptions({
+                                    frozen: TableSheetFrozenOptions,
+                                  });
+                                } else {
+                                  updateOptions({
+                                    frozen: {
+                                      rowCount: 0,
+                                      colCount: 0,
+                                      trailingColCount: 0,
+                                      trailingRowCount: 0,
+                                    },
+                                  });
+                                }
+                              }}
+                              disabled={sheetType === 'pivot'}
+                            />
+                          </Tooltip>
+                          <Switch
+                            checkedChildren="显示序号"
+                            unCheckedChildren="不显示序号"
+                            checked={mergedOptions.showSeriesNumber}
+                            onChange={(checked) => {
+                              updateOptions({
+                                showSeriesNumber: checked,
+                              });
+                            }}
+                          />
+                          <Switch
+                            checkedChildren="自定义序号文本"
+                            unCheckedChildren="默认序号文本"
+                            checked={
+                              mergedOptions.seriesNumberText ===
+                              '自定义序号文本'
+                            }
+                            onChange={(checked) => {
+                              updateOptions({
+                                seriesNumberText: checked
+                                  ? '自定义序号文本'
+                                  : getDefaultSeriesNumberText(),
+                              });
+                            }}
+                            disabled={!mergedOptions.showSeriesNumber}
+                          />
+                          <Switch
+                            checkedChildren="分页"
+                            unCheckedChildren="不分页"
+                            checked={showPagination}
+                            onChange={setShowPagination}
+                          />
+                          <Switch
+                            checkedChildren="汇总"
+                            unCheckedChildren="无汇总"
+                            checked={showTotals}
+                            onChange={setShowTotals}
+                          />
+                          <Switch
+                            checkedChildren="默认 headerActionIcons"
+                            unCheckedChildren="自定义 headerActionIcons"
+                            checked={mergedOptions.showDefaultHeaderActionIcon}
+                            onChange={(checked) => {
+                              updateOptions({
+                                showDefaultHeaderActionIcon: checked,
+                              });
+                            }}
+                          />
+                          <Switch
+                            checkedChildren="打开链接跳转"
+                            unCheckedChildren="无链接跳转"
+                            checked={
+                              !isEmpty(mergedOptions.interaction?.linkFields)
+                            }
+                            onChange={(checked) => {
+                              updateOptions({
+                                interaction: {
+                                  linkFields: checked
+                                    ? ['province', 'city']
+                                    : [],
+                                },
+                              });
+                            }}
+                          />
+                          <Tooltip title="将列头高度设为0">
+                            <Switch
+                              checkedChildren="隐藏列头和对应角头"
+                              unCheckedChildren="显示列头和对应角头"
+                              checked={
+                                mergedOptions.style?.colCell?.height === 0
+                              }
+                              onChange={(checked) => {
+                                updateOptions({
+                                  style: {
+                                    colCell: {
+                                      height: checked
+                                        ? 0
+                                        : s2Options?.style?.colCell?.height ??
+                                          DEFAULT_STYLE.colCell?.height,
+                                    },
+                                  },
                                 });
                               }}
                             />
-                          </>
-                        }
-                      >
-                        <Button>主题色调整</Button>
-                      </Popover>
-                    </Space>
-                    <Space className="filter-container">
-                      <span className="label">
-                        Tooltip 配置
-                        <Divider type="vertical" />
-                      </span>
-                      <Switch
-                        checkedChildren="开启Tooltip"
-                        unCheckedChildren="关闭Tooltip"
-                        checked={mergedOptions.tooltip?.enable}
-                        onChange={(checked) => {
-                          updateOptions({
-                            tooltip: {
-                              enable: checked,
-                            },
-                          });
-                        }}
-                      />
-                      <Switch
-                        checkedChildren="自定义Tooltip"
-                        unCheckedChildren="默认Tooltip"
-                        checked={showCustomTooltip}
-                        onChange={setShowCustomTooltip}
-                      />
-                      <Tooltip title="操作项菜单类型, 透传 https://ant-design.antgroup.com/components/menu-cn#api">
-                        <Switch
-                          checkedChildren="操作项-水平展示"
-                          unCheckedChildren="操作项-垂直展示"
-                          onChange={(checked) => {
-                            updateOptions({
-                              tooltip: {
-                                operation: {
-                                  menu: {
-                                    mode: checked ? 'horizontal' : 'vertical',
+                          </Tooltip>
+                          <Tooltip title="改变 dataConfig 配置">
+                            <Switch
+                              checkedChildren="隐藏列头但保留角头"
+                              unCheckedChildren="显示列头"
+                              checked={isEmpty(dataCfg.fields?.columns)}
+                              onChange={(checked) => {
+                                setDataCfg(
+                                  customMerge(dataCfg, {
+                                    fields: {
+                                      columns: checked
+                                        ? []
+                                        : pivotSheetDataCfg.fields.columns,
+                                    },
+                                  }),
+                                );
+                              }}
+                            />
+                          </Tooltip>
+                          <Switch
+                            checkedChildren="字段标记开"
+                            unCheckedChildren="字段标记关"
+                            checked={!isEmpty(mergedOptions.conditions)}
+                            onChange={(checked) => {
+                              updateOptions({
+                                conditions: checked
+                                  ? s2ConditionsOptions
+                                  : null,
+                              });
+                            }}
+                          />
+                        </Space>
+                        <Space className="filter-container">
+                          <span className="label">
+                            主题配置
+                            <Divider type="vertical" />
+                          </span>
+                          <Tooltip title={`当前主题名: ${themeCfg.name}`}>
+                            <Radio.Group
+                              onChange={onThemeChange}
+                              defaultValue="default"
+                              value={themeCfg.name}
+                            >
+                              <Radio.Button value="default">默认</Radio.Button>
+                              <Radio.Button value="gray">简约灰</Radio.Button>
+                              <Radio.Button value="colorful">
+                                多彩蓝
+                              </Radio.Button>
+                              <Radio.Button value="dark">暗黑</Radio.Button>
+                            </Radio.Group>
+                          </Tooltip>
+                          <Popover
+                            placement="bottomRight"
+                            content={
+                              <>
+                                <ChromePicker
+                                  color={themeColor}
+                                  onChangeComplete={(color) => {
+                                    setThemeColor(color.hex);
+                                    const palette = getPalette(themeCfg.name);
+                                    const newPalette = generatePalette({
+                                      ...palette,
+                                      brandColor: color.hex,
+                                    });
+
+                                    setThemeCfg({
+                                      name: themeCfg.name,
+                                      palette: newPalette,
+                                    });
+                                  }}
+                                />
+                              </>
+                            }
+                          >
+                            <Button>主题色调整</Button>
+                          </Popover>
+                        </Space>
+                        <Space className="filter-container">
+                          <span className="label">
+                            Tooltip 配置
+                            <Divider type="vertical" />
+                          </span>
+                          <Switch
+                            checkedChildren="开启Tooltip"
+                            unCheckedChildren="关闭Tooltip"
+                            checked={mergedOptions.tooltip?.enable}
+                            onChange={(checked) => {
+                              updateOptions({
+                                tooltip: {
+                                  enable: checked,
+                                },
+                              });
+                            }}
+                          />
+                          <Switch
+                            checkedChildren="自定义Tooltip"
+                            unCheckedChildren="默认Tooltip"
+                            checked={showCustomTooltip}
+                            onChange={setShowCustomTooltip}
+                          />
+                          <Tooltip title="操作项菜单类型, 透传 https://ant-design.antgroup.com/components/menu-cn#api">
+                            <Switch
+                              checkedChildren="操作项-水平展示"
+                              unCheckedChildren="操作项-垂直展示"
+                              onChange={(checked) => {
+                                updateOptions({
+                                  tooltip: {
+                                    operation: {
+                                      menu: {
+                                        mode: checked
+                                          ? 'horizontal'
+                                          : 'vertical',
+                                      },
+                                    },
                                   },
+                                });
+                              }}
+                            />
+                          </Tooltip>
+                          <Tooltip title="tooltip 自动调整: 显示的tooltip超过指定区域时自动调整, 使其不遮挡">
+                            <Select
+                              defaultValue={
+                                mergedOptions.tooltip?.autoAdjustBoundary
+                              }
+                              onChange={onAutoAdjustBoundaryChange}
+                              style={{ width: 230 }}
+                              size="small"
+                            >
+                              <Select.Option value="container">
+                                container (表格区域)
+                              </Select.Option>
+                              <Select.Option value="body">
+                                body (浏览器可视区域)
+                              </Select.Option>
+                              <Select.Option value="">关闭</Select.Option>
+                            </Select>
+                          </Tooltip>
+                        </Space>
+                        <Space className="filter-container">
+                          <span className="label">
+                            宽高配置
+                            <Divider type="vertical" />
+                          </span>
+                          <Switch
+                            checkedChildren="容器宽高自适应开"
+                            unCheckedChildren="容器宽高自适应关"
+                            defaultChecked={Boolean(adaptive)}
+                            onChange={setAdaptive}
+                          />
+                          <Input
+                            style={{ width: 150 }}
+                            onChange={onSizeChange('width')}
+                            defaultValue={mergedOptions.width}
+                            suffix="px"
+                            prefix="宽度"
+                            size="small"
+                          />
+                          <Input
+                            style={{ width: 150 }}
+                            onChange={onSizeChange('height')}
+                            defaultValue={mergedOptions.height}
+                            suffix="px"
+                            prefix="高度"
+                            size="small"
+                          />
+                          <Button
+                            size="small"
+                            onClick={() => {
+                              s2Ref.current?.changeSheetSize(400, 400);
+                              s2Ref.current?.render(false);
+                            }}
+                          >
+                            改变表格大小 (s2.changeSheetSize)
+                          </Button>
+                        </Space>
+                        <Space className="filter-container">
+                          <span className="label">
+                            滚动
+                            <Divider type="vertical" />
+                          </span>
+                          <Popover
+                            placement="bottomRight"
+                            content={
+                              <>
+                                <div style={{ width: '600px' }}>
+                                  水平滚动速率 ：
+                                  <Slider
+                                    {...sliderOptions}
+                                    defaultValue={
+                                      mergedOptions.interaction!
+                                        .scrollSpeedRatio!.horizontal
+                                    }
+                                    onChange={onScrollSpeedRatioChange(
+                                      'horizontal',
+                                    )}
+                                  />
+                                  垂直滚动速率 ：
+                                  <Slider
+                                    {...sliderOptions}
+                                    defaultValue={
+                                      mergedOptions.interaction!
+                                        .scrollSpeedRatio!.vertical
+                                    }
+                                    onChange={onScrollSpeedRatioChange(
+                                      'vertical',
+                                    )}
+                                  />
+                                </div>
+                              </>
+                            }
+                          >
+                            <Button size="small">滚动速率调整</Button>
+                          </Popover>
+                          <Tooltip title="滚动链控制(overscrollBehavior): https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior">
+                            <Select
+                              defaultValue={
+                                mergedOptions.interaction!.overscrollBehavior
+                              }
+                              onChange={onOverscrollBehaviorChange}
+                              style={{ width: 150 }}
+                              size="small"
+                            >
+                              <Select.Option value="auto">auto</Select.Option>
+                              <Select.Option value="contain">
+                                contain
+                              </Select.Option>
+                              <Select.Option value="none">none</Select.Option>
+                            </Select>
+                          </Tooltip>
+                          <Button
+                            size="small"
+                            onClick={() => {
+                              const rowNode = s2Ref.current?.facet
+                                .getRowNodes()
+                                .find(
+                                  ({ id }) => id === 'root[&]四川省[&]成都市',
+                                );
+
+                              clearInterval(scrollTimer.current!);
+                              s2Ref.current?.updateScrollOffset({
+                                offsetY: {
+                                  value: rowNode?.y,
+                                  animate: true,
                                 },
-                              },
-                            });
-                          }}
-                        />
-                      </Tooltip>
-                      <Tooltip title="tooltip 自动调整: 显示的tooltip超过指定区域时自动调整, 使其不遮挡">
-                        <Select
-                          defaultValue={
-                            mergedOptions.tooltip?.autoAdjustBoundary
-                          }
-                          onChange={onAutoAdjustBoundaryChange}
-                          style={{ width: 230 }}
-                          size="small"
-                        >
-                          <Select.Option value="container">
-                            container (表格区域)
-                          </Select.Option>
-                          <Select.Option value="body">
-                            body (浏览器可视区域)
-                          </Select.Option>
-                          <Select.Option value="">关闭</Select.Option>
-                        </Select>
-                      </Tooltip>
-                    </Space>
-                    <Space className="filter-container">
-                      <span className="label">
-                        宽高配置
-                        <Divider type="vertical" />
-                      </span>
-                      <Switch
-                        checkedChildren="容器宽高自适应开"
-                        unCheckedChildren="容器宽高自适应关"
-                        defaultChecked={Boolean(adaptive)}
-                        onChange={setAdaptive}
-                      />
-                      <Input
-                        style={{ width: 150 }}
-                        onChange={onSizeChange('width')}
-                        defaultValue={mergedOptions.width}
-                        suffix="px"
-                        prefix="宽度"
-                        size="small"
-                      />
-                      <Input
-                        style={{ width: 150 }}
-                        onChange={onSizeChange('height')}
-                        defaultValue={mergedOptions.height}
-                        suffix="px"
-                        prefix="高度"
-                        size="small"
-                      />
-                      <Button
-                        size="small"
-                        onClick={() => {
-                          s2Ref.current?.changeSheetSize(400, 400);
-                          s2Ref.current?.render(false);
-                        }}
-                      >
-                        改变表格大小 (s2.changeSheetSize)
-                      </Button>
-                    </Space>
-                    <Space className="filter-container">
-                      <span className="label">
-                        滚动
-                        <Divider type="vertical" />
-                      </span>
-                      <Popover
-                        placement="bottomRight"
-                        content={
-                          <>
-                            <div style={{ width: '600px' }}>
-                              水平滚动速率 ：
-                              <Slider
-                                {...sliderOptions}
-                                defaultValue={
-                                  mergedOptions.interaction!.scrollSpeedRatio!
-                                    .horizontal
-                                }
-                                onChange={onScrollSpeedRatioChange(
-                                  'horizontal',
-                                )}
-                              />
-                              垂直滚动速率 ：
-                              <Slider
-                                {...sliderOptions}
-                                defaultValue={
-                                  mergedOptions.interaction!.scrollSpeedRatio!
-                                    .vertical
-                                }
-                                onChange={onScrollSpeedRatioChange('vertical')}
-                              />
-                            </div>
-                          </>
-                        }
-                      >
-                        <Button size="small">滚动速率调整</Button>
-                      </Popover>
-                      <Tooltip title="滚动链控制(overscrollBehavior): https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior">
-                        <Select
-                          defaultValue={
-                            mergedOptions.interaction!.overscrollBehavior
-                          }
-                          onChange={onOverscrollBehaviorChange}
-                          style={{ width: 150 }}
-                          size="small"
-                        >
-                          <Select.Option value="auto">auto</Select.Option>
-                          <Select.Option value="contain">contain</Select.Option>
-                          <Select.Option value="none">none</Select.Option>
-                        </Select>
-                      </Tooltip>
-                      <Button
-                        size="small"
-                        onClick={() => {
-                          const rowNode = s2Ref.current?.facet
-                            .getRowNodes()
-                            .find(({ id }) => id === 'root[&]四川省[&]成都市');
+                              });
+                            }}
+                          >
+                            滚动至 [成都市]
+                          </Button>
+                          <Button
+                            size="small"
+                            onClick={() => {
+                              clearInterval(scrollTimer.current!);
+                              s2Ref.current?.updateScrollOffset({
+                                offsetY: {
+                                  value: 0,
+                                  animate: true,
+                                },
+                              });
+                            }}
+                          >
+                            滚动到顶部
+                          </Button>
+                          <Button
+                            size="small"
+                            onClick={() => {
+                              clearInterval(scrollTimer.current);
+                              s2Ref.current?.updateScrollOffset({
+                                rowHeaderOffsetX: {
+                                  value: 100,
+                                  animate: true,
+                                },
+                              });
+                            }}
+                          >
+                            滚动行头
+                          </Button>
+                          <Button
+                            size="small"
+                            danger
+                            onClick={() => {
+                              if (
+                                scrollTimer.current ||
+                                !s2Ref.current?.facet.vScrollBar
+                              ) {
+                                clearInterval(scrollTimer.current!);
 
-                          clearInterval(scrollTimer.current!);
-                          s2Ref.current?.updateScrollOffset({
-                            offsetY: {
-                              value: rowNode?.y,
-                              animate: true,
-                            },
-                          });
-                        }}
-                      >
-                        滚动至 [成都市]
-                      </Button>
-                      <Button
-                        size="small"
-                        onClick={() => {
-                          clearInterval(scrollTimer.current!);
-                          s2Ref.current?.updateScrollOffset({
-                            offsetY: {
-                              value: 0,
-                              animate: true,
-                            },
-                          });
-                        }}
-                      >
-                        滚动到顶部
-                      </Button>
-                      <Button
-                        size="small"
-                        onClick={() => {
-                          clearInterval(scrollTimer.current);
-                          s2Ref.current?.updateScrollOffset({
-                            rowHeaderOffsetX: {
-                              value: 100,
-                              animate: true,
-                            },
-                          });
-                        }}
-                      >
-                        滚动行头
-                      </Button>
-                      <Button
-                        size="small"
-                        danger
-                        onClick={() => {
-                          if (
-                            scrollTimer.current ||
-                            !s2Ref.current?.facet.vScrollBar
-                          ) {
-                            clearInterval(scrollTimer.current!);
+                                return;
+                              }
 
-                            return;
-                          }
+                              scrollTimer.current = setInterval(() => {
+                                const { scrollY } =
+                                  s2Ref.current?.facet.getScrollOffset()!;
 
-                          scrollTimer.current = setInterval(() => {
-                            const { scrollY } =
-                              s2Ref.current?.facet.getScrollOffset()!;
+                                if (
+                                  s2Ref.current?.facet.isScrollToBottom(scrollY)
+                                ) {
+                                  console.log('滚动到底部');
+                                  s2Ref.current.updateScrollOffset({
+                                    offsetY: {
+                                      value: 0,
+                                      animate: false,
+                                    },
+                                  });
 
-                            if (
-                              s2Ref.current?.facet.isScrollToBottom(scrollY)
-                            ) {
-                              console.log('滚动到底部');
-                              s2Ref.current.updateScrollOffset({
-                                offsetY: {
-                                  value: 0,
-                                  animate: false,
+                                  return;
+                                }
+
+                                s2Ref.current!.updateScrollOffset({
+                                  offsetY: {
+                                    value: scrollY + 50,
+                                    animate: true,
+                                  },
+                                });
+                              }, 500) as unknown as number;
+                            }}
+                          >
+                            {scrollTimer.current ? '停止滚动' : '循环滚动'}
+                          </Button>
+                        </Space>
+                        <Space className="filter-container">
+                          <span className="label">
+                            折叠 / 展开
+                            <Divider type="vertical" />
+                          </span>
+                          <Tooltip title="树状模式生效 (平铺模式 TODO)">
+                            <Switch
+                              checkedChildren="收起所有"
+                              unCheckedChildren="展开所有"
+                              disabled={mergedOptions.hierarchyType !== 'tree'}
+                              checked={
+                                mergedOptions.style?.rowCell?.collapseAll!
+                              }
+                              onChange={(checked) => {
+                                updateOptions({
+                                  style: {
+                                    rowCell: {
+                                      collapseAll: checked,
+                                      collapseFields: null,
+                                      expandDepth: null,
+                                    },
+                                  },
+                                });
+                              }}
+                            />
+                          </Tooltip>
+                          <Switch
+                            checkedChildren="折叠浙江省"
+                            unCheckedChildren="展开浙江省"
+                            disabled={mergedOptions.hierarchyType !== 'tree'}
+                            onChange={(checked) => {
+                              updateOptions({
+                                style: {
+                                  rowCell: {
+                                    collapseAll: null,
+                                    expandDepth: null,
+                                    collapseFields: {
+                                      'root[&]浙江省': checked,
+                                    },
+                                  },
                                 },
                               });
+                            }}
+                          />
+                          <Tooltip
+                            title={<p>透视表树状模式默认行头展开层级配置</p>}
+                          >
+                            <Select
+                              style={{ width: 180 }}
+                              defaultValue={
+                                mergedOptions?.style?.rowCell?.expandDepth
+                              }
+                              placeholder="默认行头展开层级"
+                              size="small"
+                              onChange={(level) => {
+                                updateOptions({
+                                  style: {
+                                    rowCell: {
+                                      collapseAll: false,
+                                      expandDepth: level,
+                                      collapseFields: null,
+                                    },
+                                  },
+                                });
+                              }}
+                            >
+                              {pivotSheetDataCfg.fields.rows?.map((_, i) => (
+                                <Select.Option value={i} key={i}>
+                                  第 {i + 1} 级
+                                </Select.Option>
+                              ))}
+                            </Select>
+                          </Tooltip>
+                        </Space>
+                      </Collapse.Panel>
+                      <Collapse.Panel header="交互配置" key="interaction">
+                        <Space>
+                          <Tooltip title="高亮选中单元格">
+                            <Switch
+                              checkedChildren="选中聚光灯开"
+                              unCheckedChildren="选中聚光灯关"
+                              checked={
+                                mergedOptions?.interaction
+                                  ?.selectedCellsSpotlight
+                              }
+                              onChange={(checked) => {
+                                updateOptions({
+                                  interaction: {
+                                    selectedCellsSpotlight: checked,
+                                  },
+                                });
+                              }}
+                            />
+                          </Tooltip>
+                          <Tooltip title="高亮选中单元格行为，演示这里旧配置优先级最高">
+                            <Select
+                              style={{ width: 260 }}
+                              placeholder="单元格选中高亮"
+                              allowClear
+                              mode="multiple"
+                              onChange={(type) => {
+                                let selectedCellHighlight:
+                                  | boolean
+                                  | InteractionCellSelectedHighlightOptions =
+                                  false;
+                                const oldIdx = type.findIndex((typeItem: any) =>
+                                  isBoolean(typeItem),
+                                );
 
-                              return;
-                            }
+                                if (oldIdx > -1) {
+                                  selectedCellHighlight = type[oldIdx];
+                                } else {
+                                  selectedCellHighlight = {
+                                    rowHeader: false,
+                                    colHeader: false,
+                                    currentCol: false,
+                                    currentRow: false,
+                                  };
+                                  type.forEach((i: number) => {
+                                    // @ts-ignore
+                                    selectedCellHighlight[i] = true;
+                                  });
+                                }
 
-                            s2Ref.current!.updateScrollOffset({
-                              offsetY: {
-                                value: scrollY + 50,
-                                animate: true,
-                              },
-                            });
-                          }, 500) as unknown as number;
-                        }}
-                      >
-                        {scrollTimer.current ? '停止滚动' : '循环滚动'}
-                      </Button>
-                    </Space>
-                    <Space className="filter-container">
-                      <span className="label">
-                        折叠 / 展开
-                        <Divider type="vertical" />
-                      </span>
-                      <Tooltip title="树状模式生效 (平铺模式 TODO)">
-                        <Switch
-                          checkedChildren="收起所有"
-                          unCheckedChildren="展开所有"
-                          disabled={mergedOptions.hierarchyType !== 'tree'}
-                          checked={mergedOptions.style?.rowCell?.collapseAll!}
-                          onChange={(checked) => {
-                            updateOptions({
-                              style: {
-                                rowCell: {
-                                  collapseAll: checked,
-                                  collapseFields: null,
-                                  expandDepth: null,
-                                },
-                              },
-                            });
-                          }}
+                                updateOptions({
+                                  interaction: {
+                                    // @ts-ignore
+                                    selectedCellHighlight,
+                                  },
+                                });
+                              }}
+                            >
+                              <Select.Option value={true}>
+                                （旧）高亮选中单元格所在行列头
+                              </Select.Option>
+                              <Select.Option value="rowHeader">
+                                rowHeader: 高亮所在行头
+                              </Select.Option>
+                              <Select.Option value="colHeader">
+                                colHeader: 高亮所在列头
+                              </Select.Option>
+                              <Select.Option value="currentRow">
+                                currentRow: 高亮所在行
+                              </Select.Option>
+                              <Select.Option value="currentCol">
+                                currentCol: 高亮所在列
+                              </Select.Option>
+                            </Select>
+                          </Tooltip>
+                          <Tooltip title="高亮当前行列单元格">
+                            <Switch
+                              checkedChildren="hover十字器开"
+                              unCheckedChildren="hover十字器关"
+                              checked={
+                                mergedOptions?.interaction?.hoverHighlight
+                              }
+                              onChange={(checked) => {
+                                updateOptions({
+                                  interaction: {
+                                    hoverHighlight: checked,
+                                  },
+                                });
+                              }}
+                            />
+                          </Tooltip>
+                          <Tooltip title="在数值单元格悬停800ms,显示tooltip">
+                            <Switch
+                              checkedChildren="hover聚焦开"
+                              unCheckedChildren="hover聚焦关"
+                              checked={
+                                mergedOptions?.interaction
+                                  ?.hoverFocus as boolean
+                              }
+                              onChange={(checked) => {
+                                updateOptions({
+                                  interaction: {
+                                    hoverFocus: checked,
+                                  },
+                                });
+                              }}
+                            />
+                          </Tooltip>
+                          <Tooltip title="开启后,点击空白处,按下ESC键, 取消高亮, 清空选中单元格, 等交互样式">
+                            <Switch
+                              checkedChildren="自动重置交互样式开"
+                              unCheckedChildren="自动重置交互样式关"
+                              defaultChecked={
+                                mergedOptions?.interaction?.autoResetSheetStyle
+                              }
+                              onChange={(checked) => {
+                                updateOptions({
+                                  interaction: {
+                                    autoResetSheetStyle: checked,
+                                  },
+                                });
+                              }}
+                            />
+                          </Tooltip>
+                          <Tooltip
+                            title={
+                              <>
+                                <p>默认隐藏列 </p>
+                                <p>明细表: 列头指定 field: number</p>
+                                <p>
+                                  透视表: 列头指定id:
+                                  root[&]家具[&]沙发[&]number
+                                </p>
+                              </>
+                            }
+                          >
+                            <Select
+                              style={{ width: 300 }}
+                              defaultValue={
+                                mergedOptions?.interaction?.hiddenColumnFields
+                              }
+                              mode="multiple"
+                              placeholder="默认隐藏列"
+                              onChange={(fields) => {
+                                updateOptions({
+                                  interaction: {
+                                    hiddenColumnFields: fields,
+                                  },
+                                });
+                              }}
+                            >
+                              {columnOptions.map((column) => (
+                                <Select.Option
+                                  value={column}
+                                  key={column as string}
+                                >
+                                  {column as string}
+                                </Select.Option>
+                              ))}
+                            </Select>
+                          </Tooltip>
+                        </Space>
+                      </Collapse.Panel>
+                      <Collapse.Panel header="宽高调整热区配置" key="resize">
+                        <ResizeConfig
+                          options={mergedOptions}
+                          setOptions={setOptions}
+                          setThemeCfg={setThemeCfg}
                         />
-                      </Tooltip>
-                      <Switch
-                        checkedChildren="折叠浙江省"
-                        unCheckedChildren="展开浙江省"
-                        disabled={mergedOptions.hierarchyType !== 'tree'}
-                        onChange={(checked) => {
-                          updateOptions({
-                            style: {
-                              rowCell: {
-                                collapseAll: null,
-                                expandDepth: null,
-                                collapseFields: {
-                                  'root[&]浙江省': checked,
-                                },
-                              },
-                            },
-                          });
+                      </Collapse.Panel>
+                    </Collapse>
+                    {render && (
+                      <SheetComponent
+                        dataCfg={dataCfg as S2DataConfig}
+                        options={mergedOptions}
+                        sheetType={sheetType}
+                        adaptive={adaptive}
+                        ref={s2Ref}
+                        themeCfg={themeCfg}
+                        partDrillDown={partDrillDown}
+                        showPagination={showPagination}
+                        header={{
+                          title: (
+                            <a href="https://github.com/antvis/S2">
+                              {reactPkg.name} playground
+                            </a>
+                          ),
+                          description: (
+                            <Space>
+                              <span>
+                                {reactPkg.name}: <Tag>{reactPkg.version}</Tag>
+                              </span>
+                              <span>
+                                {corePkg.name}: <Tag>{corePkg.version}</Tag>
+                              </span>
+                              <span>
+                                antd: <Tag>{AntdVersion}</Tag>
+                              </span>
+                              <span>
+                                react: <Tag>{React.version}</Tag>
+                              </span>
+                              <span>
+                                lang: <Tag>{getLang()}</Tag>
+                              </span>
+                            </Space>
+                          ),
+                          switcherCfg: { open: true },
+                          exportCfg: { open: true },
+                          advancedSortCfg: {
+                            open: true,
+                          },
                         }}
-                      />
-                      <Tooltip
-                        title={<p>透视表树状模式默认行头展开层级配置</p>}
-                      >
-                        <Select
-                          style={{ width: 180 }}
-                          defaultValue={
-                            mergedOptions?.style?.rowCell?.expandDepth
-                          }
-                          placeholder="默认行头展开层级"
-                          size="small"
-                          onChange={(level) => {
-                            updateOptions({
-                              style: {
-                                rowCell: {
-                                  collapseAll: false,
-                                  expandDepth: level,
-                                  collapseFields: null,
-                                },
-                              },
-                            });
-                          }}
-                        >
-                          {pivotSheetDataCfg.fields.rows?.map((_, i) => (
-                            <Select.Option value={i} key={i}>
-                              第 {i + 1} 级
-                            </Select.Option>
-                          ))}
-                        </Select>
-                      </Tooltip>
-                    </Space>
-                  </Collapse.Panel>
-                  <Collapse.Panel header="交互配置" key="interaction">
-                    <Space>
-                      <Tooltip title="高亮选中单元格">
-                        <Switch
-                          checkedChildren="选中聚光灯开"
-                          unCheckedChildren="选中聚光灯关"
-                          checked={
-                            mergedOptions?.interaction?.selectedCellsSpotlight
-                          }
-                          onChange={(checked) => {
-                            updateOptions({
-                              interaction: {
-                                selectedCellsSpotlight: checked,
-                              },
-                            });
-                          }}
-                        />
-                      </Tooltip>
-                      <Tooltip title="高亮选中单元格行为，演示这里旧配置优先级最高">
-                        <Select
-                          style={{ width: 260 }}
-                          placeholder="单元格选中高亮"
-                          allowClear
-                          mode="multiple"
-                          onChange={(type) => {
-                            let selectedCellHighlight:
-                              | boolean
-                              | InteractionCellSelectedHighlightOptions = false;
-                            const oldIdx = type.findIndex((typeItem: any) =>
-                              isBoolean(typeItem),
-                            );
-
-                            if (oldIdx > -1) {
-                              selectedCellHighlight = type[oldIdx];
-                            } else {
-                              selectedCellHighlight = {
-                                rowHeader: false,
-                                colHeader: false,
-                                currentCol: false,
-                                currentRow: false,
-                              };
-                              type.forEach((i: number) => {
-                                // @ts-ignore
-                                selectedCellHighlight[i] = true;
-                              });
+                        onAfterRender={logHandler('onAfterRender')}
+                        onRangeSort={logHandler('onRangeSort')}
+                        onRangeSorted={logHandler('onRangeSorted')}
+                        onMounted={onSheetMounted}
+                        onDestroy={logHandler('onDestroy', () => {
+                          clearInterval(scrollTimer.current!);
+                        })}
+                        onColCellClick={onColCellClick}
+                        onRowCellClick={logHandler('onRowCellClick')}
+                        onCornerCellClick={logHandler(
+                          'onCornerCellClick',
+                          (cellInfo) => {
+                            if (!showCustomTooltip) {
+                              return;
                             }
 
-                            updateOptions({
-                              interaction: {
-                                // @ts-ignore
-                                selectedCellHighlight,
-                              },
-                            });
-                          }}
-                        >
-                          <Select.Option value={true}>
-                            （旧）高亮选中单元格所在行列头
-                          </Select.Option>
-                          <Select.Option value="rowHeader">
-                            rowHeader: 高亮所在行头
-                          </Select.Option>
-                          <Select.Option value="colHeader">
-                            colHeader: 高亮所在列头
-                          </Select.Option>
-                          <Select.Option value="currentRow">
-                            currentRow: 高亮所在行
-                          </Select.Option>
-                          <Select.Option value="currentCol">
-                            currentCol: 高亮所在列
-                          </Select.Option>
-                        </Select>
-                      </Tooltip>
-                      <Tooltip title="高亮当前行列单元格">
-                        <Switch
-                          checkedChildren="hover十字器开"
-                          unCheckedChildren="hover十字器关"
-                          checked={mergedOptions?.interaction?.hoverHighlight}
-                          onChange={(checked) => {
-                            updateOptions({
-                              interaction: {
-                                hoverHighlight: checked,
-                              },
-                            });
-                          }}
-                        />
-                      </Tooltip>
-                      <Tooltip title="在数值单元格悬停800ms,显示tooltip">
-                        <Switch
-                          checkedChildren="hover聚焦开"
-                          unCheckedChildren="hover聚焦关"
-                          checked={
-                            mergedOptions?.interaction?.hoverFocus as boolean
-                          }
-                          onChange={(checked) => {
-                            updateOptions({
-                              interaction: {
-                                hoverFocus: checked,
-                              },
-                            });
-                          }}
-                        />
-                      </Tooltip>
-                      <Tooltip title="开启后,点击空白处,按下ESC键, 取消高亮, 清空选中单元格, 等交互样式">
-                        <Switch
-                          checkedChildren="自动重置交互样式开"
-                          unCheckedChildren="自动重置交互样式关"
-                          defaultChecked={
-                            mergedOptions?.interaction?.autoResetSheetStyle
-                          }
-                          onChange={(checked) => {
-                            updateOptions({
-                              interaction: {
-                                autoResetSheetStyle: checked,
+                            s2Ref.current?.showTooltip({
+                              position: {
+                                x: cellInfo.event.clientX,
+                                y: cellInfo.event.clientY,
                               },
+                              content: 'click',
                             });
-                          }}
-                        />
-                      </Tooltip>
-                      <Tooltip
-                        title={
-                          <>
-                            <p>默认隐藏列 </p>
-                            <p>明细表: 列头指定 field: number</p>
-                            <p>
-                              透视表: 列头指定id: root[&]家具[&]沙发[&]number
-                            </p>
-                          </>
-                        }
-                      >
-                        <Select
-                          style={{ width: 300 }}
-                          defaultValue={
-                            mergedOptions?.interaction?.hiddenColumnFields
-                          }
-                          mode="multiple"
-                          placeholder="默认隐藏列"
-                          onChange={(fields) => {
-                            updateOptions({
-                              interaction: {
-                                hiddenColumnFields: fields,
-                              },
-                            });
-                          }}
-                        >
-                          {columnOptions.map((column) => (
-                            <Select.Option
-                              value={column}
-                              key={column as string}
-                            >
-                              {column as string}
-                            </Select.Option>
-                          ))}
-                        </Select>
-                      </Tooltip>
-                    </Space>
-                  </Collapse.Panel>
-                  <Collapse.Panel header="宽高调整热区配置" key="resize">
-                    <ResizeConfig
-                      options={mergedOptions}
-                      setOptions={setOptions}
-                      setThemeCfg={setThemeCfg}
-                    />
-                  </Collapse.Panel>
-                </Collapse>
-                {render && (
-                  <SheetComponent
-                    dataCfg={dataCfg as S2DataConfig}
-                    options={mergedOptions}
-                    sheetType={sheetType}
-                    adaptive={adaptive}
-                    ref={s2Ref}
-                    themeCfg={themeCfg}
-                    partDrillDown={partDrillDown}
-                    showPagination={showPagination}
-                    header={{
-                      title: (
-                        <a href="https://github.com/antvis/S2">
-                          {reactPkg.name} playground
-                        </a>
-                      ),
-                      description: (
-                        <Space>
-                          <span>
-                            {reactPkg.name}: <Tag>{reactPkg.version}</Tag>
-                          </span>
-                          <span>
-                            {corePkg.name}: <Tag>{corePkg.version}</Tag>
-                          </span>
-                          <span>
-                            antd: <Tag>{AntdVersion}</Tag>
-                          </span>
-                          <span>
-                            react: <Tag>{React.version}</Tag>
-                          </span>
-                          <span>
-                            lang: <Tag>{getLang()}</Tag>
-                          </span>
-                        </Space>
-                      ),
-                      switcherCfg: { open: true },
-                      exportCfg: { open: true },
-                      advancedSortCfg: {
-                        open: true,
-                      },
-                    }}
-                    onAfterRender={logHandler('onAfterRender')}
-                    onRangeSort={logHandler('onRangeSort')}
-                    onRangeSorted={logHandler('onRangeSorted')}
-                    onMounted={onSheetMounted}
-                    onDestroy={logHandler('onDestroy', () => {
-                      clearInterval(scrollTimer.current!);
-                    })}
-                    onColCellClick={onColCellClick}
-                    onRowCellClick={logHandler('onRowCellClick')}
-                    onCornerCellClick={logHandler(
-                      'onCornerCellClick',
-                      (cellInfo) => {
-                        if (!showCustomTooltip) {
-                          return;
-                        }
-
-                        s2Ref.current?.showTooltip({
-                          position: {
-                            x: cellInfo.event.clientX,
-                            y: cellInfo.event.clientY,
                           },
-                          content: 'click',
-                        });
-                      },
-                    )}
-                    onDataCellClick={logHandler('onDataCellClick')}
-                    onLayoutResize={logHandler('onLayoutResize')}
-                    onCopied={logHandler('onCopied')}
-                    onColCellHidden={logHandler('onColCellHidden')}
-                    onColCellExpanded={logHandler('onColCellExpanded')}
-                    onSelected={logHandler('onSelected')}
-                    onScroll={logHandler('onScroll')}
-                    onRowCellScroll={logHandler('onRowCellScroll')}
-                    onLinkFieldJump={logHandler('onLinkFieldJump', () => {
-                      window.open(
-                        'https://s2.antv.antgroup.com/zh/docs/manual/advanced/interaction/link-jump#%E6%A0%87%E8%AE%B0%E9%93%BE%E6%8E%A5%E5%AD%97%E6%AE%B5',
-                      );
-                    })}
-                    onDataCellBrushSelection={logHandler(
-                      'onDataCellBrushSelection',
-                    )}
-                    onColCellBrushSelection={logHandler(
-                      'onColCellBrushSelection',
-                    )}
-                    onRowCellBrushSelection={logHandler(
-                      'onRowCellBrushSelection',
+                        )}
+                        onDataCellClick={logHandler('onDataCellClick')}
+                        onLayoutResize={logHandler('onLayoutResize')}
+                        onCopied={logHandler('onCopied')}
+                        onColCellHidden={logHandler('onColCellHidden')}
+                        onColCellExpanded={logHandler('onColCellExpanded')}
+                        onSelected={logHandler('onSelected')}
+                        onScroll={logHandler('onScroll')}
+                        onRowCellScroll={logHandler('onRowCellScroll')}
+                        onLinkFieldJump={logHandler('onLinkFieldJump', () => {
+                          window.open(
+                            'https://s2.antv.antgroup.com/zh/docs/manual/advanced/interaction/link-jump#%E6%A0%87%E8%AE%B0%E9%93%BE%E6%8E%A5%E5%AD%97%E6%AE%B5',
+                          );
+                        })}
+                        onDataCellBrushSelection={logHandler(
+                          'onDataCellBrushSelection',
+                        )}
+                        onColCellBrushSelection={logHandler(
+                          'onColCellBrushSelection',
+                        )}
+                        onRowCellBrushSelection={logHandler(
+                          'onRowCellBrushSelection',
+                        )}
+                        onRowCellCollapsed={logHandler('onRowCellCollapsed')}
+                        onRowCellAllCollapsed={logHandler(
+                          'onRowCellAllCollapsed',
+                        )}
+                      />
                     )}
-                    onRowCellCollapsed={logHandler('onRowCellCollapsed')}
-                    onRowCellAllCollapsed={logHandler('onRowCellAllCollapsed')}
+                  </>
+                ),
+              },
+              {
+                key: 'customTree',
+                label: '自定义目录树',
+                children: <CustomTree />,
+              },
+              {
+                key: 'customGrid',
+                label: '自定义行列头',
+                children: <CustomGrid />,
+              },
+              {
+                key: 'strategy',
+                label: '趋势分析表',
+                children: (
+                  <StrategySheet
+                    onRowCellClick={logHandler('onRowCellClick')}
                   />
-                )}
-              </>
-            ),
-          },
-          {
-            key: 'customTree',
-            label: '自定义目录树',
-            children: <CustomTree ref={s2Ref} onMounted={onSheetMounted} />,
-          },
-          {
-            key: 'customGrid',
-            label: '自定义行列头',
-            children: <CustomGrid ref={s2Ref} onMounted={onSheetMounted} />,
-          },
-          {
-            key: 'strategy',
-            label: '趋势分析表',
-            children: (
-              <StrategySheet
-                onRowCellClick={logHandler('onRowCellClick')}
-                onMounted={onSheetMounted}
-                ref={s2Ref}
-              />
-            ),
-          },
-          {
-            key: 'gridAnalysis',
-            label: '网格分析表',
-            children: (
-              <GridAnalysisSheet ref={s2Ref} onMounted={onSheetMounted} />
-            ),
-          },
-          {
-            key: 'editable',
-            label: '编辑表',
-            children: <EditableSheet ref={s2Ref} onMounted={onSheetMounted} />,
-          },
-          {
-            key: 'mobile',
-            label: '移动端表格',
-            children: <MobileSheetComponent />,
-          },
-        ]}
-      ></Tabs>
-    </div>
+                ),
+              },
+              {
+                key: 'gridAnalysis',
+                label: '网格分析表',
+                children: <GridAnalysisSheet />,
+              },
+              {
+                key: 'editable',
+                label: '编辑表',
+                children: <EditableSheet />,
+              },
+              {
+                key: 'mobile',
+                label: '移动端表格',
+                children: <MobileSheetComponent />,
+              },
+            ]}
+          ></Tabs>
+        </div>
+      </PlaygroundContext.Provider>
+    </ConfigProvider>
   );
 }
 
diff --git a/packages/s2-react/src/components/config-provider/index.tsx b/packages/s2-react/src/components/config-provider/index.tsx
index 3dda5da1ba..ff19fd39f5 100644
--- a/packages/s2-react/src/components/config-provider/index.tsx
+++ b/packages/s2-react/src/components/config-provider/index.tsx
@@ -1,14 +1,27 @@
-import React from 'react';
-import { ConfigProvider as AntdConfigProvider } from 'antd';
-import zhCN from 'antd/es/locale/zh_CN';
+import { getLang, type ThemeName } from '@antv/s2';
+import { ConfigProvider as AntdConfigProvider, theme } from 'antd';
 import enUS from 'antd/es/locale/en_US';
-import { getLang } from '@antv/s2';
+import zhCN from 'antd/es/locale/zh_CN';
+import React from 'react';
+
+export interface ConfigProviderProps {
+  children: React.ReactNode;
+  themeName?: ThemeName;
+}
 
-export const ConfigProvider: React.FC<{ children: React.ReactNode }> = (
-  props,
-) => {
-  const { children } = props;
+export const ConfigProvider: React.FC<ConfigProviderProps> = (props) => {
+  const { children, themeName } = props;
   const locale = getLang() === 'zh_CN' ? zhCN : enUS;
+  const isDarkTheme = themeName === 'dark';
 
-  return <AntdConfigProvider locale={locale}>{children}</AntdConfigProvider>;
+  return (
+    <AntdConfigProvider
+      locale={locale}
+      theme={{
+        algorithm: isDarkTheme ? theme.darkAlgorithm : theme.defaultAlgorithm,
+      }}
+    >
+      {children}
+    </AntdConfigProvider>
+  );
 };
diff --git a/packages/s2-react/src/components/drill-down/index.tsx b/packages/s2-react/src/components/drill-down/index.tsx
index a6185ab416..794cef7015 100644
--- a/packages/s2-react/src/components/drill-down/index.tsx
+++ b/packages/s2-react/src/components/drill-down/index.tsx
@@ -1,17 +1,16 @@
-import React, { type ReactNode, useEffect, useState } from 'react';
+import { i18n } from '@antv/s2';
+import type { BaseDataSet, BaseDrillDownComponentProps } from '@antv/s2-shared';
+import { DRILL_DOWN_PRE_CLASS } from '@antv/s2-shared';
 import { Button, Empty, Input, Menu, type MenuProps } from 'antd';
 import cx from 'classnames';
 import { isEmpty } from 'lodash';
-import type { BaseDataSet, BaseDrillDownComponentProps } from '@antv/s2-shared';
-import { i18n } from '@antv/s2';
-import { DRILL_DOWN_PRE_CLASS } from '@antv/s2-shared';
+import React, { useEffect, useState, type ReactNode } from 'react';
 import {
   CalendarIcon,
   LocationIcon,
   SearchIcon,
   TextIcon,
 } from '../icons/index';
-import { ConfigProvider } from '../config-provider';
 
 import '@antv/s2-shared/src/styles/drill-down.less';
 
@@ -103,40 +102,38 @@ export const DrillDown: React.FC<DrillDownProps> = ({
   });
 
   return (
-    <ConfigProvider>
-      <div className={cx(DRILL_DOWN_PRE_CLASS, className)} {...restProps}>
-        <header className={`${DRILL_DOWN_PRE_CLASS}-header`}>
-          <div>{titleText}</div>
-          <Button
-            type="link"
-            disabled={isEmpty(drillFields)}
-            onClick={handleClear}
-          >
-            {clearButtonText}
-          </Button>
-        </header>
-        <Input
-          className={`${DRILL_DOWN_PRE_CLASS}-search`}
-          placeholder={searchText}
-          onChange={handleSearch}
-          onPressEnter={handleSearch}
-          prefix={<SearchIcon />}
-          allowClear
-        />
-        <div className={`${DRILL_DOWN_PRE_CLASS}-extra`}>{extra}</div>
-        {isEmpty(options) && (
-          <Empty
-            imageStyle={{ height: '64px' }}
-            className={`${DRILL_DOWN_PRE_CLASS}-empty`}
-          />
-        )}
-        <Menu
-          className={`${DRILL_DOWN_PRE_CLASS}-menu`}
-          selectedKeys={drillFields}
-          onSelect={handleSelect}
-          items={menusItems}
+    <div className={cx(DRILL_DOWN_PRE_CLASS, className)} {...restProps}>
+      <header className={`${DRILL_DOWN_PRE_CLASS}-header`}>
+        <div>{titleText}</div>
+        <Button
+          type="link"
+          disabled={isEmpty(drillFields)}
+          onClick={handleClear}
+        >
+          {clearButtonText}
+        </Button>
+      </header>
+      <Input
+        className={`${DRILL_DOWN_PRE_CLASS}-search`}
+        placeholder={searchText}
+        onChange={handleSearch}
+        onPressEnter={handleSearch}
+        prefix={<SearchIcon />}
+        allowClear
+      />
+      <div className={`${DRILL_DOWN_PRE_CLASS}-extra`}>{extra}</div>
+      {isEmpty(options) && (
+        <Empty
+          imageStyle={{ height: '64px' }}
+          className={`${DRILL_DOWN_PRE_CLASS}-empty`}
         />
-      </div>
-    </ConfigProvider>
+      )}
+      <Menu
+        className={`${DRILL_DOWN_PRE_CLASS}-menu`}
+        selectedKeys={drillFields}
+        onSelect={handleSelect}
+        items={menusItems}
+      />
+    </div>
   );
 };
diff --git a/packages/s2-react/src/components/sheets/index.tsx b/packages/s2-react/src/components/sheets/index.tsx
index b4691a3fce..c6b2dab002 100644
--- a/packages/s2-react/src/components/sheets/index.tsx
+++ b/packages/s2-react/src/components/sheets/index.tsx
@@ -12,7 +12,7 @@ import { ChartSheet } from './chart-sheet';
 
 const Sheet = React.forwardRef<SpreadSheet, SheetComponentsProps>(
   (props, ref) => {
-    const { sheetType } = props;
+    const { sheetType, themeCfg } = props;
 
     const [s2Instance, setS2Instance] = React.useState<SpreadSheet | null>(
       null,
@@ -50,7 +50,9 @@ const Sheet = React.forwardRef<SpreadSheet, SheetComponentsProps>(
 
     return (
       <SpreadSheetContext.Provider value={s2Instance!}>
-        <ConfigProvider>{CurrentSheet}</ConfigProvider>
+        <ConfigProvider themeName={themeCfg?.name}>
+          {CurrentSheet}
+        </ConfigProvider>
       </SpreadSheetContext.Provider>
     );
   },
diff --git a/packages/s2-react/src/components/sheets/pivot-sheet/index.tsx b/packages/s2-react/src/components/sheets/pivot-sheet/index.tsx
index 66e4581185..fdc99de522 100644
--- a/packages/s2-react/src/components/sheets/pivot-sheet/index.tsx
+++ b/packages/s2-react/src/components/sheets/pivot-sheet/index.tsx
@@ -12,6 +12,7 @@ import { usePivotSheetUpdate } from '../../../hooks';
 import { DrillDown } from '../../drill-down';
 import { BaseSheet } from '../base-sheet';
 import type { SheetComponentOptions, SheetComponentsProps } from '../interface';
+import { ConfigProvider } from '../../config-provider';
 
 export const PivotSheet: React.FC<SheetComponentsProps> = React.memo(
   (props) => {
@@ -25,12 +26,14 @@ export const PivotSheet: React.FC<SheetComponentsProps> = React.memo(
     const onDrillDownIconClick = useLatest<ActionIconCallback>(
       ({ sheetInstance, cacheDrillFields, disabledFields, event }) => {
         const content = (
-          <DrillDown
-            {...partDrillDown?.drillConfig}
-            setDrillFields={setDrillFields}
-            drillFields={cacheDrillFields}
-            disabledFields={disabledFields}
-          />
+          <ConfigProvider themeName={s2?.getThemeName()}>
+            <DrillDown
+              {...partDrillDown?.drillConfig}
+              setDrillFields={setDrillFields}
+              drillFields={cacheDrillFields}
+              disabledFields={disabledFields}
+            />
+          </ConfigProvider>
         );
 
         if (event) {
diff --git a/packages/s2-react/src/components/tooltip/components/summary.tsx b/packages/s2-react/src/components/tooltip/components/summary.tsx
index 1e5f949a85..9f8aae7eee 100644
--- a/packages/s2-react/src/components/tooltip/components/summary.tsx
+++ b/packages/s2-react/src/components/tooltip/components/summary.tsx
@@ -1,13 +1,19 @@
-import React, { useContext } from 'react';
-import { size, sumBy } from 'lodash';
-import { i18n, type TooltipSummaryProps, TOOLTIP_PREFIX_CLS } from '@antv/s2';
+import {
+  TOOLTIP_PREFIX_CLS,
+  i18n,
+  isMobile,
+  type TooltipSummaryProps,
+} from '@antv/s2';
 import cls from 'classnames';
-import { TooltipContext } from '../context';
+import { size, sumBy } from 'lodash';
+import React from 'react';
+import { useSpreadSheetInstance } from '../../../context/SpreadSheetContext';
 
 export const TooltipSummary: React.FC<TooltipSummaryProps> = React.memo(
   (props) => {
     const { summaries = [] } = props;
-    const isMobile = useContext(TooltipContext);
+    const s2 = useSpreadSheetInstance();
+    const isMobileDevice = isMobile(s2?.options?.device);
 
     const renderSelected = () => {
       const count = sumBy(summaries, (item) => size(item?.selectedData));
@@ -15,7 +21,7 @@ export const TooltipSummary: React.FC<TooltipSummaryProps> = React.memo(
       return (
         <div
           className={`${TOOLTIP_PREFIX_CLS}-summary-item`}
-          style={isMobile ? { marginBottom: '6px' } : {}}
+          style={isMobileDevice ? { marginBottom: '6px' } : {}}
         >
           <span className={`${TOOLTIP_PREFIX_CLS}-selected`}>
             {count} {i18n('项')}
diff --git a/packages/s2-react/src/components/tooltip/custom-tooltip.tsx b/packages/s2-react/src/components/tooltip/custom-tooltip.tsx
index a6f89a880a..58cdaaaead 100644
--- a/packages/s2-react/src/components/tooltip/custom-tooltip.tsx
+++ b/packages/s2-react/src/components/tooltip/custom-tooltip.tsx
@@ -5,18 +5,18 @@ import {
   SpreadSheet,
 } from '@antv/s2';
 import React from 'react';
-// eslint-disable-next-line react/no-deprecated
-import { unmountComponentAtNode, render, version } from 'react-dom';
-import { createRoot, type Root } from 'react-dom/client';
-import { Drawer } from 'antd';
 import { LeftOutlined } from '@ant-design/icons';
+import { Drawer } from 'antd';
 import { startsWith } from 'lodash';
+// eslint-disable-next-line react/no-deprecated
+import { render, unmountComponentAtNode, version } from 'react-dom';
+import { createRoot, type Root } from 'react-dom/client';
 import { MOBILE_DRAWER_WIDTH } from '../../common/constant/options';
+import { ConfigProvider } from '../config-provider';
 import type {
   TooltipOperatorMenuOptions,
   TooltipRenderProps,
 } from './interface';
-import { TooltipContext } from './context';
 import { TooltipComponent } from './index';
 import './style.less';
 
@@ -72,22 +72,25 @@ export class CustomTooltip extends BaseTooltip<
           this.hide();
         }}
       >
-        <TooltipContext.Provider value={this.isMobileDevice()}>
-          <TooltipComponent {...tooltipProps} content={content} />
-        </TooltipContext.Provider>
+        <TooltipComponent {...tooltipProps} content={content} />
       </Drawer>
     ) : (
       <TooltipComponent {...tooltipProps} content={content} />
     );
 
+    const themeName = this.spreadsheet.getThemeName();
+    const TooltipContent = (
+      <ConfigProvider themeName={themeName}>{Content}</ConfigProvider>
+    );
+
     if (this.isLegacyReactVersion) {
-      render(Content, this.container);
+      render(TooltipContent, this.container);
 
       return;
     }
 
     this.root ??= createRoot(this.container!);
-    this.root.render(Content);
+    this.root.render(TooltipContent);
   }
 
   hide() {
diff --git a/packages/s2-react/src/context/SpreadSheetContext.tsx b/packages/s2-react/src/context/SpreadSheetContext.tsx
index 092a9ece31..a411dcc2aa 100644
--- a/packages/s2-react/src/context/SpreadSheetContext.tsx
+++ b/packages/s2-react/src/context/SpreadSheetContext.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { SpreadSheet } from '@antv/s2';
 
-export const SpreadSheetContext = React.createContext<SpreadSheet>(
+export const SpreadSheetContext = React.createContext<SpreadSheet | undefined>(
   null as unknown as SpreadSheet,
 );
 
diff --git a/packages/s2-shared/src/styles/drill-down.less b/packages/s2-shared/src/styles/drill-down.less
index bbe829ff88..46d6655c34 100644
--- a/packages/s2-shared/src/styles/drill-down.less
+++ b/packages/s2-shared/src/styles/drill-down.less
@@ -4,6 +4,7 @@
   width: 260px;
   min-height: 20px;
   position: relative;
+  color: var(--antv-s2-font-70, #fff);
 
   &-header {
     display: flex;
@@ -29,12 +30,16 @@
     margin: 0 16px;
     border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 2px;
-    background-color: #fff;
 
     input,
     span {
       font-size: 12px;
     }
+
+    &,
+    .ant-input::placeholder {
+      background-color: var(--antv-s2-block-background, #fff);
+    }
   }
 
   &-extra {