[graphiql] Option to have fixed theme and disable settings dialog

[kruncher]

When using the <GraphIQL /> component there is an option for editorTheme which doesn't work how I would've expected. I did some searching and found that you can use the useTheme hook to specify a theme:

useEffect(() => {
  setTheme("light");
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

For my purposes I have also disabled headers with isHeadersEditorEnabled={false} which renders the settings button redundant. It would be great if there was a way to hide it to avoid confusion.

[acao]

1. editorTheme is an old, if not original prop for setting the codemirror editor theme, which predates UI themes in GraphiQL. with monaco it will work similarly
2. the settings dialog will have other settings soon
3. agreed that light or dark should have a toggle prop. it should default to your device configuration. there is also a prop for providing a custom theme

[dimaMachina]

I would suggest that we'll switch to https://github.com/pacocoursey/next-themes which currently has unnecessary peerDependency next that I already proposed to remove https://github.com/pacocoursey/next-themes/issues/159

[incompl]

This would be useful for me too. We are displaying GraphiQL inside an app which does not support dark mode. I independently came to the same conclusion about how to automatically set light mode, but there doesn't seem to be a convenient way to decide which settings are available.

[EduardoVV]

There doesn't seem to be a prop specific to disable but you can acomplish it with styles, just override the dark mode colors to the original ones

@media (prefers-color-scheme: dark) {
  body:not(.graphiql-light) .graphiql-container,
  body:not(.graphiql-light) .CodeMirror-info,
  body:not(.graphiql-light) .CodeMirror-lint-tooltip,
  body:not(.graphiql-light) .graphiql-dialog,
  body:not(.graphiql-light) .graphiql-dialog-overlay,
  body:not(.graphiql-light) .graphiql-tooltip,
  body:not(.graphiql-light) [data-radix-popper-content-wrapper] {
    --color-primary: 320, 95%, 43%;
    --color-secondary: 242, 51%, 61%;
    --color-tertiary: 188, 100%, 36%;
    --color-info: 208, 100%, 46%;
    --color-success: 158, 60%, 42%;
    --color-warning: 36, 100%, 41%;
    --color-error: 13, 93%, 58%;
    --color-neutral: 219, 28%, 32%;
    --color-base: 219, 28%, 100%;

    --popover-box-shadow: 0px 6px 20px rgba(59, 76, 106, 0.13), 0px 1.34018px 4.46726px rgba(59, 76, 106, 0.0774939),
      0px 0.399006px 1.33002px rgba(59, 76, 106, 0.0525061);
    --popover-border: none;
  }
}

body.graphiql-dark .graphiql-container,
body.graphiql-dark .CodeMirror-info,
body.graphiql-dark .CodeMirror-lint-tooltip,
body.graphiql-dark .graphiql-dialog,
body.graphiql-dark .graphiql-dialog-overlay,
body.graphiql-dark .graphiql-tooltip,
body.graphiql-dark [data-radix-popper-content-wrapper] {
  --color-primary: 320, 95%, 43%;
  --color-secondary: 242, 51%, 61%;
  --color-tertiary: 188, 100%, 36%;
  --color-info: 208, 100%, 46%;
  --color-success: 158, 60%, 42%;
  --color-warning: 36, 100%, 41%;
  --color-error: 13, 93%, 58%;
  --color-neutral: 219, 28%, 32%;
  --color-base: 219, 28%, 100%;

  --popover-box-shadow: 0px 6px 20px rgba(59, 76, 106, 0.13), 0px 1.34018px 4.46726px rgba(59, 76, 106, 0.0774939),
    0px 0.399006px 1.33002px rgba(59, 76, 106, 0.0525061);
  --popover-border: none;
}

[cherzhou]

You should be able to default the theme by passing in a defaultTheme property with the release of GraphiQL 3.7.0

[dimaMachina]

to use a fixed theme use fixedTheme option which disables changing the theme in the settings dialog