Fixes the theming issue with the dev tools.

- I removed the ill fated custom dev tools theme.
- I used the right JSON component that respects the color mode.

src/components/devTools/DevTools.tsx

-import {
-  Box,
-  Divider,
-  Paper,
-  Tab,
-  Tabs,
-  ThemeProvider,
-  createTheme,
-} from '@mui/material'
+import {Box, Divider, Paper, Tab, Tabs} from '@mui/material'
 import {Resizable} from 're-resizable'
 import React, {PropsWithChildren, useCallback, useMemo, useState} from 'react'
 
 import {SxProps} from '../../utils/types'
 import {DevToolsContextValue, devToolsContext} from './useDevTools'
 
-const devToolsTheme = createTheme({
-  typography: {
-    fontFamily: 'sans-serif',
-    fontSize: 10,
-  },
-  spacing: 6,
-  palette: {
-    mode: 'light',
-    primary: {
-      main: '#E00',
-    },
-    secondary: {
-      main: '#EEE',
-    },
-  },
-})
-
 type DevToolsContainerProps = PropsWithChildren & {
   defaultSize?: {width: number; height: number}
 } & SxProps
@@ -40,35 +15,33 @@ function DevToolsContainer({
   ...paperProps
 }: DevToolsContainerProps) {
   return (
-    <ThemeProvider theme={devToolsTheme}>
-      <Paper
-        elevation={3}
-        sx={{
-          position: 'fixed',
-          bottom: 16,
-          left: 81,
-          zIndex: 10000,
-          ...(paperProps.sx || {}),
+    <Paper
+      elevation={3}
+      sx={{
+        position: 'fixed',
+        bottom: 16,
+        left: 81,
+        zIndex: 10000,
+        ...(paperProps.sx || {}),
+      }}
+      {...paperProps}
+    >
+      <Resizable
+        defaultSize={
+          defaultSize || {
+            width: 320,
+            height: 500,
+          }
+        }
+        style={{
+          position: 'initial',
+          display: 'flex',
+          flexDirection: 'column',
         }}
-        {...paperProps}
       >
-        <Resizable
-          defaultSize={
-            defaultSize || {
-              width: 320,
-              height: 500,
-            }
-          }
-          style={{
-            position: 'initial',
-            display: 'flex',
-            flexDirection: 'column',
-          }}
-        >
-          {children}
-        </Resizable>
-      </Paper>
-    </ThemeProvider>
+        {children}
+      </Resizable>
+    </Paper>
   )
 }
 

src/components/devTools/DevToolsJsonViewer.tsx

 import {Box} from '@mui/material'
-import {JsonViewer, JsonViewerProps, defineDataType} from '@textea/json-viewer'
+import {JsonViewerProps, defineDataType} from '@textea/json-viewer'
+
+import JsonViewer from '../fileviewer/JsonViewer'
 
 const otherDataType = defineDataType({
   is: (value) => {