diff --git a/src/assets/main.css b/src/assets/main.css
index a7367c7..d9ea050 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -567,4 +567,36 @@ body,
 
 .dark::view-transition-new(root) {
     z-index: 1;
+}
+
+/* 整体编辑器区域 */
+.monaco-editor.vs {
+    background-color: #f5f7fa;
+}
+
+/* gutter（行号区） */
+.monaco-editor.vs .margin {
+    background-color: #f0f2f5;
+    box-shadow: inset -1px 0 0 #dcdfe6;
+}
+
+/* 内容区 */
+.monaco-editor.vs .monaco-editor-background {
+    background-color: #ffffff;
+}
+
+/* Dark Mode Editor Contrast */
+.dark .monaco-editor.vs-dark {
+    background-color: var(--el-bg-color);
+    border: none;
+}
+
+.dark .monaco-editor.vs-dark .margin {
+    background-color: #252526 !important;
+    box-shadow: inset -1px 0 0 #424242;
+    border: none;
+}
+
+.dark .monaco-editor.vs-dark .monaco-editor-background {
+    background-color: #1e1e1e !important;
 }
\ No newline at end of file
diff --git a/src/vendors/monaco-editor.js b/src/vendors/monaco-editor.js
index aa190a8..9e8db5e 100644
--- a/src/vendors/monaco-editor.js
+++ b/src/vendors/monaco-editor.js
@@ -17,7 +17,6 @@ const defaultConfig = {
   automaticLayout: true,
   autoIndent: 'full',
   scrollBeyondLastLine: false,
-  theme: 'vs-dark',
   wordWrap: 'on',
   readOnly: true
 }
diff --git a/src/views/tools/Charts.vue b/src/views/tools/Charts.vue
index 2b0d63c..6f1d2c0 100644
--- a/src/views/tools/Charts.vue
+++ b/src/views/tools/Charts.vue
@@ -45,6 +45,7 @@ const chartConfig = {
     <v-chart
       v-if="chartConfig"
       class="chart"
+      :key="theme"
       :theme="theme"
       :option="chartConfig"
       autoresize
diff --git a/src/views/tools/Editors.vue b/src/views/tools/Editors.vue
index a323294..31f0533 100644
--- a/src/views/tools/Editors.vue
+++ b/src/views/tools/Editors.vue
@@ -1,9 +1,17 @@
 <script setup>
 import { useMonacoEditorOptions } from '@/vendors/monaco-editor'
 import { $copyText } from '@/utils'
+import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
+import { computed } from 'vue'
+
+const globalConfigStore = useGlobalConfigStore()
 const { contentRef, languageRef, editorRef, monacoEditorOptions, formatDocument } = useMonacoEditorOptions({
   readOnly: false
 })
+const theme = computed(() => {
+  return globalConfigStore.isDarkTheme ? 'vs-dark' : 'vs'
+})
+
 </script>
 
 <template>
@@ -13,6 +21,7 @@ const { contentRef, languageRef, editorRef, monacoEditorOptions, formatDocument
       :language="languageRef"
       height="400px"
       :options="monacoEditorOptions"
+      :theme="theme"
       @mount="editorRef=$event"
     />
     <el-footer