From dcce7a239fe4866cea367fdccd090e5654d7036e Mon Sep 17 00:00:00 2001
From: Stanislav Romanov <kaermorchen@gmail.com>
Date: Mon, 17 Oct 2022 15:30:26 +0300
Subject: [PATCH] Add theme changing to monaco editor

---
 app/components/monaco-editor.hbs |  1 +
 app/components/monaco-editor.js  | 26 +++++++++++++++++++++++++-
 app/components/theme-toggler.hbs |  4 ++--
 app/components/theme-toggler.js  |  2 +-
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/app/components/monaco-editor.hbs b/app/components/monaco-editor.hbs
index 68d431f..11d016b 100644
--- a/app/components/monaco-editor.hbs
+++ b/app/components/monaco-editor.hbs
@@ -1,6 +1,7 @@
 <div
   {{did-insert this.initEditor}}
   {{did-update this.updateValue @value @uri}}
+  {{did-update this.themeDidChange this.session.data.theme}}
   class='border'
   ...attributes
 ></div>
diff --git a/app/components/monaco-editor.js b/app/components/monaco-editor.js
index 5453091..b241b26 100644
--- a/app/components/monaco-editor.js
+++ b/app/components/monaco-editor.js
@@ -6,6 +6,7 @@ import {
   languages,
 } from 'monaco-editor/esm/vs/editor/editor.api.js';
 import { registerDestructor } from '@ember/destroyable';
+import { inject as service } from '@ember/service';
 
 // This is needed because the SimpleWorker.js in monaco-editor has the following code:
 // loaderConfiguration = self.requirejs.s.contexts._.config;
@@ -40,16 +41,39 @@ function getModel(value, language, uri, schema) {
 }
 
 export default class MonacoEditorComponent extends Component {
+  @service session;
+
   constructor(owner, args) {
     super(owner, args);
 
     this.args.invoker?.subscribe(this);
   }
 
+  get theme() {
+    if (this.args.theme) {
+      return this.args.theme;
+    } else if (this.session.data.theme === 'dark') {
+      return 'vs-dark';
+    } else if (this.session.data.theme === 'light') {
+      return 'vs-light';
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'vs-dark';
+    } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
+      return 'vs-light';
+    }
+
+    return null;
+  }
+
+  @action
+  themeDidChange() {
+    editor.setTheme(this.theme);
+  }
+
   @action
   initEditor(el) {
     const options = {
-      // theme: 'vs-dark', //TODO: add checking global theme
+      theme: this.theme,
       readOnly: this.args.readOnly ?? false,
       language: this.args.language,
       // wordWrap: 'on',
diff --git a/app/components/theme-toggler.hbs b/app/components/theme-toggler.hbs
index 6bc2e6d..170c49a 100644
--- a/app/components/theme-toggler.hbs
+++ b/app/components/theme-toggler.hbs
@@ -1,7 +1,7 @@
 <div
   class='grid grid-cols-3 gap-1 p-1 rounded bg-base-6'
-  {{did-insert this.didChangeTheme this.session.data.theme}}
-  {{did-update this.didChangeTheme this.session.data.theme}}
+  {{did-insert this.themeDidChange this.session.data.theme}}
+  {{did-update this.themeDidChange this.session.data.theme}}
   ...attributes
 >
   {{#each this.themes as |item|}}
diff --git a/app/components/theme-toggler.js b/app/components/theme-toggler.js
index b289e80..6a518d6 100644
--- a/app/components/theme-toggler.js
+++ b/app/components/theme-toggler.js
@@ -20,7 +20,7 @@ export default class ThemeTogglerComponent extends Component {
   }
 
   @action
-  didChangeTheme(el, [theme]) {
+  themeDidChange(el, [theme]) {
     if (theme) {
       document.documentElement.dataset.theme = theme;
     } else {