Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fix flash of theme-switching on page-reload? (Mantine v7.1.2 - NextJS)

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'>

like image 502
AnonymousBlank Avatar asked Oct 22 '25 05:10

AnonymousBlank


1 Answers

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.

like image 121
David Boskovic Avatar answered Oct 24 '25 09:10

David Boskovic