Merge pull request #5435 from notKvS/theme-fix

fix: graphQL documentation theme

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;
     }

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'
     }
   },
 

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)'
     }
   },