Adding Darkmode to graphiql

[harshitkumar31]

Addresses #129

[changeset-bot]

🦋 Changeset detected

Latest commit: 53aeed1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
graphiql	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[acao]

@harshitkumar31 thanks!

Hoping to merge this soon - can you create a changeset as per the bot comment?

[acao]

also, can you add it to GraphiQLProps and document the property? currently, it's only been added to GraphiQLState

[codecov]

Codecov Report

Merging #2146 (53aeed1) into main (2d91916) will decrease coverage by 0.92%.
The diff coverage is 77.24%.

@@            Coverage Diff             @@
##             main    #2146      +/-   ##
==========================================
- Coverage   65.70%   64.78%   -0.93%     
==========================================
  Files          85       77       -8     
  Lines        5106     5188      +82     
  Branches     1631     1655      +24     
==========================================
+ Hits         3355     3361       +6     
- Misses       1747     1823      +76     
  Partials        4        4              

Impacted Files	Coverage Δ
packages/codemirror-graphql/src/hint.ts	94.73% <ø> (ø)
packages/codemirror-graphql/src/lint.ts	100.00% <ø> (ø)
packages/codemirror-graphql/src/results/mode.ts	47.05% <ø> (ø)
...kages/codemirror-graphql/src/utils/forEachState.ts	100.00% <ø> (ø)
...ckages/codemirror-graphql/src/utils/mode-indent.ts	0.00% <0.00%> (ø)
packages/codemirror-graphql/src/variables/hint.ts	89.70% <ø> (ø)
packages/codemirror-graphql/src/variables/mode.ts	79.48% <ø> (ø)
packages/graphiql/src/components/QueryEditor.tsx	63.96% <ø> (ø)
packages/graphiql/src/utility/fillLeafs.ts	5.33% <ø> (ø)
...kages/graphiql/src/utility/introspectionQueries.ts	100.00% <ø> (ø)
... and 57 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3ccb3d8...53aeed1. Read the comment docs.

[acao]

looks great overall! again, thanks so much for this

[acao]

that was fast!

[acao]

Actually you know what - we might need to re-evaluate this strategy for 1.0 because it will invert GraphiQL.Logo which is still supported until 2.0, as well as images in markdown docs. I didn't realize filter would work on images! Can we use a different strategy?

[harshitkumar31]

@acao , Added a style to ensure images aren't inverted.
For the lack of a better example, I added an image inline to test it. This should address your concern w.r.t GraphiQL.Logo

[acao]

thank you! looks great

[acao]

Hmmm... doc explorer font colors... I don't know... hmm!

[brucePedroGomes]

Hi, how you doing ? what should be changed? Can I help you?

[acao]

I don’t think the css filter invert() approach will work. It would be awesome if it did!

This approach makes all the colors look off, and now the doc explorer might fail accessibility tests if dark mode is enabled because of the color contrast

There is a css file someone posted on gist in that thread that should be fine with some tweaking, but make sure it works for query history as well

in the new graphiql rfc as you can see we dont use CSS files, we use theme ui & emotion css, so you don’t have to worry about this working in 2.0 because we will use a different technique for accessing dark/light/solarized and other filtered theme modes, as well as user theme selection. User just provides a set of theme object literals. This is why we were waiting for 2.x to do this but no one is working on graphiql or has time

[harshitkumar31]

I see. I don't have enough cycles or knowledge to implement the suggested changes. I'll close the PR, thanks.

[acao]

Well, you don’t need to close it in my opinion. I am glad to help you with this PR. I appreciate your initiative immensely, and a dark mode would be a great addition to wrap up 1.0

I completely forgot that a major part of this strategy should involve dynamically changing the codemirror theme as well!

This would make the more manual CSS override approach more practical I think?

[acao]

It could be that we also get filter: invert() working where the doc explorer items look funky now (try doc search as well). Probably just a few more css selectors is all we need

[acao]

How about I create a new PR with your commit and my changes? That way you get credit for the original approach. I think we can make this work even if you don’t have time to finish. I think this will work out just fine!

[harshitkumar31]

Sounds good. Thanks @acao

[thomasheyenbrock]

As part of the designs for GraphiQL v2 we'll ship a dedicated dark mode implementation, for updates see #2328. I'm closing this PR in favor of the upcoming dark mode implementation. Thanks for everyone contributing here! ❤️