GraphiQL component: forcedTheme

.changeset/famous-shirts-mate.md

@@ -0,0 +1,5 @@
+---
+'graphiql': minor
+---
+
+Add a new prop to GraphiQL component: `forcedTheme` to force the theme and hide the theme switcher.

packages/graphiql/cypress/e2e/theme.cy.ts

@@ -0,0 +1,17 @@
+describe('Theme', () => {
+  it('Switches to light theme when forcedTheme is light', () => {
+    cy.visit('/?query={test}&forcedTheme=light');
+    cy.get('body').should('have.class', 'graphiql-light');
+  });
+
+  it('Switches to dark theme when forcedTheme is dark', () => {
+    cy.visit('/?query={test}&forcedTheme=dark');
+    cy.get('body').should('have.class', 'graphiql-dark');
+  });
+
+  it('Defaults to light theme when forcedTheme value is invalid', () => {
+    cy.visit('/?query={test}&forcedTheme=invalid');
+    cy.get('body').should('have.class', 'graphiql-light');
+    cy.get('.graphiql-dialog-section-title').should('have.text', 'Theme'); // Check for the presence of the theme dialog
+  });
+});

packages/graphiql/resources/renderExample.js

@@ -102,5 +102,6 @@ root.render(
     shouldPersistHeaders: true,
     inputValueDeprecation: GraphQLVersion.includes('15.5') ? undefined : true,
     onTabChange,
+    forcedTheme: parameters.forcedTheme,
   }),
 );

packages/graphiql/src/components/GraphiQL.tsx

@@ -14,6 +14,7 @@ import React, {
   ReactElement,
   useCallback,
   useState,
+  useEffect,
 } from 'react';
 
 import {
@@ -162,6 +163,7 @@ export function GraphiQL({
     >
       <GraphiQLInterface
         showPersistHeadersSettings={shouldPersistHeaders !== false}
+        forcedTheme={props.forcedTheme}
         {...props}
       />
     </GraphiQLProvider>
@@ -209,6 +211,12 @@ export type GraphiQLInterfaceProps = WriteableEditorProps &
      * settings modal.
      */
     showPersistHeadersSettings?: boolean;
+    /**
+     * forcedTheme allows to enforce a specific theme for GraphiQL.
+     * This is useful when you want to make sure that GraphiQL is always
+     * rendered with a specific theme
+     */
+    forcedTheme?: 'light' | 'dark' | 'system';
   };
 
 export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
@@ -225,6 +233,20 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
 
   const { theme, setTheme } = useTheme();
 
+  useEffect(() => {
+    switch (props.forcedTheme) {
+      case 'light':
+        setTheme('light');
+        break;
+      case 'dark':
+        setTheme('dark');
+        break;
+      case 'system':
+        setTheme(null);
+        break;
+    }
+  }, [props.forcedTheme, setTheme]);
+
   const PluginContent = pluginContext?.visiblePlugin?.content;
 
   const pluginResize = useDragResize({
@@ -760,39 +782,41 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
               </ButtonGroup>
             </div>
           ) : null}
-          <div className="graphiql-dialog-section">
-            <div>
-              <div className="graphiql-dialog-section-title">Theme</div>
-              <div className="graphiql-dialog-section-caption">
-                Adjust how the interface looks like.
+          {!props.forcedTheme && (
+            <div className="graphiql-dialog-section">
+              <div>
+                <div className="graphiql-dialog-section-title">Theme</div>
+                <div className="graphiql-dialog-section-caption">
+                  Adjust how the interface looks like.
+                </div>
               </div>
+              <ButtonGroup>
+                <Button
+                  type="button"
+                  className={theme === null ? 'active' : ''}
+                  onClick={handleChangeTheme}
+                >
+                  System
+                </Button>
+                <Button
+                  type="button"
+                  className={theme === 'light' ? 'active' : ''}
+                  data-theme="light"
+                  onClick={handleChangeTheme}
+                >
+                  Light
+                </Button>
+                <Button
+                  type="button"
+                  className={theme === 'dark' ? 'active' : ''}
+                  data-theme="dark"
+                  onClick={handleChangeTheme}
+                >
+                  Dark
+                </Button>
+              </ButtonGroup>
             </div>
-            <ButtonGroup>
-              <Button
-                type="button"
-                className={theme === null ? 'active' : ''}
-                onClick={handleChangeTheme}
-              >
-                System
-              </Button>
-              <Button
-                type="button"
-                className={theme === 'light' ? 'active' : ''}
-                data-theme="light"
-                onClick={handleChangeTheme}
-              >
-                Light
-              </Button>
-              <Button
-                type="button"
-                className={theme === 'dark' ? 'active' : ''}
-                data-theme="dark"
-                onClick={handleChangeTheme}
-              >
-                Dark
-              </Button>
-            </ButtonGroup>
-          </div>
+          )}
           {storageContext ? (
             <div className="graphiql-dialog-section">
               <div>