diff --git a/packages/bruno-app/src/components/VariablesEditor/index.js b/packages/bruno-app/src/components/VariablesEditor/index.js index edde0e20c..322d2f3a1 100644 --- a/packages/bruno-app/src/components/VariablesEditor/index.js +++ b/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 ( diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js index 67856b283..f7493cdc1 100644 --- a/packages/bruno-app/src/themes/dark.js +++ b/packages/bruno-app/src/themes/dark.js @@ -32,6 +32,10 @@ const darkTheme = { name: { color: '#569cd6' + }, + + runtime: { + color: 'rgb(255, 255, 255)' } }, diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js index 7cf873577..c5865a0f9 100644 --- a/packages/bruno-app/src/themes/light.js +++ b/packages/bruno-app/src/themes/light.js @@ -36,6 +36,10 @@ const lightTheme = { name: { color: '#546de5' + }, + + runtime: { + color: 'rgb(0, 0, 0)' } },