Fix Diff View Dark Mode Bug (#749)

tone-row · Oct 9, 2024 · 87fb751 · 87fb751
1 parent 5ab23bf
commit 87fb751
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/app/src/components/LoadTemplateDialog.tsx b/app/src/components/LoadTemplateDialog.tsx
@@ -61,7 +61,6 @@ export function LoadTemplateDialog() {
         <EditorActionTextButton
           icon={PiShapesDuotone}
           data-session-activity="Load Template: Open Dialog"
-          iconClassName="fill-zinc-500"
         >
           <Trans>Examples</Trans>
         </EditorActionTextButton>

diff --git a/app/src/components/TextEditor.tsx b/app/src/components/TextEditor.tsx
@@ -55,15 +55,22 @@ export function TextEditor({ extendOptions = {}, ...props }: TextEditorProps) {
         options={{
           ...editorOptions,
           ...extendOptions,
-          renderSideBySide: false,
+          renderSideBySide: true,
         }}
         loading={<Loading />}
+        theme={mode === "light" ? "vs" : "vs-dark"}
+        onMount={(_, monaco) => {
+          monaco.editor.setTheme(mode === "light" ? "vs" : "vs-dark");
+        }}
         wrapperProps={{
           "data-testid": "Editor",
-          className: classNames("bg-white dark:bg-neutral-900", {
-            "overflow-hidden": isDragging,
-            "cursor-wait pointer-events-none opacity-50": convertIsRunning,
-          }),
+          className: classNames(
+            "bg-white dark:bg-neutral-900 dark:text-white",
+            {
+              "overflow-hidden": isDragging,
+              "cursor-wait pointer-events-none opacity-50": convertIsRunning,
+            }
+          ),
         }}
       />
     );