simplify

.eslintrc.js

@@ -359,6 +359,7 @@ module.exports = {
         '@typescript-eslint/no-floating-promises': 'error',
         '@typescript-eslint/non-nullable-type-assertion-style': 'error',
         '@typescript-eslint/consistent-type-assertions': 'error',
+        '@typescript-eslint/no-duplicate-type-constituents': 'error',
         // TODO: Fix all errors for the following rules included in recommended config
         '@typescript-eslint/no-explicit-any': 'off',
         '@typescript-eslint/no-non-null-assertion': 'off',

packages/graphiql/src/components/GraphiQL.tsx

@@ -223,16 +223,19 @@ export type GraphiQLInterfaceProps = WriteableEditorProps &
      * This is useful when you want to make sure that GraphiQL is always
      * rendered with a specific theme
      */
-    forcedTheme?: 'light' | 'dark' | 'system';
+    forcedTheme?: (typeof THEMES)[number];
   };
 
+const THEMES = ['light', 'dark', 'system'] as const;
+
 export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
   const isHeadersEditorEnabled = props.isHeadersEditorEnabled ?? true;
   const editorContext = useEditorContext({ nonNull: true });
   const executionContext = useExecutionContext({ nonNull: true });
   const schemaContext = useSchemaContext({ nonNull: true });
   const storageContext = useStorageContext();
   const pluginContext = usePluginContext();
+  const forcedTheme = props.forcedTheme; // eslint-disable-line prefer-destructuring
 
   const copy = useCopyQuery({ onCopyQuery: props.onCopyQuery });
   const merge = useMergeQuery();
@@ -241,18 +244,12 @@ 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;
+    if (forcedTheme === 'system') {
+      setTheme(null);
+    } else if (forcedTheme === 'light' || forcedTheme === 'dark') {
+      setTheme(forcedTheme);
     }
-  }, [props.forcedTheme, setTheme]);
+  }, [forcedTheme, setTheme]);
 
   const PluginContent = pluginContext?.visiblePlugin?.content;
 
@@ -794,7 +791,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
               </ButtonGroup>
             </div>
           ) : null}
-          {!props.forcedTheme && (
+          {!forcedTheme && (
             <div className="graphiql-dialog-section">
               <div>
                 <div className="graphiql-dialog-section-title">Theme</div>