diff --git a/package.json b/package.json
index 8e0e9b4f..3e11a1b1 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/state": "^6.4.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.25.1",
     "@vueuse/core": "^10.6.1",
     "@zxcvbn-ts/core": "^3.0.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 80353256..aee7cc95 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ dependencies:
   '@codemirror/state':
     specifier: ^6.4.1
     version: 6.4.1
+  '@codemirror/theme-one-dark':
+    specifier: ^6.1.2
+    version: 6.1.2
   '@codemirror/view':
     specifier: ^6.25.1
     version: 6.25.1
@@ -1664,6 +1667,15 @@ packages:
     resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
     dev: false
 
+  /@codemirror/theme-one-dark@6.1.2:
+    resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
+    dependencies:
+      '@codemirror/language': 6.10.1
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.25.1
+      '@lezer/highlight': 1.2.0
+    dev: false
+
   /@codemirror/view@6.25.1:
     resolution: {integrity: sha512-2LXLxsQnHDdfGzDvjzAwZh2ZviNJm7im6tGpa0IONIDnFd8RZ80D2SNi8PDi6YjKcMoMRK20v6OmKIdsrwsyoQ==}
     dependencies:
diff --git a/src/components/CodeEditor/src/codemirror/CodeMirror.vue b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
index 3e4ffd47..6becfa10 100644
--- a/src/components/CodeEditor/src/codemirror/CodeMirror.vue
+++ b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
@@ -8,6 +8,7 @@ import { EditorState } from '@codemirror/state'
 import { javascript } from '@codemirror/lang-javascript'
 import { json } from '@codemirror/lang-json'
 import { indentWithTab } from '@codemirror/commands'
+import { oneDark } from '@codemirror/theme-one-dark'
 import { MODE } from './../typing'
 
 const props = defineProps({
@@ -67,6 +68,7 @@ async function init() {
         emit('change', context)
       })),
       EditorState.readOnly.of(props.readonly),
+      oneDark,
     ],
   })