fix: darkmode on initial load

open-rpc · Jul 3, 2019 · b9982cd · b9982cd
1 parent 623fe08
commit b9982cd
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -35,7 +35,7 @@ const App: React.FC = () => {
   }, 5000);
 
   useEffect(() => {
-    if (results) {
+    if (results && editor) {
       editor.setValue(results);
       setParsedSchema(results);
     }
@@ -86,7 +86,7 @@ const App: React.FC = () => {
   };
   const [editor, updateDimensions] = useMonaco(
     monacoEl,
-    undefined,
+    UISchema.appBar["ui:darkMode"],
     _.debounce(handleMonacoEditorOnChange, 500),
     [UISchema],
   );

diff --git a/src/hooks/useMonaco.tsx b/src/hooks/useMonaco.tsx
@@ -3,7 +3,7 @@ import * as monaco from "monaco-editor";
 
 const useMonaco = (
   monacoRef: React.RefObject<HTMLElement>,
-  didMount?: (editor: monaco.editor.IStandaloneCodeEditor) => any,
+  darkMode: boolean,
   onChange?: (event: monaco.editor.IModelContentChangedEvent, schema: string) => any,
   watchers?: any[],
 ) => {
@@ -16,11 +16,10 @@ const useMonaco = (
   useEffect(() => {
     let onChangeRef: monaco.IDisposable;
     if (monacoRef && monacoRef.current) {
-      const e = monaco.editor.create(monacoRef.current);
+      const e = monaco.editor.create(monacoRef.current, {
+        theme: darkMode ? "vs-dark" : "vs",
+      });
       setEditor(e);
-      if (didMount) {
-        didMount(editor);
-      }
       onChangeRef = e.onDidChangeModelContent((event: monaco.editor.IModelContentChangedEvent) => {
         if (onChange) {
           const v = e.getValue();