fix changing the theme to remix-dark

apps/remix-ide/src/app/editor/editor.js

@@ -97,7 +97,7 @@ class Editor extends Plugin {
     this.emit(name, ...params) // plugin stack
   }
 
-  onActivation () {
+  async onActivation () {
     this.activated = true
     this.on('sidePanel', 'focusChanged', (name) => {
       this.keepDecorationsFor(name, 'sourceAnnotationsPerFile')
@@ -112,10 +112,11 @@ class Editor extends Plugin {
       this.currentTheme = translateTheme(theme)
       this.renderComponent()
     })
-    this.call('theme', 'currentTheme', (theme) => {
-      this.currentTheme = translateTheme(theme)
-      this.renderComponent()
-    })
+    try {
+      this.currentTheme = translateTheme(await this.call('theme', 'currentTheme'))
+    } catch (e) {
+      console.log('unable to select the theme ' + e.message)
+    }
     this.renderComponent()
   }
 

libs/remix-ui/editor/src/lib/remix-ui-editor.tsx

@@ -82,8 +82,6 @@ export const EditorUI = (props: EditorUIProps) => {
     monacoRef.current.editor.setTheme(props.theme)
   }, [props.theme])
 
-  if (monacoRef.current) monacoRef.current.editor.setTheme(props.theme)
-
   const setAnnotationsbyFile = (uri) => {
     if (props.sourceAnnotationsPerFile[uri]) {
       const model = editorModelsState[uri]?.model
@@ -220,10 +218,10 @@ export const EditorUI = (props: EditorUIProps) => {
   function handleEditorWillMount (monaco) {
     monacoRef.current = monaco
     // see https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-exposed-colors
-    const lightColor = window.getComputedStyle(document.documentElement).getPropertyValue('--light').trim()
-    const infoColor = window.getComputedStyle(document.documentElement).getPropertyValue('--info').trim()
-    const darkColor = window.getComputedStyle(document.documentElement).getPropertyValue('--dark').trim()
-    const grayColor = window.getComputedStyle(document.documentElement).getPropertyValue('--gray-dark').trim()
+    const lightColor = '#2a2c3f'
+    const infoColor = '#086CB5'
+    const darkColor = '#222336'
+    const grayColor = '#343a40'
     monaco.editor.defineTheme('remix-dark', {
       base: 'vs-dark',
       inherit: true, // can also be false to completely replace the builtin rules