diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 5dbc9409e..d65a732e7 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -442,3 +442,15 @@ html {
 .el-tag {
     cursor: pointer;
 }
+
+.monaco-editor-tree-light .el-tree-node__content:hover {
+    background-color: #e5eefd;
+}
+
+.monaco-editor-tree-dark .el-tree-node__content:hover {
+    background-color: #111417;
+}
+
+.monaco-editor-tree-dark .el-tree-node.is-current > .el-tree-node__content {
+    background-color: #111417;
+}
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 d2c94b780..99f717df5 100644
--- a/frontend/src/views/host/file-management/code-editor/index.vue
+++ b/frontend/src/views/host/file-management/code-editor/index.vue
@@ -344,6 +344,21 @@ const changeLanguage = () => {
 
 const changeTheme = () => {
     monaco.editor.setTheme(config.theme);
+    const themes = {
+        vs: 'monaco-editor-tree-light',
+        'vs-dark': 'monaco-editor-tree-dark',
+        'hc-black': 'monaco-editor-tree-dark',
+    };
+
+    if (treeRef.value) {
+        Object.values(themes).forEach((themeClass) => {
+            treeRef.value.$el.classList.remove(themeClass);
+        });
+        if (themes[config.theme]) {
+            treeRef.value.$el.classList.add(themes[config.theme]);
+        }
+    }
+
     localStorage.setItem(codeThemeKey, config.theme);
 };
 
@@ -455,6 +470,7 @@ const getDirectoryPath = (filePath: string) => {
 
 const onOpen = () => {
     initEditor();
+    changeTheme();
     search(directoryPath.value).then((res) => {
         handleSearchResult(res);
     });