diff --git a/package-lock.json b/package-lock.json
index a29be3324..8327421b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "@codemirror/language": "^6.2.1",
         "@codemirror/legacy-modes": "^6.1.0",
         "@codemirror/state": "^6.1.0",
+        "@codemirror/theme-one-dark": "^6.0.0",
         "@codemirror/view": "^6.1.2",
         "clipboard": "^2.0.11",
         "codemirror": "^6.0.1",
@@ -246,6 +247,17 @@
       "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.0.tgz",
       "integrity": "sha512-qbUr94DZTe6/V1VS7LDLz11rM/1t/nJxR1El4I6UaxDEdc0aZZvq6JCLJWiRmUf95NRAnDH6fhXn+PWp9wGCIg=="
     },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.0.0.tgz",
+      "integrity": "sha512-jTCfi1I8QT++3m21Ui6sU8qwu3F/hLv161KLxfvkV1cYWSBwyUanmQFs89ChobQjBHi2x7s2k71wF9WYvE8fdw==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
     "node_modules/@codemirror/view": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.1.2.tgz",
@@ -2477,6 +2489,17 @@
       "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.1.0.tgz",
       "integrity": "sha512-qbUr94DZTe6/V1VS7LDLz11rM/1t/nJxR1El4I6UaxDEdc0aZZvq6JCLJWiRmUf95NRAnDH6fhXn+PWp9wGCIg=="
     },
+    "@codemirror/theme-one-dark": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.0.0.tgz",
+      "integrity": "sha512-jTCfi1I8QT++3m21Ui6sU8qwu3F/hLv161KLxfvkV1cYWSBwyUanmQFs89ChobQjBHi2x7s2k71wF9WYvE8fdw==",
+      "requires": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
     "@codemirror/view": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.1.2.tgz",
diff --git a/package.json b/package.json
index 11e69962e..3a655c87a 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@codemirror/language": "^6.2.1",
     "@codemirror/legacy-modes": "^6.1.0",
     "@codemirror/state": "^6.1.0",
+    "@codemirror/theme-one-dark": "^6.0.0",
     "@codemirror/view": "^6.1.2",
     "clipboard": "^2.0.11",
     "codemirror": "^6.0.1",
diff --git a/resources/js/code/views.js b/resources/js/code/views.js
index e87718939..cada9a1d6 100644
--- a/resources/js/code/views.js
+++ b/resources/js/code/views.js
@@ -1,18 +1,20 @@
-import {getLanguageExtension} from "./languages";
+import {getLanguageExtension} from "./languages"
 import {Compartment} from "@codemirror/state"
 import {EditorView} from "@codemirror/view"
+import {oneDark} from "@codemirror/theme-one-dark"
 
 const viewLangCompartments = new WeakMap();
 
 /**
  * Create a new editor view.
  *
- * @param {Object} config
+ * @param {{parent: Element, doc: String, extensions: Array}} config
  * @returns {EditorView}
  */
 export function createView(config) {
     const langCompartment = new Compartment();
     config.extensions.push(langCompartment.of([]));
+    config.extensions.push(getTheme(config.parent));
 
     const ev = new EditorView(config);
 
@@ -21,6 +23,23 @@ export function createView(config) {
     return ev;
 }
 
+/**
+ * Ge the theme extension to use for editor view instance.
+ * @returns {Extension}
+ */
+function getTheme(viewParentEl) {
+    const darkMode = document.documentElement.classList.contains('dark-mode');
+
+    const eventData = {
+        darkMode: darkMode,
+        theme: null,
+    };
+
+    window.$events.emitPublic(viewParentEl, 'library-cm6::configure-theme', eventData);
+
+    return eventData.theme || (darkMode ? oneDark : []);
+}
+
 /**
  * Set the language mode of an EditorView.
  *