add light theme support, underline links to block detail

2024-11-09 13:51:54 +07:00
parent da8468a88d
commit bc80975e6b
8 changed files with 82 additions and 30 deletions
@@ -5,26 +5,31 @@ import ReactJson from "react18-json-view"
 import "react18-json-view/src/dark.css"
 import "react18-json-view/src/style.css"
 import "./jsonDisplay.css"
+import { useTheme } from "@/ThemeProvider"

 export const JsonDisplay: FC<{
  src: unknown
-}> = ({ src }) => (
-  <ReactJson
-    src={src}
-    dark
-    theme="a11y"
-    replacer={(v) => (v instanceof Binary ? bytesToString(v) : v)}
-    customizeCopy={(v) =>
-      JSON.stringify(
-        v,
-        (_, v) =>
-          typeof v === "bigint"
-            ? `${v}n`
-            : v instanceof Binary
-              ? bytesToString(v)
-              : v,
-        2,
-      )
-    }
-  />
-)
+}> = ({ src }) => {
+  const theme = useTheme()
+
+  return (
+    <ReactJson
+      src={src}
+      dark={theme === "dark"}
+      theme="a11y"
+      replacer={(v) => (v instanceof Binary ? bytesToString(v) : v)}
+      customizeCopy={(v) =>
+        JSON.stringify(
+          v,
+          (_, v) =>
+            typeof v === "bigint"
+              ? `${v}n`
+              : v instanceof Binary
+                ? bytesToString(v)
+                : v,
+          2,
+        )
+      }
+    />
+  )
+}