Use system preference theme

[GrigoriiKostromin]

I want the documentation adapt to the system theme. I used <ThemeProvider enableSystem={true}> from next-themes, but it didn't work. For some reason, the documentation keeps the theme that was set by the SwitchTheme button, which I have already disabled. I don't know how to fix this. Maybe I'm doing something wrong.

I would appreciate any response.

[fuma-nama]

You need to clear cookies first

[GrigoriiKostromin]

I just started with Next.js and don’t quite understand how everything works. Could you explain how I can clear cookies, where the code for that should go, and how it would solve the problem? If this is too complicated to explain, I’d appreciate it if you could point me to resources where I can learn more about it.

I suspect that the "Switch Theme" button works similarly to the example page at https://next-themes-example.vercel.app/, right? If so, I would just need to modify its functionality. However, I don’t know how to do that because there’s no documentation on how to edit the "Switch Theme" button. If my assumption correct is there a way to modify the "Switch Theme" button?

I would appreciate any further help!

[fuma-nama]

By default, it's system (resolved from system's preferred theme). If you've changed it before, like setting it to dark, it stays at your changed value. The value is stored in cookies, it's a browser thing and you can clear cookies from browser settings. See Chrome's Guide for deleting cookies from a site.