diff --git a/package.json b/package.json
index f700822e5..63607264d 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,10 @@
     "@codemirror/lang-html": "^6.4.7",
     "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/lang-xml": "^6.0.2",
+    "@codemirror/language": "^6.9.3",
     "@codemirror/lint": "^6.4.2",
     "@codemirror/state": "^6.3.3",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.22.3",
     "@geoman-io/leaflet-geoman-free": "^2.15.0",
     "@highlightjs/vue-plugin": "^2.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7040a5482..406aa0f09 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,12 +23,18 @@ dependencies:
   '@codemirror/lang-xml':
     specifier: ^6.0.2
     version: 6.0.2(@codemirror/view@6.22.3)
+  '@codemirror/language':
+    specifier: ^6.9.3
+    version: 6.9.3
   '@codemirror/lint':
     specifier: ^6.4.2
     version: 6.4.2
   '@codemirror/state':
     specifier: ^6.3.3
     version: 6.3.3
+  '@codemirror/theme-one-dark':
+    specifier: ^6.1.2
+    version: 6.1.2
   '@codemirror/view':
     specifier: ^6.22.3
     version: 6.22.3
@@ -2049,6 +2055,15 @@ packages:
     resolution: {integrity: sha512-0wufKcTw2dEwEaADajjHf6hBy1sh3M6V0e+q4JKIhLuiMSe5td5HOWpUdvKth1fT1M9VYOboajoBHpkCd7PG7A==}
     dev: false
 
+  /@codemirror/theme-one-dark@6.1.2:
+    resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
+    dependencies:
+      '@codemirror/language': 6.9.3
+      '@codemirror/state': 6.3.3
+      '@codemirror/view': 6.22.3
+      '@lezer/highlight': 1.2.0
+    dev: false
+
   /@codemirror/view@6.22.3:
     resolution: {integrity: sha512-rqnq+Zospwoi3x1vZ8BGV1MlRsaGljX+6qiGYmIpJ++M+LCC+wjfDaPklhwpWSgv7pr/qx29KiAKQBH5+DOn4w==}
     dependencies:
diff --git a/src/components/editor/Editor.vue b/src/components/editor/Editor.vue
index 351cbfa10..f86f9b66b 100644
--- a/src/components/editor/Editor.vue
+++ b/src/components/editor/Editor.vue
@@ -5,6 +5,8 @@ import { undo, redo, undoDepth, redoDepth } from '@codemirror/commands'
 import basic from './lang-basic'
 import { EditorPlugin } from './editor'
 import { useStyleStore } from '@/stores/style'
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { oneDarkTheme, oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
 
 const props = withDefaults(defineProps<{
   inputDefault?: string,
@@ -20,6 +22,7 @@ const emits = defineEmits<{(e: 'change', v: string): void}>()
 const editor = ref<HTMLDivElement>()
 let cm: EditorView
 const themeCompartment = new Compartment()
+const hightLightCompartment = new Compartment()
 const hasUndo = ref(false)
 const hasRedo = ref(false)
 
@@ -28,7 +31,8 @@ onMounted(() => {
     ...basic.extensions,
     ...props.plugin?.extensions || [],
     EditorView.updateListener.of(onChange),
-    themeCompartment.of(EditorView.theme({}, { dark: useStyleStore().isDark }))
+    themeCompartment.of(useStyleStore().isDark ? oneDarkTheme : EditorView.theme({}, { dark: false })),
+    hightLightCompartment.of(useStyleStore().isDark ? syntaxHighlighting(oneDarkHighlightStyle, { fallback: true }) : syntaxHighlighting(defaultHighlightStyle))
   ]
   if (props.placeholder) {
     extensions.push(PlaceHolder(props.placeholder))
@@ -48,7 +52,10 @@ onBeforeUnmount(() => {
 
 watch(() => useStyleStore().isDark, (val) => {
   cm.dispatch({
-    effects: themeCompartment.reconfigure(EditorView.theme({}, { dark: val }))
+    effects: [
+      themeCompartment.reconfigure(val ? oneDarkTheme : EditorView.theme({}, { dark: false })),
+      hightLightCompartment.reconfigure(val ? syntaxHighlighting(oneDarkHighlightStyle, { fallback: true }) : syntaxHighlighting(defaultHighlightStyle))
+    ]
   })
 })
 
diff --git a/src/components/editor/EditorMini.vue b/src/components/editor/EditorMini.vue
index 26bdf10a7..1523404c4 100644
--- a/src/components/editor/EditorMini.vue
+++ b/src/components/editor/EditorMini.vue
@@ -4,6 +4,8 @@ import { Compartment, EditorState } from '@codemirror/state'
 import mini from './lang-mini'
 import { useStyleStore } from '@/stores/style'
 import { EditorPlugin } from '@/components/editor/editor'
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { oneDarkTheme, oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
 
 const props = withDefaults(defineProps<{
   inputDefault?: string,
@@ -19,13 +21,15 @@ const emits = defineEmits<{(e: 'change', v: string): void}>()
 const editor = ref<HTMLDivElement>()
 let cm: EditorView
 const themeCompartment = new Compartment()
+const hightLightCompartment = new Compartment()
 
 onMounted(() => {
   const extensions = [
     ...mini.extensions,
     ...props.plugin ? props.plugin.miniExtensions || props.plugin.extensions : [],
     EditorView.updateListener.of(onChange),
-    themeCompartment.of(EditorView.theme({}, { dark: useStyleStore().isDark }))
+    themeCompartment.of(useStyleStore().isDark ? oneDarkTheme : EditorView.theme({}, { dark: false })),
+    hightLightCompartment.of(useStyleStore().isDark ? syntaxHighlighting(oneDarkHighlightStyle, { fallback: true }) : syntaxHighlighting(defaultHighlightStyle))
   ]
   if (props.placeholder) {
     extensions.push(PlaceHolder(props.placeholder))
@@ -45,7 +49,10 @@ onBeforeUnmount(() => {
 
 watch(() => useStyleStore().isDark, (val) => {
   cm.dispatch({
-    effects: themeCompartment.reconfigure(EditorView.theme({}, { dark: val }))
+    effects: [
+      themeCompartment.reconfigure(val ? oneDarkTheme : EditorView.theme({}, { dark: false })),
+      hightLightCompartment.reconfigure(val ? syntaxHighlighting(oneDarkHighlightStyle, { fallback: true }) : syntaxHighlighting(defaultHighlightStyle))
+    ]
   })
 })