add fix for runtime var color (#4254)

* added new changes

* adds color to light and dark theme file

* import theme obj and use variable runtime color

* fix: operator linebreak style for eslint

* chore: remove un-needed changes

---------

Co-authored-by: Sid <siddharth@usebruno.com>

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

@@ -1,7 +1,7 @@
 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';
@@ -84,9 +84,12 @@ const RuntimeVariables = ({ collection, theme }) => {
 };
 
 const VariablesEditor = ({ collection }) => {
-  const { storedTheme } = useTheme();
+  const { displayedTheme, theme } = useTheme();
 
-  const reactInspectorTheme = storedTheme === 'light' ? 'chromeLight' : 'chromeDark';
+  const reactInspectorTheme
+    = displayedTheme === 'light'
+      ? { ...chromeLight, OBJECT_VALUE_STRING_COLOR: theme.variables.runtime.color }
+      : { ...chromeDark, OBJECT_VALUE_STRING_COLOR: theme.variables.runtime.color };
 
   return (
     <StyledWrapper className="px-4 py-4 overflow-auto">

packages/bruno-app/src/themes/dark.js

@@ -32,6 +32,10 @@ const darkTheme = {
 
     name: {
       color: '#569cd6'
+    },
+
+    runtime: {
+      color: 'rgb(255, 255, 255)'
     }
   },
 

packages/bruno-app/src/themes/light.js

@@ -36,6 +36,10 @@ const lightTheme = {
 
     name: {
       color: '#546de5'
+    },
+
+    runtime: {
+      color: 'rgb(0, 0, 0)'
     }
   },