Next.js Discord

Discord Forum

Using next-themes, theme not changing based on operating system preferences

Unanswered
American Shorthair posted this in #help-forum
Open in Discord
American ShorthairOP
I am using next-themes to include themes in my Next.js App. But on changing system perferences, the theme is not changing,

Here's the link to the Github repo: https://github.com/realvaibhava/theme-test

A lil bit about the code.
1. Theme colors are defined in "GlobalStyle.js" file.
2. "ThemeToggle.js" (present inside "component" directory) contains code for a custom toggle to toggle themes. It's working perfectly fine.
3. <ThemeProvider> is present in "providers.js"

Now, I am not able to achieve theme change based on operating system preferences. Can anybody please help in this? It's a bit urgent.

36 Replies

Plott Hound
check the local storage in your browser and that it matches what you see:
@Plott Hound check the local storage in your browser and that it matches what you see:
American ShorthairOP
Yes, it's matching with what I am seeing. light value for light-theme and dark value for dark-theme
Plott Hound
had a glance at your repo and you shouldnt be using 'use client', useEffect or useState in your parent layout.js move these client features down to a component and import them into a page
American ShorthairOP
Sure, let me do this.
Plott Hound
might be causing hydration issues, also remove suppressHydrationWarning from html so we can see whats happening
your providers file is setup correctly so we can rule that out
Plott Hound
if using typescript your layout should be like this:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  return (
    <html lang="en">
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  )
}
without any us client, state or effects. at least until we find the issue
if that doesnt work and you've removed the toggle then you need to report an issue to their github
American ShorthairOP
I have removed 'use client' directive at the top unsless it's compulsory.
Still not working. I think I need to report an issue to their github account.
Btw, thanks a lot for the help @Plott Hound 🙌🙌
@American Shorthair Btw, thanks a lot for the help <@578864362882727958> 🙌🙌
Plott Hound
no problem, please let me know what the issue is when you get to bottom of it. i'd like to know too
@American Shorthair Still not working. I think I need to report an issue to their github account.
Ray
have you tried to remove the theme on localstorage and see if it change?
it works for me
when the theme is system in localstorage
American ShorthairOP
let me check
@Ray it works for me
American ShorthairOP
You're close but the system theme should be default, instead of click of a button which you made.
How can I made it default? I used "defaultTheme="system"" but it's not working.
@American Shorthair How can I made it default? I used "defaultTheme="system"" but it's not working.
Ray
it will use system if you don't have a theme key on localstorage
meaning it never being set
American ShorthairOP
can you share the code snippet for this?
Ray
i just clone your repo
American ShorthairOP
system theme code snippet
Ray
<button onClick={() => setTheme("system")}>System Mode</button>
it should use system theme if you remove the theme on your localstorage
American ShorthairOP
but ideally there should be only one button to toggle themes to light/dark. System preference should change theme irrespetive of setting theme to "system".
Is it possible to achieve using next-themes?
using use-dark-mode npm package, it's possible.
@American Shorthair but ideally there should be only one button to toggle themes to light/dark. System preference should change theme irrespetive of setting theme to "system".
Plott Hound
whenever you click to toggle from light to dark its adding that to local storage you need some button or way to remove that if user wants to use system default
or only use system default and remove your toggle entirely
how else can the browser know if a user who has previously selected light or dark wants to go back to using system
American ShorthairOP
this website is using use-dark-mode npm package to manage themes. I want to achieve same using next-themes where only one toggle to toggle light/dark theme and theme change on system prefeences change.
@Ray Click to see attachment
American ShorthairOP
this i saw, but i don't know how to use it. can you please help me with how to use this and where to use this resolvedTheme?