I'm using Mantine v7.1.2 with NextJS.I've already added this code to my _app.tsx, but the flash of dark-theme on page-refresh still persists. How do I fix this? Thank you so much in advance
<MantineProvider theme={defaultTheme} defaultColorScheme='light'>
On
Was surprised to see this question downvoted. Mantine does indeed do a flash of default browser color-scheme after it injects the css but before the javascript adds the data-mantine-color-scheme="value" attribute to the html tag.
The workaround I used was to set data-mantine-color-scheme="light" (or dark or auto) manually on the <html ... tag to avoid the flash.
On
I faced the similar bug while developing my project. You have to set the colorsSchemeScript theme to "light", if you are using light theme. Just adding "light" to MantineProvider's defaultColorScheme will still flicker. It worked for me.
<Head>
<ColorSchemeScript defaultColorScheme="light" />
</Head>
Mantine team provides templates for popular environments on their document. There are not enough details in your question but I can suggest you to check out the templates and compare with your project.
Templates listed here.
Next app route and Next page route, both of them available.