Improve dark mode, add destroy for proper component cleanup

package-lock.json

@@ -15,6 +15,7 @@
                 "@codemirror/lang-json": "^6.0.1",
                 "@codemirror/lang-php": "^6.0.1",
                 "@codemirror/state": "^6.5.2",
+                "@codemirror/theme-one-dark": "^6.1.2",
                 "@codemirror/view": "^6.36.6",
                 "@danharrin/alpine-mousetrap": "^0.1.6",
                 "@floating-ui/dom": "^1.7.0",
@@ -1764,6 +1765,19 @@
                 "@marijn/find-cluster-break": "^1.0.0"
             }
         },
+        "node_modules/@codemirror/theme-one-dark": {
+            "version": "6.1.2",
+            "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz",
+            "integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==",
+            "dev": true,
+            "license": "MIT",
+            "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.37.1",
             "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.37.1.tgz",

package.json

@@ -23,6 +23,7 @@
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-php": "^6.0.1",
         "@codemirror/state": "^6.5.2",
+        "@codemirror/theme-one-dark": "^6.1.2",
         "@codemirror/view": "^6.36.6",
         "@danharrin/alpine-mousetrap": "^0.1.6",
         "@floating-ui/dom": "^1.7.0",

packages/forms/resources/js/components/code-editor.js

@@ -5,8 +5,9 @@ import { html } from '@codemirror/lang-html'
 import { javascript } from '@codemirror/lang-javascript'
 import { json } from '@codemirror/lang-json'
 import { php } from '@codemirror/lang-php'
-import { EditorState } from '@codemirror/state'
+import { EditorState, Compartment } from '@codemirror/state'
 import { keymap } from '@codemirror/view'
+import { oneDark } from '@codemirror/theme-one-dark'
 
 export default function codeEditorFormComponent({
     isDisabled,
@@ -15,8 +16,17 @@ export default function codeEditorFormComponent({
 }) {
     return {
         editor: null,
+        themeCompartment: new Compartment(),
         state,
 
+        isDarkMode() {
+            return document.documentElement.classList.contains('dark')
+        },
+
+        getThemeExtensions() {
+            return this.isDarkMode() ? [oneDark] : []
+        },
+
         getLanguageExtension() {
             const extensions = {
                 css: css,
@@ -47,6 +57,7 @@ export default function codeEditorFormComponent({
                             this.state = viewUpdate.state.doc.toString()
                         }),
                         this.getLanguageExtension(),
+                        this.themeCompartment.of(this.getThemeExtensions()),
                     ],
                 }),
             })
@@ -64,6 +75,31 @@ export default function codeEditorFormComponent({
                     },
                 })
             })
+
+            this.themeObserver = new MutationObserver(() => {
+                this.editor.dispatch({
+                    effects: this.themeCompartment.reconfigure(
+                        this.getThemeExtensions(),
+                    ),
+                })
+            })
+
+            this.themeObserver.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['class'],
+            })
+        },
+
+        destroy: function () {
+            if (this.themeObserver) {
+                this.themeObserver.disconnect()
+                this.themeObserver = null
+            }
+
+            if (this.editor) {
+                this.editor.destroy()
+                this.editor = null
+            }
         },
     }
 }