Hydration mismatch related to Mantine script being added to head and body

[corydeppen]

Describe the bug

I installed Mantine in a new Router/Start app and noticed the script that's rendered by Mantine's ColorSchemeScript component is being injected into both the head and body causing the following error:

Expected server HTML to contain a matching <script> in <div>

The setup is basically the same as the Remix example, which is injecting the Mantine script only in the head as expected.

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-2g89sr?file=app%2Froutes%2F__root.tsx

Steps to Reproduce the Bug or Issue

1. Inspect the preview using the browser devtools.
2. Run the command document.querySelectorAll("[data-mantine-script]") in the console.
3. Observe the two nodes that are returned.

Expected behavior

The script tag with data-mantine-script attribute should only appear in the head on client and server.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Brave
• Version: 1.67.123

Additional context

No response