GraphiQL component: forcedTheme

[TuvalSimha]

closes issue: #3398

Description:

• User can force theme - added forcedTheme prop
• When forcedTheme is set, the toggle theme option in the setting disappears.

[changeset-bot]

🦋 Changeset detected

Latest commit: 8f75b62

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

This PR includes changesets to release 1 package

Name	Type
graphiql	Minor

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

[dimaMachina]

Can enforce the theme from editorTheme prop.

so if the user can enforce the theme via editorTheme why do we need additional prop showThemeSettings?

We could show the theme toggle only if props.editorTheme was not set

Updated: let's stay with new prop forcedTheme

Also please add simple cypress tests

[codecov]

Codecov Report

Merging #3407 (e0da0ab) into main (2348641) will increase coverage by 0.03%.
Report is 12 commits behind head on main.
The diff coverage is 83.78%.

❗ Current head e0da0ab differs from pull request most recent head 8f75b62. Consider uploading reports for the commit 8f75b62 to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3407      +/-   ##
==========================================
+ Coverage   55.75%   55.78%   +0.03%     
==========================================
  Files         110      110              
  Lines        5243     5265      +22     
  Branches     1426     1434       +8     
==========================================
+ Hits         2923     2937      +14     
- Misses       1897     1904       +7     
- Partials      423      424       +1     

Files Changed	Coverage Δ
packages/graphiql/src/components/GraphiQL.tsx	66.44% <8.33%> (-3.49%)	⬇️
...nguage-service/src/utils/getVariablesJSONSchema.ts	94.59% <98.38%> (+0.71%)	⬆️

[mvdiener]

Hello, I'm not an active contributor to this repo, but I am actively watching these changes because I'm very interested in utilizing this property.

I'm wondering if these changes still allow for the utilization of the system theme? In the code for the useTheme hook, the theme value of null indicates the theme should use the system default. Does the new forcedTheme property allow for the scenario where we want to hide the theme toggle in the settings modal, but also want the theme to be set based on the system default?

Perhaps a third option for theme: forcedTheme?: 'light' | 'dark' | 'system'; and under the hood, 'system' can be translated as null when calling setTheme()?

Thank you, and looking forward to these upcoming changes!

[dimaMachina]

@mvdiener i guess we can use undefined value to disable forcedTheme and null to set as theme system and migrate to next-themes package in v4 which has system that is aka null now (in our useTheme hook)

Update : or even already use system that will be alias to current null

[louisscruz]

Are there any additional adjustments needed to get this in? cc @B2o5T

[TallTed]

Suggested change

	* forcedTheme allows to enforce a specific theme for GraphiQL.
	* forcedTheme allows enforcement of a specific theme for GraphiQL.

[TallTed]

Suggested change

	Adjust how the interface looks like.
	Adjust how the interface appears.