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?
<MantineProvider theme={defaultTheme} defaultColorScheme='light'>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With