feat: theme json editor

backend/capabilities/main.json

@@ -18,6 +18,7 @@
     "menu:allow-new",
     "menu:allow-popup",
     "webview:allow-create-webview-window",
-    "event:allow-emit-to"
+    "event:allow-emit-to",
+    "window:allow-theme"
   ]
 }

frontend/src/components/Editor.tsx

@@ -2,24 +2,45 @@ import { logError } from "../error";
 import "./Editor.css";
 import Loader from "./Loader";
 import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
+import { Theme } from "@tauri-apps/api/window";
 import JsonView from "@uiw/react-json-view";
+import { lightTheme } from "@uiw/react-json-view/light";
+import { vscodeTheme } from "@uiw/react-json-view/vscode";
 import { useState, useEffect } from "react";
 
 export interface EditorPayload {
   readonly: boolean;
   manifest: object;
 }
 
+function themeToCss(theme: Theme): React.CSSProperties {
+  return theme == "light" ? lightTheme : vscodeTheme;
+}
+
 export default function Editor() {
   const [manifest, setManifest] = useState<object | null>(null);
+  const [theme, setTheme] = useState<React.CSSProperties>(lightTheme);
 
   useEffect(() => {
-    // TODO: listen to window theme and change JsonView corrsponding theme
-
     const webview = WebviewWindow.getCurrent();
     if (webview) {
       webview
-        .once("edit-info", (event) => {
+        .theme()
+        .then((theme) => {
+          if (theme) {
+            setTheme(themeToCss(theme));
+          }
+        })
+        .catch(logError);
+
+      webview
+        .onThemeChanged((event) => {
+          setTheme(themeToCss(event.payload));
+        })
+        .catch(logError);
+
+      webview
+        .listen("edit-info", (event) => {
           const payload = event.payload as EditorPayload;
           if (payload.readonly) {
             // TODO: set window size based on size of json?
@@ -41,6 +62,7 @@ export default function Editor() {
       {manifest && (
         <JsonView
           value={manifest}
+          style={theme}
           displayDataTypes={false}
           displayObjectSize={false}
           collapsed={3}