Merge pull request #24 from kaermorchen/feature/monaco-dark-mode

Added dark mode for monaco editors

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>

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',

app/components/theme-toggler.hbs

@@ -1,10 +1,16 @@
-<div class='grid grid-cols-3 gap-1 p-1 rounded bg-base-6' ...attributes>
+<div
+  class='grid grid-cols-3 gap-1 p-1 rounded bg-base-6'
+  {{did-insert this.themeDidChange this.session.data.theme}}
+  {{did-update this.themeDidChange this.session.data.theme}}
+  ...attributes
+>
   {{#each this.themes as |item|}}
-    {{#let (eq item.id this.theme) as |selected|}}
+    {{#let (eq item.id this.session.data.theme) as |selected|}}
       <Button
         @text={{item.name}}
         @icon={{item.icon}}
-        @onClick={{fn this.changeTheme item.id}}
+        @value={{item.id}}
+        @onClick={{this.changeTheme}}
         @size='sm'
         class='border-none {{if selected "bg-base-7 shadow-sm"}}'
       />

app/components/theme-toggler.js

@@ -2,31 +2,29 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { WhiteBalanceSunny, ThemeLightDark, WeatherNight } from 'ember-mdi';
-import { tracked } from '@glimmer/tracking';
 
 export default class ThemeTogglerComponent extends Component {
   @service session;
 
-  @tracked theme;
-
-  constructor() {
-    super(...arguments);
-
-    this.theme = document.documentElement.dataset.theme;
-  }
-
   get themes() {
     return [
       { id: 'light', name: 'Light', icon: WhiteBalanceSunny },
-      { id: 'system', name: 'System', icon: ThemeLightDark },
+      { id: undefined, name: 'System', icon: ThemeLightDark },
       { id: 'dark', name: 'Dark', icon: WeatherNight },
     ];
   }
 
   @action
   changeTheme(theme) {
-    localStorage.setItem('theme', theme);
-    this.theme = theme;
-    document.documentElement.dataset.theme = theme;
+    this.session.set('data.theme', theme);
+  }
+
+  @action
+  themeDidChange(el, [theme]) {
+    if (theme) {
+      document.documentElement.dataset.theme = theme;
+    } else {
+      delete document.documentElement.dataset.theme;
+    }
   }
 }

app/index.html

@@ -13,7 +13,7 @@
 
     {{content-for "head-footer"}}
   </head>
-  <body onload="document.documentElement.dataset.theme=localStorage.theme||'system'">
+  <body>
     <div class="loading-indicator">
       <svg width="80" height="80" viewBox="0 0 24 24" role="img">
         <path d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"/>