CODEWITHSUNDEEP
next.jsreloadpage-refreshmantineflashing
AnonymousBlank
AnonymousBlank

Reputation: 51

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? Thank you so much in advance

<MantineProvider theme={defaultTheme} defaultColorScheme='light'>

Upvotes: 4

Views: 2736

Answers (5)

Harald Kriebisch
Harald Kriebisch

Reputation: 1

Super wierd this one. In my case i had to supply the default color scheme to both ColorSchemeScript and MantineProvider and additionally use the default head tag instead of the nextjs one and supply it with the prop manually. Then and only then did it finally work.

Ends up looking like this in my case:

<html lang="en"  {...mantineHtmlProps}>
    <head data-mantine-color-scheme="dark">
        <ColorSchemeScript defaultColorScheme={"dark"}/>
    </head>
    <body>
    <MantineProvider defaultColorScheme={"dark"}>
        {children}
    </MantineProvider>
    </body>
</html>

Upvotes: 0

Kishore Sundharam
Kishore Sundharam

Reputation: 11

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>

Upvotes: 1

bdrangova
bdrangova

Reputation: 41

If you are using the AppRouter adding defaultColorScheme to the <ColorSchemeScript /> works.

Like this:

<ColorSchemeScript defaultColorScheme="dark" />

Upvotes: 4

David Boskovic
David Boskovic

Reputation: 1529

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.

Upvotes: 5

mertk
mertk

Reputation: 78

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.

Upvotes: 1

Related Questions