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: b7e6f18

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

Attention: Patch coverage is 8.33333% with 11 lines in your changes missing coverage. Please review.

Project coverage is 55.78%. Comparing base (c126878) to head (e0da0ab).

❗ Current head e0da0ab differs from pull request most recent head b7e6f18

Please upload reports for the commit b7e6f18 to get more accurate results.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3407      +/-   ##
==========================================
- Coverage   60.80%   55.78%   -5.03%     
==========================================
  Files         120      110      -10     
  Lines        5616     5265     -351     
  Branches     1487     1434      -53     
==========================================
- Hits         3415     2937     -478     
- Misses       1749     1904     +155     
+ Partials      452      424      -28     

Files	Coverage Δ
packages/graphiql/src/components/GraphiQL.tsx	66.44% <8.33%> (-2.27%)	⬇️

... and 31 files with indirect coverage changes

[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