When SSR is used and using global styles on _document.tsx, dark mode is not used on initial(first) loading. For example, the root of tag doesn't have data-theme itself, but after initial loading it has data-theme="dark" as a attribute.
What I wanna know is, how do you set data-theme="dark" if user has enabled it?
The dark mode SSR flickering is a known issue, so you're not alone in your frustration. The current solution is to use CSS theme variables, which make it possible to inject a theme into your app's stylesheet at build time to apply the user's selected settings before the whole app is rendered. This feature is currently considered experimental but should be stable in Material UI v6.