Fix code editor in dark mode

axelor · Jun 12, 2023 · 5a3801f · 5a3801f
1 parent 4b2e058
commit 5a3801f
Showing 1 changed file with 5 additions and 0 deletions.
diff --git a/axelor-front/src/views/form/widgets/code-editor/code-editor.tsx b/axelor-front/src/views/form/widgets/code-editor/code-editor.tsx
@@ -2,6 +2,7 @@ import Editor from "@monaco-editor/react";
 import clsx from "clsx";
 import { useCallback } from "react";
 
+import { useAppTheme } from "@/hooks/use-app-theme";
 import { FieldControl, FieldProps } from "../../builder";
 import { useInput } from "../../builder/hooks";
 
@@ -12,6 +13,9 @@ export function CodeEditor(props: FieldProps<string>) {
   const { mode, codeSyntax, height = 400, width = "100%" } = schema;
 
   const language = mode || codeSyntax;
+  const appTheme = useAppTheme();
+
+  const theme = appTheme === "dark" ? "vs-dark" : "light";
 
   const { value, setValue } = useInput(valueAtom, {
     defaultValue: "",
@@ -36,6 +40,7 @@ export function CodeEditor(props: FieldProps<string>) {
       })}
     >
       <Editor
+        theme={theme}
         language={language}
         value={value}
         width={w}