diff --git a/frontend/src/components/canvas/custom-component/DeFrame.vue b/frontend/src/components/canvas/custom-component/DeFrame.vue
index d7c2eabc70..8db2bed8b4 100644
--- a/frontend/src/components/canvas/custom-component/DeFrame.vue
+++ b/frontend/src/components/canvas/custom-component/DeFrame.vue
@@ -95,7 +95,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #FFFFFF;
+    background-color: rgba(255,255,255,0.3);
     font-size: 12px;
     color: #9ea6b2;
   }
diff --git a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
index e9fe5ba9c4..48c8b2633f 100644
--- a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
+++ b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue
@@ -141,7 +141,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: beige;
+    background-color: rgba(245, 245, 220, 0.3);
     font-size: 12px;
     color: #000000;
   }
diff --git a/frontend/src/components/canvas/custom-component/DeVideo.vue b/frontend/src/components/canvas/custom-component/DeVideo.vue
index 0bffa3afa5..40f705ce53 100644
--- a/frontend/src/components/canvas/custom-component/DeVideo.vue
+++ b/frontend/src/components/canvas/custom-component/DeVideo.vue
@@ -139,7 +139,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #FFFFFF;
+    background-color: rgba(255,255,255,0.3);
     font-size: 12px;
     color: #9ea6b2;
   }
diff --git a/frontend/src/components/canvas/utils/style.js b/frontend/src/components/canvas/utils/style.js
index 0ce6f56210..99c9c236a1 100644
--- a/frontend/src/components/canvas/utils/style.js
+++ b/frontend/src/components/canvas/utils/style.js
@@ -1,5 +1,6 @@
 import { sin, cos } from '@/components/canvas/utils/translate'
 import store from '@/store'
+import { colorReverse } from '@/components/canvas/utils/utils'
 
 export const LIGHT_THEME_COLOR_MAIN = '#000000'
 export const LIGHT_THEME_COLOR_SLAVE1 = '#CCCCCC'
@@ -257,6 +258,10 @@ export const THEME_ATTR_TRANS_MAIN = {
   }
 }
 
+export const THEME_ATTR_TRANS_SLAVE1_BACKGROUND = {
+  'tooltip': ['backgroundColor']
+}
+
 // 移动端特殊属性
 export const mobileSpecialProps = {
   'lineWidth': 3, // 线宽固定值
@@ -325,10 +330,12 @@ export function adaptCurTheme(customStyle, customAttr) {
     recursionThemTransObj(THEME_STYLE_TRANS_MAIN, customStyle, LIGHT_THEME_COLOR_MAIN)
     recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, LIGHT_THEME_COLOR_SLAVE1)
     recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, LIGHT_THEME_COLOR_MAIN)
+    recursionThemTransObj(THEME_ATTR_TRANS_SLAVE1_BACKGROUND, customAttr, LIGHT_THEME_COMPONENT_BACKGROUND)
   } else {
     recursionThemTransObj(THEME_STYLE_TRANS_MAIN, customStyle, DARK_THEME_COLOR_MAIN)
     recursionThemTransObj(THEME_STYLE_TRANS_SLAVE1, customStyle, DARK_THEME_COLOR_SLAVE1)
     recursionThemTransObj(THEME_ATTR_TRANS_MAIN, customAttr, DARK_THEME_COLOR_MAIN)
+    recursionThemTransObj(THEME_ATTR_TRANS_SLAVE1_BACKGROUND, customAttr, DARK_THEME_COMPONENT_BACKGROUND)
   }
   customAttr['color'] = { ...canvasStyle.chartInfo.chartColor }
   customStyle['text'] = { ...canvasStyle.chartInfo.chartTitle, title: customStyle['text']['title'] }
@@ -347,6 +354,14 @@ export function adaptCurThemeCommonStyle(component) {
     for (const styleKey in filterStyle) {
       component.style[styleKey] = filterStyle[styleKey]
     }
+  } else {
+    if (component.style.color) {
+      if (store.state.canvasStyleData.panel.themeColor === 'light') {
+        component.style.color = LIGHT_THEME_COLOR_MAIN
+      } else {
+        component.style.color = DARK_THEME_COLOR_MAIN
+      }
+    }
   }
   return component
 }
diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js
index 009487fab1..b9d25c17a9 100644
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/frontend/src/components/canvas/utils/utils.js
@@ -1,5 +1,5 @@
 import {
-  BASE_MOBILE_STYLE, COMMON_BACKGROUND, COMMON_BACKGROUND_NONE,
+  BASE_MOBILE_STYLE, COMMON_BACKGROUND_NONE,
   HYPERLINKS
 } from '@/components/canvas/custom-component/component-list'
 
@@ -204,3 +204,9 @@ export function dataURLToBlob(dataurl) { // ie 图片转格式
   }
   return new Blob([u8arr], { type: mime })
 }
+
+export function colorReverse(OldColorValue) {
+  OldColorValue = '0x' + OldColorValue.replace(/#/g, '')
+  const str = '000000' + (0xFFFFFF - OldColorValue).toString(16)
+  return '#' + str.substring(str.length - 6, str.length)
+}
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 7aeeb89626..1995bdfe1b 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -1353,17 +1353,6 @@ export default {
     height: 600px;
   }
 
-  .info-class {
-    text-align: center;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #FFFFFF;
-    font-size: 12px;
-    color: #9ea6b2;
-  }
-
   ::-webkit-scrollbar {
     width: 2px !important;
     height: 2px !important;