diff --git a/packages/graphiql-react/src/theme.ts b/packages/graphiql-react/src/theme.ts
index 5dc3b8ea669..e8eed0e3209 100644
--- a/packages/graphiql-react/src/theme.ts
+++ b/packages/graphiql-react/src/theme.ts
@@ -7,7 +7,7 @@ import { useStorageContext } from './storage';
  */
 export type Theme = 'light' | 'dark' | null;
 
-export function useTheme() {
+export function useTheme(defaultTheme?: Theme) {
   const storageContext = useStorageContext();
 
   const [theme, setThemeInternal] = useState<Theme>(() => {
@@ -26,6 +26,9 @@ export function useTheme() {
           // Remove the invalid stored value
           storageContext.set(STORAGE_KEY, '');
         }
+        if (defaultTheme) {
+          return defaultTheme
+        }
         return null;
     }
   });
diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
index fb2a44522ff..f4d54b2c74d 100644
--- a/packages/graphiql/src/components/GraphiQL.tsx
+++ b/packages/graphiql/src/components/GraphiQL.tsx
@@ -38,6 +38,7 @@ import {
   Spinner,
   Tab,
   Tabs,
+  Theme,
   ToolbarButton,
   Tooltip,
   UnStyledButton,
@@ -215,6 +216,7 @@ export type GraphiQLInterfaceProps = WriteableEditorProps &
      * settings modal.
      */
     showPersistHeadersSettings?: boolean;
+    defaultTheme?: Theme
     disableTabs?: boolean;
   };
 
@@ -230,7 +232,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
   const merge = useMergeQuery();
   const prettify = usePrettifyEditors();
 
-  const { theme, setTheme } = useTheme();
+  const { theme, setTheme } = useTheme(props.defaultTheme);
 
   const PluginContent = pluginContext?.visiblePlugin?.content;