Merge pull request #1477 from blockscout/fe-1454

fix graphql color mode sync
blockscout · Jan 5, 2024 · 4cd9933 · 4cd9933
2 parents 55cb598 + 50f66fb
commit 4cd9933
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/ui/graphQL/GraphQL.tsx b/ui/graphQL/GraphQL.tsx
@@ -20,18 +20,19 @@ const GraphQL = () => {
 
   const { colorMode } = useColorMode();
 
+  const graphqlTheme = window.localStorage.getItem('graphiql:theme');
+
   // colorModeState used as a key to re-render GraphiQL conponent after color mode change
-  const [ colorModeState, setColorModeState ] = React.useState(colorMode);
+  const [ colorModeState, setColorModeState ] = React.useState(graphqlTheme);
 
   React.useEffect(() => {
     if (isBrowser()) {
-      const graphqlTheme = window.localStorage.getItem('graphiql:theme');
       if (graphqlTheme !== colorMode) {
         window.localStorage.setItem('graphiql:theme', colorMode);
         setColorModeState(colorMode);
       }
     }
-  }, [ colorMode ]);
+  }, [ colorMode, graphqlTheme ]);
 
   if (!feature.isEnabled) {
     return null;