Duplicate style element in head when using Head API and Theme UI

[techfg]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

When using Head API on a site that uses gatsby-plugin-theme-ui, the style elements are duplicated as of Gatsby 5.6 which results in not being able to change the color mode (and likely other side effects). I believe #35841 (comment) is alluding to the same issue.

In Gatsby 5.5, there would be 3 css-global style elements rendered in head, however as of 5.6, there are 6.

This issue does not repro if the Head API is not used.

Not sure if this is an issue that needs to be resolved within Gatsby or possibly gatsby-plugin-theme-ui needs to adjust to the behavior change as of Gatsby 5.6 as alluded to here. There is also #37965 which seems similar and shows duplicate css-global style elements so even though it was closed as a different issue, seems as though other plugins might be experiencing similar issue with the Head API and duplicated styles.

Gatsby 5.5

Gatsby 5.6+

Reproduction Link

1. https://github.com/techfg/gatsby-duplicate-styles-when-using-head-api.git
2. https://codesandbox.io/p/sandbox/duplicate-style-element-in-head-when-using-head-api-and-theme-ui-h8zqtk

Steps to Reproduce

To reproduce:

1. Clone the repo at https://github.com/techfg/gatsby-duplicate-styles-when-using-head-api.git
2. Change to repro directory
3. npm install
4. gatsby develop
5. Open browser to site root
6. Click the Toggle button a few times - the color mode will NOT change
7. Click Without Head - Will Work link
8. Force refresh of entire page
9. Click the Toggle button a few times - the color mode will change
10. Click With Head With Workaround link
11. Force refresh of entire page
12. Click the Toggle button a few times - the color mode will change

The pages work as follows:

1. With Head - Will Not Work (aka. Site Root) - Uses the Head API
2. Without Head - Will Work - Does not use the Head API
3. With Head With Workaround - Will Work - Uses the Head API but forces class added to html element when toggling

Additional Information
The repo contains two additional branches:

1. gatsby-5.5 - To demonstrate that the same code does not repro on 5.5
2. gatsby-5.6 - To demonstrate that the issue started with 5.6

To use a branch:

1. git checkout <branchname>
2. rm -rf ./node_modules/
3. Go to step # 3 in To reproduce section above

Expected Result

On main branch:

1. Step 6 in To reproduce should result in the color mode changing
2. There should only be 3 css-global style elements in head

Actual Result

On main branch:

1. Step 6 in To reproduce does not change the color mode
2. There are 7 css-global style elements in head

Environment

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900HK
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
    npm: 9.7.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  npmPackages:
    gatsby: ^5.11.0 => 5.11.0 
    gatsby-plugin-theme-ui: ^0.16.0 => 0.16.0 
  npmGlobalPackages:
    gatsby-cli: 5.11.0

Config Flags

N/A

[hasparus]

Thanks for finding this!
Really appreciate the detailed description.