fix: improve part of ui not covered by theme color

Author: pionxzh

src/components/DataTypes/Object.tsx

@@ -79,14 +79,24 @@ const PreObjectType: FC<DataItemProps<object>> = (props) => {
 
 const PostObjectType: FC<DataItemProps<object>> = (props) => {
   const metadataColor = useJsonViewerStore(store => store.colorspace.base04)
+  const textColor = useTextColor()
   const isArray = useMemo(() => Array.isArray(props.value), [props.value])
   const isEmptyValue = useMemo(() => getValueSize(props.value) === 0, [props.value])
   const sizeOfValue = useMemo(() => inspectMetadata(props.value), [props.value])
   const displaySize = useJsonViewerStore(store => store.displaySize)
   const shouldDisplaySize = useMemo(() => typeof displaySize === 'function' ? displaySize(props.path, props.value) : displaySize, [displaySize, props.path, props.value])
 
   return (
-    <Box component='span' className='data-object-end'>
+    <Box
+      component='span'
+      className='data-object-end'
+      sx={{
+        lineHeight: 1.5,
+        color: textColor,
+        letterSpacing: 0.5,
+        opacity: 0.8
+      }}
+    >
       {isArray ? arrayRb : objectRb}
       {shouldDisplaySize && (isEmptyValue || !props.inspect)
         ? (

src/index.tsx

@@ -145,12 +145,18 @@ export const JsonViewer = function JsonViewer<Value> (props: JsonViewerProps<Val
       : themeType === 'dark'
         ? darkColorspace.base00
         : lightColorspace.base00
+    const foregroundColor = typeof themeType === 'object'
+      ? themeType.base07
+      : themeType === 'dark'
+        ? darkColorspace.base07
+        : lightColorspace.base07
     return createTheme({
       components: {
         MuiPaper: {
           styleOverrides: {
             root: {
-              backgroundColor
+              backgroundColor,
+              color: foregroundColor
             }
           }
         }