#The theme kept in local storage cannot crush the default theme

6 messages · Page 1 of 1 (latest)

orchid hull
#

I'm sorry that I can't write the problem exactly, but I would like to explain it like this. I bring dark theme by default and if the user switches to light theme, I print it to local storage and shoot it from there. But as you can see in the video, I choose light and light comes on, no problem here. When I renew it, it does not come stable, as in the video, the dark theme comes first and then the light theme. I hope I was able to explain. I am waiting for your support.

zenith roost
orchid hull
# zenith roost If you have ssr, store color scheme in cookie, otherwise do not get initial loca...

I decided to keep it with cookies, but I still have a problem.

function MyApp(props: IAppProps & { colorScheme: ColorScheme }) {
  const { hasError, Component, pageProps, httpContext, properties } = props;

  const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);
  const toggleColorScheme = (value?: ColorScheme) => {
    const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');

    setColorScheme(nextColorScheme);
    // when color scheme is updated save it to cookie
    setCookie('mantine-color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
  };
console.log(colorScheme)

        <Head>
          <title>aaa</title>
        </Head>
        <ColorSchemeProvider
          colorScheme={colorScheme}
          toggleColorScheme={toggleColorScheme}
        >
          <MantineProvider
            withGlobalStyles
            withNormalizeCSS
            theme={{ ...defaultTheme, colorScheme }}
          >
            <Component {...pageProps} />
          </MantineProvider>
        </ColorSchemeProvider>
      </>
    );
  }

By default light comes and colorscheme comes as undefined

image.png
zenith roost
orchid hull
zenith roost