From 867c7911316d553ad32ddeba49faf9887791da34 Mon Sep 17 00:00:00 2001
From: Pionxzh <pionxzh@csie.io>
Date: Thu, 25 Jan 2024 01:07:09 +0800
Subject: [PATCH] fix: improve part of ui not covered by theme color

---
 src/components/DataTypes/Object.tsx | 12 +++++++++++-
 src/index.tsx                       |  8 +++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/DataTypes/Object.tsx b/src/components/DataTypes/Object.tsx
index 7e54bf73..a0361207 100644
--- a/src/components/DataTypes/Object.tsx
+++ b/src/components/DataTypes/Object.tsx
@@ -79,6 +79,7 @@ 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])
@@ -86,7 +87,16 @@ const PostObjectType: FC<DataItemProps<object>> = (props) => {
   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)
         ? (
diff --git a/src/index.tsx b/src/index.tsx
index f3180eb8..d0941f9d 100644
--- a/src/index.tsx
+++ b/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
             }
           }
         }