Change localstorage to cookie or give the ability to change it easily

[sovetski]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.15.2

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

All

Describe the bug

I know that you will close this issue again like others without any help, any way I create it

By default the colorScheme is stored in local storage, why not. But on SSR the server can not read it, but it can read cookies:

Related: #7314

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[niravbhimani53]

Hi @sovetski You can create a custom colour scheme manager according to the docs.

The example in the link shows a custom colour scheme manager implementation with local storage but you can update the implementation with cookies as required.

[sovetski]

Hi @sovetski You can create a custom colour scheme manager according to the docs.

The example in the link shows a custom colour scheme manager implementation with local storage but you can update the implementation with cookies as required.

Hi, thank you but I already tried before opening this issue and it did not work. It stored the color scheme value in the cookie, but on SSR, when the value was "auto" there was hydratation error on page load.

If you have a working example of custom colour scheme with SSR and "auto" support, can you share your code?

Thanks

[niravbhimani53]

As mentioned by @rtivital , you will need to add use client directive to execute code on client side.

Sorry I don't have an example code. I discarded my changes 😫.

Also, outside the topic I remember seeing some error related to hydration when I was trying to replicate the issue.

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching
...

This happened to me due to Grammarly plugin during local dev. More info here - vercel/next.js#35773 (comment)

[rtivital]

By default, ColorSchemeScript component works with localStorage. If you want to change this behavior you can write a script similar to what you see in the source code of ColorSchemeScript component for cookie management. Note that you still cannot use auto option in this case – this value is only accessible on the client as user OS color scheme is not known during server side rendering.