Skip to content

Commit 4abc864

Browse files
authored
fix(Editor Theme): Monaco Editor Dark Mode theme Fixed (#139)
Signed-off-by: nitro56565 <nitro56565@gmail.com>
1 parent 305d148 commit 4abc864

File tree

1 file changed

+26
-1
lines changed

1 file changed

+26
-1
lines changed

src/editors/MarkdownEditor.tsx

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { lazy, Suspense, useMemo, useCallback } from "react";
1+
import { lazy, Suspense, useMemo, useCallback, useEffect } from "react";
22
import useAppStore from "../store/store";
3+
import { useMonaco } from "@monaco-editor/react";
34

45
const MonacoEditor = lazy(() =>
56
import("@monaco-editor/react").then((mod) => ({ default: mod.Editor }))
@@ -13,12 +14,36 @@ export default function MarkdownEditor({
1314
onChange?: (value: string | undefined) => void;
1415
}) {
1516
const backgroundColor = useAppStore((state) => state.backgroundColor);
17+
const textColor = useAppStore((state) => state.textColor);
18+
const monaco = useMonaco();
1619

1720
const themeName = useMemo(
1821
() => (backgroundColor ? "darkTheme" : "lightTheme"),
1922
[backgroundColor]
2023
);
2124

25+
useEffect(() => {
26+
if (monaco) {
27+
const defineTheme = (name: string, base: "vs" | "vs-dark") => {
28+
monaco.editor.defineTheme(name, {
29+
base,
30+
inherit: true,
31+
rules: [],
32+
colors: {
33+
"editor.background": backgroundColor,
34+
"editor.foreground": textColor,
35+
"editor.lineHighlightBorder": "#EDE8DC",
36+
},
37+
});
38+
};
39+
40+
defineTheme("lightTheme", "vs");
41+
defineTheme("darkTheme", "vs-dark");
42+
43+
monaco.editor.setTheme(themeName);
44+
}
45+
}, [monaco, backgroundColor, textColor, themeName]);
46+
2247
const editorOptions = {
2348
minimap: { enabled: false },
2449
wordWrap: "on" as const,

0 commit comments

Comments
 (0)