Add example for theming

[thomasheyenbrock]

After releasing the updated UI in graphiql@2 users will be able to override our CSS variables to create their own theme (colors, spacing, etc.) for GraphiQL. We should also add an example to the examples folder that demonstrates how to make this happen.

[acao]

We can add to one of the webpack/vite/etc examples, but ideally a bundler-free config as well.

From rough estimates based on CDN & NPM stats, about half our users still don't even use a bundler to configure/ship their custom graphiql implementation, they just load it directly from unpk or another CDN!

[acao]

it would be cool if we linked to open source framework implementations of graphiql with custom, real world 2.x themes. We can work with the authors of the implementations in this list to improve if needed

@patrick91 would you and @benjie like for your frameworks to be on this list? Do you do or need much more style customization? @lekoarts would love to make the gatsby custom theme implementation a point of reference as well! Let us know what improvements we can make.

the next step beyond this of course is to show framework authors how to even allow their users to override the themes for their implementations of their framework which implements graphiql

[LekoArts]

I'd probably loop in @fk to see if/what changes we'd want to make in context of Gatsby. So far I really like the design so atm I didn't see the need to change things just yet 😆

[patrick91]

@patrick91 would you and @benjie like for your frameworks to be on this list? Do you do or need much more style customization? @LekoArts would love to make the gatsby custom theme implementation a point of reference as well! Let us know what improvements we can make.

I haven't done any custom theme yet, but I think we might do something at somepoint 😊, so yes!

[benjie]

I'll be releasing a new PostGraphiQL along with PostGraphile V5 sometime next year, so no point linking to our old one since it's way out of date. Will definitely be in touch for help at the relevant times though - thanks!

[patrick91]

@acao I've been playing a bit with theming and the way it is currently setup makes it quite difficult to customise things, if I understood correctly we should be able to use the following variables:

.graphiql-container,
.CodeMirror-info,
.CodeMirror-lint-tooltip,
reach-portal {
  --color-primary: 52, 99%, 57%;
  --color-secondary: 243, 100%, 77%;
  --color-tertiary: 188, 100%, 44%;
  --color-info: 208, 100%, 72%;
  --color-success: 158, 100%, 42%;
  --color-warning: 30, 100%, 80%;
  --color-error: 13, 100%, 58%;
  --color-neutral: 253, 82%, 30%;
  --color-base: 219, 29%, 18%;

  --popover-box-shadow: none;
  --popover-border: 1px solid hsl(var(--color-neutral));
}

to customise the colors, but they are usually used in combination with hsla, which makes it difficult to have a specific color for a specific section, for example both the background and the text color depend on --color-neutral

maybe we can have more granular variables, that default on the current values?

[thomasheyenbrock]

Having separate variables to control font and background colors make sense to me! @patrick91 Would you mind opening a dedicated issue for that? Do you run into more problems where you'd need more control?