Fix runtime variables color

packages/bruno-app/src/components/VariablesEditor/index.js

@@ -1,14 +1,16 @@
 import React, { useState } from 'react';
 import get from 'lodash/get';
 import filter from 'lodash/filter';
-import { Inspector } from 'react-inspector';
+import { Inspector, chromeDark, chromeLight } from 'react-inspector';
 import { useTheme } from 'providers/Theme';
 import { findEnvironmentInCollection, maskInputValue } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 import { IconEye, IconEyeOff } from '@tabler/icons';
 
 const KeyValueExplorer = ({ data = [], theme }) => {
   const [showSecret, setShowSecret] = useState(false);
+  const customTheme = theme.theme === 'chromeDark' ? {...theme, ...({OBJECT_VALUE_STRING_COLOR: 'rgb(255, 255, 255)'})} : {...theme, ...({OBJECT_VALUE_STRING_COLOR: 'rgb(0, 0, 0)'})};
+  delete customTheme.theme;
 
   return (
     <div>
@@ -21,7 +23,7 @@ const KeyValueExplorer = ({ data = [], theme }) => {
               <td className="px-2 py-1">
                 <Inspector
                   data={!showSecret && envVar.secret ? maskInputValue(envVar.value) : envVar.value}
-                  theme={theme}
+                  theme={customTheme}
                 />
               </td>
             </tr>
@@ -86,7 +88,7 @@ const RuntimeVariables = ({ collection, theme }) => {
 const VariablesEditor = ({ collection }) => {
   const { storedTheme } = useTheme();
 
-  const reactInspectorTheme = storedTheme === 'light' ? 'chromeLight' : 'chromeDark';
+  const reactInspectorTheme = storedTheme === 'light' ? {...chromeLight, theme: "chromeLight"} : {...chromeDark, theme: "chromeDark"};
 
   return (
     <StyledWrapper className="px-4 py-4">