style: json tree view

src/components/AppBar.js

@@ -57,7 +57,7 @@ const AppBar = ({ config }) => {
 
   return (
     <>
-      <MuiAppBar position="fixed" elevation={0}>
+      <MuiAppBar position="fixed" elevation={0} color="primary">
         <Toolbar>
           <Link classes={{ root: classes.logoLink }} href="/">
             <div className={classes.logo}>

src/components/Json.js

@@ -14,9 +14,18 @@ const useStyles = makeStyles(() => ({
     flex: 1,
   },
 }));
+const useTreeStyles = makeStyles(
+  (theme) => ({
+    colorPrimary: {
+      color: theme.palette.secondary.main,
+    },
+  }),
+  { name: "MuiTypography" },
+);
 
 const Json = ({ data }) => {
   const classes = useStyles();
+  useTreeStyles();
 
   return (
     <JsonTreeView

src/theme.js

@@ -63,6 +63,9 @@ export const createTheme = (theme) =>
             primary: {
               main: "#0000F4",
             },
+            secondary: {
+              main: "#A2A2FF",
+            },
             background: {
               default: "#18181A",
               secondary: "#18181A",