Add a workaround for an oddity / bug in monaco-editor/react: The launch of each editor sets the theme to a default of 'light'.

Author: Ivorforce

src/main.tsx

@@ -4,9 +4,19 @@ import App from "./view/App";
 import "./view/styles.css";
 import * as TextMate from "./monaco/TextMate";
 import * as Themes from "./monaco/Themes";
+import * as monaco from 'monaco-editor';
+import { loader } from '@monaco-editor/react';
+
+loader.config({ monaco });
 
 await TextMate.setup();
 export const customThemes = await Themes.load();
+export let currentTheme = "vs-dark-modern";
+
+export function onUpdateTheme(theme: string, editor: monaco.editor.ICodeEditor) {
+  document.body.style.backgroundColor = Themes.getBackgroundColor(editor);
+  currentTheme = theme;
+}
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(

src/monaco/Themes.ts

@@ -89,20 +89,20 @@ export async function load(): Promise<string[]> {
     return addedThemes;
 }
 
-export function addSetThemeActions(editor: monaco.editor.IStandaloneCodeEditor, themes: string[], callback?: () => void) {
+export function addSetThemeActions(editor: monaco.editor.IStandaloneCodeEditor, themes: string[], callback?: (theme: string, editor: monaco.editor.ICodeEditor) => void) {
     for (let themeID of themes) {
         editor.addAction({
             id: `setTheme-${themeID}`,
             label: `Set theme to ${themeID}`,
             run: (editor: monaco.editor.ICodeEditor, arg: string) => {
                 monaco.editor.setTheme(themeID);
-                callback?.();
+                callback?.(themeID, editor);
             }
         });
     }
 }
 
-export function getBackgroundColor(editor: monaco.editor.IStandaloneCodeEditor): string {
+export function getBackgroundColor(editor: monaco.editor.ICodeEditor): string {
     return getComputedStyle(editor.getDomNode()!)
         .getPropertyValue('--vscode-editor-background')
 }

src/view/App.tsx

@@ -1,19 +1,16 @@
-import React, { createRef, useRef } from 'react';
+import React from 'react';
 import ReactDOM from "react-dom/client";
 import './App.css';
 
 import * as monaco from 'monaco-editor';
-import { loader } from '@monaco-editor/react';
 import { MonacoLogController, FileInfo } from '../monaco/MonacoLogController';
 import { EventCallback, emit, listen } from '@tauri-apps/api/event'
 import { useEffect } from 'react';
 import Editor from "@monaco-editor/react";
 import { TextZone } from '../monaco/ViewZones';
 import { addSetLanguageActions } from '../monaco/SetLanguage';
 import { addSetThemeActions, getBackgroundColor } from '../monaco/Themes';
-import { customThemes } from '../main';
-
-loader.config({ monaco });
+import { currentTheme, customThemes, onUpdateTheme } from '../main';
 
 function listenReact<T>(name: string, fun: EventCallback<T>) {
     useEffect(() => {
@@ -39,7 +36,8 @@ function createPatchEditor(language: string, textZone: TextZone) {
 
     const secondEditor = <Editor
         onMount={handleEditorDidMount}
-        theme="vs-dark-modern"
+
+        theme={currentTheme}
 
         // language / value inputs are tracked, "default" versions are only for the initial value
         defaultLanguage={language}
@@ -93,20 +91,23 @@ function App() {
     });
 
     async function handleEditorDidMount(editor: monaco.editor.IStandaloneCodeEditor, monaco: any) {
-        document.body.style.backgroundColor = getBackgroundColor(editor);
+        // This shouldnt be needed, but it needs to be run once to update the background color for the first time.
+        onUpdateTheme(currentTheme, editor);
 
         let logController_ = new MonacoLogController(editor, createPatchEditor);
         logController = logController_;
 
         addSetLanguageActions(editor);
-        addSetThemeActions(editor, customThemes, () => document.body.style.backgroundColor = getBackgroundColor(editor));
+        addSetThemeActions(editor, customThemes, onUpdateTheme);
     }
 
     return <Editor
         height="calc(100vh - 30px)"  // TODO This shouldn't be here but otherwise the size is 5px
         width="calc(100vw - 30px)"
+
+        theme={currentTheme}
+
         onMount={handleEditorDidMount}
-        theme="vs-dark-modern"
         options={{
             minimap: { enabled: false },
             renderLineHighlight: "none",