diff --git a/nezha-fronted/src/assets/css/components/charts/chart.scss b/nezha-fronted/src/assets/css/components/charts/chart.scss
index 27630fe98..d4ec28fca 100644
--- a/nezha-fronted/src/assets/css/components/charts/chart.scss
+++ b/nezha-fronted/src/assets/css/components/charts/chart.scss
@@ -35,6 +35,9 @@
   line-height: 18px;
   position: absolute;
   padding-bottom:3px;
+  .legend-container__span,.legend-option-cell {
+    color: $--color-text-regular;
+  }
 }
 .legend-container .option-th{
   color:#33a2e5;
@@ -498,7 +501,7 @@
           overflow: hidden;
           white-space: nowrap;
           border-left: 1px solid $--border-color-light;
-          color: #1a1a1a;
+          color: $--color-text-regular;
           width: 65%;
           height: 99%;
         }
diff --git a/nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss b/nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss
index 632461712..e7440279d 100644
--- a/nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss
+++ b/nezha-fronted/src/assets/css/components/common/popBox/selectAssetMetaGroup.scss
@@ -58,3 +58,6 @@
 .panel-dropdown-btn-delete:hover {
   color: #D96D7A;
 }
+.el-popover__reference {
+  color: $--color-text-regular;
+}
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss b/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss
index 46058dcb5..a62d24ef4 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss
@@ -4,6 +4,9 @@
   display: flex;
   .no-resize{
     background: rgba(255,255,255,0);
+    .el-textarea__inner {
+      border: 1px solid $--border-color-light;
+    }
   }
 
   .query-row {
diff --git a/nezha-fronted/src/components/charts/chart-bar-statistics.vue b/nezha-fronted/src/components/charts/chart-bar-statistics.vue
index 086c73014..c192a41fc 100644
--- a/nezha-fronted/src/components/charts/chart-bar-statistics.vue
+++ b/nezha-fronted/src/components/charts/chart-bar-statistics.vue
@@ -56,7 +56,7 @@
         <div class="chart-no-data" v-show="noData">No Data</div>
         <div class='legend-container' ref="legendArea" v-show="firstShow">
           <div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
           </div>
         </div>
         <!--全屏-->
@@ -73,7 +73,7 @@
             <div :id="'pie-chart-screen-'+chartIndex" ref="pieChartScreen" style="width: 100%;height: 100%;"></div>
             <div :id="'screenLegendArea'+chartIndex"   class="legend-container legend-container-screen">
               <div v-for="(item, index) in legendScreen" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                 <br/><!--bgColorList[index]-->
               </div>
             </div>
diff --git a/nezha-fronted/src/components/charts/chart-pie.vue b/nezha-fronted/src/components/charts/chart-pie.vue
index 867556d1d..40d8e42eb 100644
--- a/nezha-fronted/src/components/charts/chart-pie.vue
+++ b/nezha-fronted/src/components/charts/chart-pie.vue
@@ -56,7 +56,7 @@
         <div class="chart-no-data" v-show="noData">No Data</div>
         <div class='legend-container' ref="legendArea" v-show="firstShow">
           <div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
           </div>
         </div>
         <!--全屏-->
@@ -73,7 +73,7 @@
             <div :id="'pie-chart-screen-'+chartIndex" ref="pieChartScreen" style="width: 100%;height: 100%;"></div>
             <div :id="'screenLegendArea'+chartIndex"   class="legend-container legend-container-screen">
               <div v-for="(item, index) in legendScreen" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                 <br/><!--bgColorList[index]-->
               </div>
             </div>
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index 31bef095c..e7afb3083 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -60,7 +60,7 @@
           <template v-if="!hasLegendOptions">
             <div @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"  class="legend-container legend-container-screen" ref="screenLegendArea" v-show="showLegend">
               <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                 <br/><!--bgColorList[index]-->
               </div>
             </div>
@@ -79,7 +79,7 @@
                 <tr v-for="(item, index) in screenLegendList" :key="'legend_' + item.name+'_'+index">
                   <td>
                     <div :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" >
-                      <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                      <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                     </div>
                   </td>
                   <template v-for="(legendOption, i) in screenLegendOptions">
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 4d62f538c..543fbe2d4 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -78,7 +78,7 @@
         <template v-if="!hasLegendOptions">
           <div class='legend-container' ref="legendArea" v-show="firstShow">
             <div v-for="(item, index) in legendListMore" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
-              <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+              <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
             </div>
           </div>
         </template>
@@ -96,7 +96,7 @@
               <tr v-for="(item, index) in legendListMore" :key="'legend_' + item.name+'_'+index">
                 <td>
                   <div :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" >
-                    <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                    <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                   </div>
                 </td>
                 <template v-for="(legendOption, i) in legendOptions">
@@ -158,7 +158,7 @@
           <template v-if="!hasLegendOptions">
             <div :id="'screenLegendArea'+chartIndex"  @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" v-show="showLegend">
               <div v-for="(item, index) in screenLegendListMore" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
-                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                 <br/><!--bgColorList[index]-->
               </div>
             </div>
@@ -177,7 +177,7 @@
                 <tr v-for="(item, index) in screenLegendListMore" :key="'legend_' + item.name+'_'+index">
                   <td>
                     <div :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" >
-                      <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                      <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span><span class="legend-container__span">{{item.alias?item.alias:item.name}}</span>
                     </div>
                   </td>
                   <template v-for="(legendOption, i) in screenLegendOptions">