resolvedTheme can be system

[jonahsnider]

I have noticed in testing that useTheme().resolvedTheme can be system. I think it's only happening in the first render, but I haven't tried making a minimal reproduction.

I am using next-themes@npm:0.0.13-beta.2 [9e7cc] (via npm:beta [9e7cc]) and not passing any options to <ThemeProvider>.

Is this expected behavior?

[thien-do]

Yeah this is really weird.. I also see this behavior, but by reading the code it should not happen https://github.com/pacocoursey/next-themes/blob/master/index.tsx !

[thien-do]

I also see it on 0.0.13, and I can reproduce it by setTheme("system") again after the initial set

[jonahsnider]

I think it also happened on the latest stable version (which is what prompted me to update to beta). Maybe it has to do with the default theme being system + media query not working in SSR???

[thien-do]

Yeah the latest version doesn't change the resolving part so I think it likely is.

Actually I cannot reproduce your exact issue (resolvedTheme returns "system") but I do see some related issue I noted at #34 it's when the "system" is being used for "data-theme". In my case, resolvedTheme is still correct (either "light" or "dark") but the data-theme is set incorrectly

[pacocoursey]

Thank you both for reporting this! I just published v0.0.13-beta.3 which should fix both #33 and #34 – please test and let me know if there is still an issue.

[jonahsnider]

Updating to the latest beta seems to have fixed the issue! I'm curious, what was the source of this bug?

[pacocoursey]

Sweet, thanks! I wasn't able to reproduce the issue on the first render, but I was able to reproduce the issue when doing setTheme('system') twice.

@thien-do explained it in #34

since the theme value (in state) is not changed (still "system"), the "handleMediaQuery" is not triggered

I updated the logic in this commit: 8ab93d9

Basically when setting theme to system, it wasn't applying the resolved theme – that only happened by accident! This adds the check and actually makes it faster (previously there were two calls: one to update the DOM to system, then another to update the DOM to dark/light)

[thien-do]

You rock @pacocoursey 🚀 it's fixed!