diff --git a/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js b/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js index 5349f2410..a119245e8 100644 --- a/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js @@ -63,7 +63,8 @@ const StyledWrapper = styled.div` } div.graphql-docs-explorer-container { - background: white; + background: ${(props) => props.theme.requestTabPanel.graphqlDocsExplorer.bg}; + color: ${(props) => props.theme.requestTabPanel.graphqlDocsExplorer.color}; outline: none; box-shadow: rgb(0 0 0 / 15%) 0px 0px 8px; position: absolute; @@ -72,6 +73,14 @@ const StyledWrapper = styled.div` width: 350px; height: 100%; + .doc-explorer-contents, + .doc-explorer, + .search-box > input, + .search-box-clear { + background-color: ${(props) => props.theme.requestTabPanel.graphqlDocsExplorer.bg}; + color: ${(props) => props.theme.requestTabPanel.graphqlDocsExplorer.color}; + } + div.doc-explorer-title { text-align: left; } diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js index 7e3136715..1f80a85cb 100644 --- a/packages/bruno-app/src/themes/dark.js +++ b/packages/bruno-app/src/themes/dark.js @@ -94,7 +94,7 @@ const darkTheme = { // customize these colors if needed patch: '#d69956', options: '#d69956', - head: '#d69956', + head: '#d69956' }, grpc: '#6366f1' }, @@ -134,6 +134,10 @@ const darkTheme = { color: '#ccc' } } + }, + graphqlDocsExplorer: { + bg: '#1e1e1e', + color: '#d4d4d4' } }, diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js index 715d468d6..b1a49bc0e 100644 --- a/packages/bruno-app/src/themes/light.js +++ b/packages/bruno-app/src/themes/light.js @@ -131,6 +131,10 @@ const lightTheme = { color: 'rgb(75 85 99)' } } + }, + graphqlDocsExplorer: { + bg: '#fff', + color: 'rgb(52, 52, 52)' } },