feat: editor theme

AElfProject · Jul 18, 2024 · d0d1bb7 · d0d1bb7
1 parent 3219b92
commit d0d1bb7
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 0 deletions.
diff --git a/components/editor.tsx b/components/editor.tsx
@@ -3,8 +3,15 @@
 import React from "react";
 import CodeMirror from "@uiw/react-codemirror";
 import { csharp } from "@replit/codemirror-lang-csharp";
+import { githubLight, githubDark } from "@uiw/codemirror-theme-github";
+import { useTheme } from "next-themes";
 
 export default function Editor() {
+  const { theme, systemTheme } = useTheme();
+
+  const currentTheme = theme !== "system" ? theme : systemTheme;
+  const editorTheme = currentTheme === "light" ? githubLight : githubDark;
+
   const [value, setValue] = React.useState(`using System;
 namespace Test
 {
@@ -24,6 +31,7 @@ namespace Test
     <CodeMirror
       value={value}
       height="1000px"
+      theme={editorTheme}
       extensions={[csharp()]}
       onChange={onChange}
     />

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@replit/codemirror-lang-csharp": "^6.2.0",
     "@tanstack/react-virtual": "^3.8.3",
+    "@uiw/codemirror-theme-github": "^4.23.0",
     "@uiw/react-codemirror": "^4.23.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -39,5 +40,9 @@
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
+  },
+  "overrides": {
+    "react": "^18",
+    "react-dom": "^18"
   }
 }