diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index e658c49cd7..68a044312f 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -109,7 +109,7 @@
       @onJumpClick="jumpClick"
     />
     <div style="position: absolute;left: 8px;bottom:8px;">
-      <drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
+      <drill-path :drill-filters="drillFilters" :theme-style="element.commonBackground" @onDrillJump="drillJump" />
     </div>
   </div>
 </template>
@@ -582,14 +582,14 @@ export default {
             this.chart['position'] = this.inTab ? 'tab' : 'panel'
             // 记录当前数据
             this.panelViewDetailsInfo[id] = JSON.stringify(this.chart)
-            if(this.element.needAdaptor){
+            if (this.element.needAdaptor) {
               const customStyleObj = JSON.parse(this.chart.customStyle)
               const customAttrObj = JSON.parse(this.chart.customAttr)
               adaptCurTheme(customStyleObj, customAttrObj)
               this.chart.customStyle = JSON.stringify(customStyleObj)
               this.chart.customAttr = JSON.stringify(customAttrObj)
-              viewEditSave(this.panelInfo.id,{ id: this.chart.id, customStyle: this.chart.customStyle, customAttr: this.chart.customAttr })
-              this.$store.commit('adaptorStatusDisable',this.element.id)
+              viewEditSave(this.panelInfo.id, { id: this.chart.id, customStyle: this.chart.customStyle, customAttr: this.chart.customAttr })
+              this.$store.commit('adaptorStatusDisable', this.element.id)
             }
             this.sourceCustomAttrStr = this.chart.customAttr
             this.sourceCustomStyleStr = this.chart.customStyle
diff --git a/frontend/src/views/background/index.vue b/frontend/src/views/background/index.vue
index 5b1ff9de34..9474251b10 100644
--- a/frontend/src/views/background/index.vue
+++ b/frontend/src/views/background/index.vue
@@ -80,7 +80,7 @@
           </el-col>
           <el-col :span="20" class="main-row">
             <el-row v-for="(value, key) in BackgroundShowMap" :key="key">
-<!--              <el-col :span="24"><span>{{ key }}</span> </el-col>-->
+
               <el-col
                 v-for="item in value"
                 :key="item.id"
@@ -132,7 +132,7 @@
 import { queryBackground } from '@/api/background/background'
 import BackgroundItem from '@/views/background/BackgroundItem'
 import { mapState } from 'vuex'
-import {deepCopy, imgUrlTrans} from '@/components/canvas/utils/utils'
+import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import { COLOR_PANEL } from '@/views/chart/chart/chart'
 import { uploadFileResult } from '@/api/staticResource/staticResource'
 import { COMMON_BACKGROUND_NONE } from '@/components/canvas/custom-component/component-list'
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 7c6afd991e..2593b9d237 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -220,6 +220,15 @@ export default {
       let themeStyle = null
       if (this.themeStyle) {
         themeStyle = JSON.parse(JSON.stringify(this.themeStyle))
+        if (themeStyle && themeStyle.commonBackground) {
+          const viewBGColor = themeStyle.commonBackground.color
+          if (viewBGColor !== '#FFFFFF') {
+            const reverseValue = reverseColor(viewBGColor)
+            this.buttonTextColor = reverseValue
+          } else {
+            this.buttonTextColor = null
+          }
+        }
         if (themeStyle && themeStyle.backgroundColorSelect) {
           const panelColor = themeStyle.color
           if (panelColor !== '#FFFFFF') {
@@ -310,6 +319,15 @@ export default {
       let themeStyle = null
       if (this.themeStyle) {
         themeStyle = JSON.parse(JSON.stringify(this.themeStyle))
+        if (themeStyle && themeStyle.commonBackground) {
+          const viewBGColor = themeStyle.commonBackground.color
+          if (viewBGColor !== '#FFFFFF') {
+            const reverseValue = reverseColor(viewBGColor)
+            this.buttonTextColor = reverseValue
+          } else {
+            this.buttonTextColor = null
+          }
+        }
         if (themeStyle && themeStyle.backgroundColorSelect) {
           const panelColor = themeStyle.color
           if (panelColor !== '#FFFFFF') {
diff --git a/frontend/src/views/chart/view/DrillPath.vue b/frontend/src/views/chart/view/DrillPath.vue
index e1f8a70ba6..825f889e06 100644
--- a/frontend/src/views/chart/view/DrillPath.vue
+++ b/frontend/src/views/chart/view/DrillPath.vue
@@ -1,34 +1,78 @@
 <template>
   <div v-if="drillFilters && drillFilters.length > 0">
     <el-breadcrumb separator-class="el-icon-arrow-right" class="drill-style">
-      <el-breadcrumb-item class="drill-item" @click.native="drillJump(0)">{{ $t('commons.all') }}</el-breadcrumb-item>
-      <el-breadcrumb-item v-for="(filter,index) in drillFilters" :key="index" class="drill-item" @click.native="drillJump(index + 1)">{{ filter.value[0] }}</el-breadcrumb-item>
+      <el-breadcrumb-item class="drill-item" @click.native="drillJump(0)">
+        <span :style="{'color': textColor}">{{ $t('commons.all') }}</span>
+      </el-breadcrumb-item>
+      <el-breadcrumb-item v-for="(filter,index) in drillFilters" :key="index" class="drill-item" @click.native="drillJump(index + 1)">
+        <span :style="{'color': textColor}">{{ filter.value[0] }}</span>
+      </el-breadcrumb-item>
     </el-breadcrumb>
   </div>
 </template>
 
 <script>
+import { reverseColor } from '@/views/chart/chart/common/common'
 export default {
   name: 'DrillPath',
   props: {
     drillFilters: {
       type: Array,
       default: () => []
+    },
+    themeStyle: {
+      type: Object,
+      required: false,
+      default: null
     }
   },
   data() {
     return {
+      textColor: null
     }
   },
   watch: {
+    'themeStyle.commonBackground.color'() {
+      this.loadThemeStyle()
+    },
+    'themeStyle.color'() {
+      this.loadThemeStyle()
+    }
   },
   mounted() {
   },
+  created() {
+    this.loadThemeStyle()
+  },
   methods: {
     drillJump(index) {
       if (index < this.drillFilters.length) {
         this.$emit('onDrillJump', index)
       }
+    },
+    loadThemeStyle() {
+      let themeStyle = null
+      if (this.themeStyle) {
+        themeStyle = JSON.parse(JSON.stringify(this.themeStyle))
+        if (themeStyle && themeStyle.commonBackground) {
+          const viewBGColor = themeStyle.commonBackground.color
+          if (viewBGColor !== '#FFFFFF') {
+            const reverseValue = reverseColor(viewBGColor)
+            this.textColor = reverseValue
+          } else {
+            this.textColor = null
+          }
+        }
+        if (themeStyle && themeStyle.backgroundColorSelect) {
+          const panelColor = themeStyle.color
+          if (panelColor !== '#FFFFFF') {
+            const reverseValue = reverseColor(panelColor)
+            this.textColor = reverseValue
+          } else {
+            this.textColor = null
+          }
+        }
+      }
     }
   }
 }