Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unexpected Theme Switch to Light Mode After User Login #199

Open
therealtgd opened this issue Aug 15, 2023 · 9 comments
Open

Unexpected Theme Switch to Light Mode After User Login #199

therealtgd opened this issue Aug 15, 2023 · 9 comments

Comments

@therealtgd
Copy link

therealtgd commented Aug 15, 2023 •
edited
Loading

Description:

After integrating the next-themes library into my Next.js application, I encountered an unexpected behavior related to theme switching. I'll describe the issue below without sharing my app's source code or providing access to the app itself.

Steps to Reproduce:

Navigate to the application in a fresh browser session.
Observe that the default theme is correctly set to dark mode.
Log in as a user.
Observe that the UI unexpectedly switches to light mode, even though the theme is set to dark mode.

Expected Behavior:

The theme of the application should consistently remain in dark mode after the user logs in, as configured in the next-themes library's ThemeProvider.

Actual Behavior:

After the user logs in, the UI switches to light mode, despite the theme being set to dark mode.

Relevant Code:

theme.provider.tsx

"use client";

import { ThemeProvider as NextThemesProvider } from "next-themes";
import { FC, ReactNode, useEffect, useState } from "react";

type ProvidersProps = {
  children: ReactNode;
};

const ThemeProvider: FC<ProvidersProps> = ({ children }) => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return <>{children}</>;
  }

  return (
    <NextThemesProvider defaultTheme="dark" attribute="class">
      {children}
    </NextThemesProvider>
  );
};

export default ThemeProvider;

layout.tsx

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

  return (
    <html
      suppressHydrationWarning
      lang="en"
    >
      <body className="bg-white dark:bg-black">
        <ThemeProvider>
          ...
        </ThemeProvider>
      </body>
    </html>
  );
}

Additional Information:

Application framework: Next.js v13.4.12
Authentication library: NextAuth.js v4.22.5
Theme management library: next-themes v0.2.1
Other relevant libraries and dependencies: tailwindcss v3.3.3

Environment:

Operating System: macOS 13.4.1
Browser: Chrome Version 115.0.5790.170 (Official Build) (arm64)
@therealtgd
Copy link
Author

Also, this is my login handler:

const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setLoading(true);
    const response = await signIn("credentials", { email, password, redirect: false });
    if (response?.url) {
      router.push("/");
      router.refresh();
    } else {
      toast.error("Oops! Unable to sign in. Please check your email and password.");
      setPassword("");
      setLoading(false);
    }
  };

@sayandedotcom
Copy link

Same thing happing with me.. even though in local storage the theme is dark

@therealtgd
Copy link
Author

Any updates regarding this issue?

@therealtgd
Copy link
Author

therealtgd commented Oct 4, 2023 •
edited
Loading

I've noticed that the bug happens when I use redirect from next/navigation.

@therealtgd
Copy link
Author

Any updates?

@Mosericko
Copy link

Same thing happing with me.. even though in local storage the theme is dark

similar issue, did you find any solution for it? @sayandedotcom @therealtgd

@therealtgd
Copy link
Author

Same thing happing with me.. even though in local storage the theme is dark

similar issue, did you find any solution for it? @sayandedotcom @therealtgd

Still no fix.

@shakhzodkudratov
Copy link

facing the same with https://next-international.vercel.app when locale is changed router.refresh() is triggered and there is flickering after router.refresh, although first page load is fine without flickering

@SepehrShapouri
Copy link

anyone got a fix on this? I also noticed that the same thing happens when navigating through different layouts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@shakhzodkudratov @Mosericko @therealtgd @sayandedotcom @SepehrShapouri