diff --git a/frontend/src/components/canvas/utils/style.js b/frontend/src/components/canvas/utils/style.js
index 0cfe1137af..bc34e44c0c 100644
--- a/frontend/src/components/canvas/utils/style.js
+++ b/frontend/src/components/canvas/utils/style.js
@@ -361,7 +361,7 @@ export function adaptCurTheme(customStyle, customAttr, chartType) {
     }
   }
   customAttr['color'] = { ...canvasStyle.chartInfo.chartColor }
-  customStyle['text'] = { ...canvasStyle.chartInfo.chartTitle, title: customStyle['text']['title'], show: customStyle['text']['show'] }
+  customStyle['text'] = { ...canvasStyle.chartInfo.chartTitle, title: customStyle['text']['title'], show: customStyle['text']['show'], remarkShow: customStyle['text']['remarkShow'], remark: customStyle['text']['remark'] }
   if (customStyle.background) {
     delete customStyle.background
   }
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 2ff280ca1a..e7056cccce 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -211,7 +211,7 @@ export const DEFAULT_TITLE_STYLE_DARK = {
   isBolder: true,
   remarkShow: false,
   remark: '',
-  remarkBackgroundColor: '#ffffffff',
+  remarkBackgroundColor: '#5A5C62',
   fontFamily: 'Microsoft YaHei',
   letterSpace: '0',
   fontShadow: false
diff --git a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
index 738bbae4b4..3168fe96f8 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
@@ -194,6 +194,7 @@
     >
       <remark-editor
         :remark="titleForm.remark"
+        :background="titleForm.remarkBackgroundColor"
         @onRemarkChange="onRemarkChange"
       />
       <div
diff --git a/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue b/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue
index a358884bb1..e90393bb1c 100644
--- a/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue
+++ b/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue
@@ -1,15 +1,13 @@
 <template>
   <div
     style="max-height: 50vh;overflow-y: auto;"
-    :style="customStyle"
+    :style="commonStyle"
   >
-    <div :style="commonStyle">
-      <Editor
-        v-model="content"
-        style="width: 100%;height: 100%"
-        :init="init"
-      />
-    </div>
+    <Editor
+      v-model="content"
+      style="width: 100%;height: 100%"
+      :init="init"
+    />
   </div>
 </template>
 
@@ -30,6 +28,10 @@ export default {
       type: String,
       required: true
     },
+    background: {
+      type: String,
+      required: false
+    },
     showTable: {
       type: Boolean,
       default: true
@@ -100,14 +102,9 @@ export default {
       return style
     },
     commonStyle() {
-      const style = {
-        width: '100%',
-        height: '100%'
+      return {
+        background: this.background
       }
-      if (this.curComponent.commonBackground && this.curComponent.commonBackground.backgroundColorSelect) {
-        style['background-color'] = hexColorToRGBA(this.curComponent.commonBackground.color, this.curComponent.commonBackground.alpha)
-      }
-      return style
     },
     ...
     mapState([
diff --git a/frontend/src/views/chart/view/TitleRemark.vue b/frontend/src/views/chart/view/TitleRemark.vue
index 433d4d4763..151bb41d36 100644
--- a/frontend/src/views/chart/view/TitleRemark.vue
+++ b/frontend/src/views/chart/view/TitleRemark.vue
@@ -39,6 +39,7 @@ export default {
   max-height: 200px;
   overflow-y: auto;
   padding: 10px;
+  color: #000000;
   border-radius: 4px;
 }
 ::-webkit-scrollbar {