diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index ef0bbacbd..59127366c 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -363,3 +363,8 @@ td .nz-icon-gear:before{
     }
   }
 }
+.chart-bar,.chart-gauge,.chart-time-series,.chart-treemap,.chart-pie {
+  background-color: $--chart-background-color !important;
+  border-color: $--chart-border-color !important;
+  color: $--color-text-regular !important;
+}
diff --git a/nezha-fronted/src/components/chart/chart/options/chartBar.js b/nezha-fronted/src/components/chart/chart/options/chartBar.js
index 75b6c0648..85cbc4225 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartBar.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartBar.js
@@ -6,7 +6,8 @@ const chartBarOption = {
     extraCssText: 'z-index:1000;',
     z: 9,
     animation: false,
-    appendToBody: true
+    appendToBody: true,
+    className: 'chart-bar'
   },
   legend: {
     show: false
diff --git a/nezha-fronted/src/components/chart/chart/options/chartGauge.js b/nezha-fronted/src/components/chart/chart/options/chartGauge.js
index a6d928d98..4977610a8 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartGauge.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartGauge.js
@@ -6,7 +6,8 @@ const chartGaugeOption = {
     extraCssText: 'z-index:1000;',
     z: 9,
     animation: false,
-    appendToBody: true
+    appendToBody: true,
+    className: 'chart-gauge'
   },
   series: [
     {
diff --git a/nezha-fronted/src/components/chart/chart/options/chartPie.js b/nezha-fronted/src/components/chart/chart/options/chartPie.js
index 79524c40a..a7410e867 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartPie.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartPie.js
@@ -6,7 +6,8 @@ const chartPieOption = {
     extraCssText: 'z-index:1000;',
     z: 9,
     animation: false,
-    appendToBody: true
+    appendToBody: true,
+    className: 'chart-pie'
   },
   legend: {
     show: false
diff --git a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
index 06f9fc0c4..fc47e9bf8 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
@@ -37,7 +37,8 @@ export const chartTimeSeriesLineOption = {
     extraCssText: 'z-index:99999999;',
     z: 9,
     animation: false,
-    appendToBody: true
+    appendToBody: true,
+    className: 'chart-time-series'
     // formatter: 动态生成
   },
   color: initColor(),
diff --git a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js
index b38d1e55d..06abb88d7 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js
@@ -8,6 +8,7 @@ const chartTreemapOption = {
     z: 9,
     animation: false,
     appendToBody: true,
+    className: 'chart-treemap',
     formatter: function (info) {
       const value = info.value
       const treePathInfo = info.treePathInfo