diff --git a/frontend/src/styles/element-dark.scss b/frontend/src/styles/element-dark.scss
index 901b3cfc8..fb0f4f334 100644
--- a/frontend/src/styles/element-dark.scss
+++ b/frontend/src/styles/element-dark.scss
@@ -117,6 +117,8 @@ html.dark {
     --el-box-shadow-dark: 0px 16px 48px 16px rgba(36, 38, 51, 0.72), 0px 12px 32px #242633, 0px 8px 16px -8px #242633;
     --el-bg-color: var(--panel-main-bg-color-9);
     --el-bg-color-overlay: var(--panel-main-bg-color-9);
+    --panel-code-header-footer-color: var(--panel-main-bg-color-6);
+
 
     --el-text-color-placeholder: var(--panel-main-bg-color-4);
 
diff --git a/frontend/src/styles/element.scss b/frontend/src/styles/element.scss
index 250d20610..63e31cbf0 100644
--- a/frontend/src/styles/element.scss
+++ b/frontend/src/styles/element.scss
@@ -23,6 +23,7 @@
     --el-color-primary-light-7: var(--panel-color-primary-light-7);
     --el-color-primary-light-8: var(--panel-color-primary-light-8);
     --el-color-primary-light-9: var(--panel-color-primary-light-9);
+    --panel-code-header-footer-color: var(--panel-color-primary-light-9);
 
     --el-text-color-regular: #646a73;
 }
diff --git a/frontend/src/views/host/file-management/code-editor/index.vue b/frontend/src/views/host/file-management/code-editor/index.vue
index 6de741e9c..06eb4efc1 100644
--- a/frontend/src/views/host/file-management/code-editor/index.vue
+++ b/frontend/src/views/host/file-management/code-editor/index.vue
@@ -1066,10 +1066,10 @@ defineExpose({ acceptParams });
     text-overflow: ellipsis;
 }
 .code-header {
-    background-color: var(--panel-color-primary-light-9);
+    background-color: var(--panel-code-header-footer-color);
 }
 .code-footer {
-    background-color: var(--panel-color-primary-light-9);
+    background-color: var(--panel-code-header-footer-color);
 }
 .card-action {
     .el-button + .el-button {