diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 5e97a167be..c6c2332292 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -1512,9 +1512,13 @@ const drop = (ev: MouseEvent, type = 'xAxis') => {
         </div>
         <div v-if="!canvasCollapse.chartAreaCollapse" style="width: 240px" class="view-panel-row">
           <el-row class="editor-title">
-            <span class="name-area" @dblclick="editComponentName" id="component-name">{{
-              view.title
-            }}</span>
+            <span
+              class="name-area"
+              :class="{ 'component-name-dark': themes === 'dark' }"
+              @dblclick="editComponentName"
+              id="component-name"
+              >{{ view.title }}</span
+            >
           </el-row>
 
           <el-row style="height: calc(100vh - 110px); overflow-y: auto">
@@ -2890,6 +2894,7 @@ const drop = (ev: MouseEvent, type = 'xAxis') => {
   <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
   <Teleport v-if="componentNameEdit" :to="'#component-name'">
     <input
+      :effect="themes"
       width="100%"
       @change="onComponentNameChange"
       ref="componentNameInput"
@@ -4020,4 +4025,19 @@ span {
     height: 100%;
   }
 }
+
+.component-name-dark {
+  input {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    color: @dv-canvas-main-font-color;
+    background-color: #050e21;
+    outline: none;
+    border: 1px solid #295acc;
+    border-radius: 4px;
+    padding: 0 4px;
+    height: 100%;
+  }
+}
 </style>