Trouble Implementing Dark Mode in Next.js Project Using App Directory #2648

vladimirzb · 2024-02-02T02:23:12Z

vladimirzb
Feb 2, 2024

Hi there!

I'm currently working on adding dark mode functionality to my Next.js project using the new app directory structure, and I've run into a bit of a snag. Despite the toggle button for switching themes registering click events (as shown in my console logs), the theme doesn't seem to change across my components as expected.

Here's a brief overview of how I've set things up:

Toggle Mode Component: This component is responsible for switching between light and dark themes. It utilizes the useTheme hook from next-themes to set the theme accordingly.

import * as React from "react"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function ModeToggle() {
  const { setTheme } = useTheme()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => { setTheme("light"); console.log("Theme set to light"); }}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => { setTheme("dark"); console.log("Theme set to dark"); }}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => { setTheme("system"); console.log("Theme set to system preference"); }}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Layout Component: My layout component wraps around the main application and should respond to theme changes. It's where I use the ThemeProvider from next-themes.

import "./globals.css";
import { getSessionStatus } from "./actions/AuthActions/isUserLoggedIn";
import ClientLayout from "./components/ClientLayout";
import { Inter as FontSans } from "next/font/google";
import { cn } from "@/lib/utils";
import { ThemeProvider } from "../components/theme-provider";
const fontSans = FontSans({
  subsets: ['latin'],
  variable: "--font-sans",
})
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const isLoggedIn = await getSessionStatus();

  return (
    <html lang="en">
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable
        )}
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        ></ThemeProvider>
        <div>
          <ClientLayout isLoggedIn={isLoggedIn}></ClientLayout>
          {children}
        </div>
      </body>
    </html>
  );
}

Navbar Component: As part of the layout, the navbar should reflect the current theme but remains unchanged when toggling the theme.

"use client";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ModeToggle } from "./shadcnUIDarkMode/botonDarkMode";

export default function ClientLayout({ isLoggedIn }: { isLoggedIn: boolean }) {
  const router = useRouter();

  const signOut = async () => {
    try {
      const response = await fetch("/auth/sign-out", {
        method: "POST",
      });

      if (response.ok) {
        router.push("/");
        router.refresh();
        console.log("The resource has been permanently moved.");
      }
    } catch (error: unknown) {
      console.error("An error occurred:", error);
    }
  };

  const logIn = () => {
    router.push("/iniciar-sesion");
  };

  const signup = () => {
    router.push("/crear-cuenta");
  };
  return (
    <nav className="flex items-center justify-between flex-wrap bg-teal-500 p-6">
      <div className="flex items-center flex-shrink-0 text-white mr-6">
        {/* ... logo code ... */}
      </div>
      <div className="block lg:hidden">{/* ... button code ... */}</div>
      <div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
        <div className="text-sm lg:flex-grow flex items-center">
          <Link href="/">
            <div className="cursor-pointer flex items-center mr-2">
              <Image
                src="/feed-the-pig.svg"
                alt="Home"
                width={34}
                height={34}
              />
              <span className="text-teal-200 hover:text-white ml-2">
                Inicio
              </span>
            </div>
          </Link>
          <Link href="/ingresos" passHref>
            <span className="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
              Ingresos
            </span>
          </Link>
          <Link href="/gastos" passHref>
            <span className="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
              Gastos
            </span>
          </Link>
          <ModeToggle></ModeToggle>
        </div>
        <div>
          {isLoggedIn ? (
            <button
              onClick={signOut}
              className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white lg:mt-0"
            >
              Cerrar sesion
            </button>
          ) : (
            <>
              <button
                onClick={logIn}
                className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white lg:mt-0 mr-2"
              >
                Iniciar Sesion
              </button>
              <button
                onClick={signup}
                className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white lg:mt-0"
              >
                Crear Cuenta
              </button>
            </>
          )}
        </div>
      </div>
    </nav>
  );
}

Demonstration Video: [Link to the video] - This video showcases the issue at hand, where clicking the toggle button logs the theme change in the console but doesn't visually update the UI components as expected.

localhost_3000_ingresos.-.Personal_.Microsoft.Edge.2024-02-01.23-19-50.mp4

I've double-checked my implementation against the documentation and various tutorials, but I can't seem to pinpoint where the issue lies. Any insights, suggestions, or guidance on what might be going wrong would be greatly appreciated!

Thank you in advance for your help!

Answered by vladimirzb

Feb 3, 2024

I was not wrapping correctly in the layout the {children}
Here is how the correct code looks

 return (
    <html lang="en" suppressHydrationWarning>
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable
        )}
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          
          <ClientLayout isLoggedIn={isLoggedIn}></ClientLayout>
          {children}
        </ThemeProvider>


      </body>
    </html>
  );

View full answer

imopbuilder · 2024-02-02T06:48:45Z

imopbuilder
Feb 2, 2024

@vladimirzb

First thing is you should wrap ModeToggle component inside 'use client'; because you are using useTheme which is a client-side hook

'use client';

import * as React from "react"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function ModeToggle() {
  const { setTheme } = useTheme()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => { setTheme("light"); console.log("Theme set to light"); }}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => { setTheme("dark"); console.log("Theme set to dark"); }}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => { setTheme("system"); console.log("Theme set to system preference"); }}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Also you should add suppressHydrationWarning prop in the html in you RootLayout component
Here is the updated RootLayout component

import "./globals.css";
import { getSessionStatus } from "./actions/AuthActions/isUserLoggedIn";
import ClientLayout from "./components/ClientLayout";
import { Inter as FontSans } from "next/font/google";
import { cn } from "@/lib/utils";
import { ThemeProvider } from "../components/theme-provider";
const fontSans = FontSans({
  subsets: ['latin'],
  variable: "--font-sans",
})
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const isLoggedIn = await getSessionStatus();

  return (
    <html lang="en" suppressHydrationWarning>
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable
        )}
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        ></ThemeProvider>
        <div>
          <ClientLayout isLoggedIn={isLoggedIn}></ClientLayout>
          {children}
        </div>
      </body>
    </html>
  );
}

I hope this will resolve the issue you are facing. If you feel any other issues please feel free to ask here

3 replies

vladimirzb Feb 2, 2024
Author

Hi! @imopbuilder

First of all, thank you so much for taking the time to respond and for your helpful insights! You were absolutely right about me overlooking the need to use the mode "as a client component", and I've since corrected that mistake. Additionally, I've implemented the suppressHydrationWarning as you suggested.

Unfortunately, I'm still facing the same issue as before, even after applying your suggestions. I've recorded a new video that showcases the current behavior with the updated code. You can view it below

If there's any more information or context about my project setup that might be helpful for diagnosing this issue, please let me know. I really appreciate your help and am eager to get this sorted out. :)

Thank you again!

localhost_3000_ingresos.-.Personal_.Microsoft.Edge.2024-02-02.12-00-49.mp4

botonDarkMode.tsx.-.gestion-gastos-supabase.-.Visual.Studio.Code.2024-02-02.12-01-37.mp4

vladimirzb Feb 3, 2024
Author

I've made some progress in debugging the dark mode functionality in my Next.js project. To further investigate, I added console logs to capture the current theme state recognized by next-themes:

const { theme, setTheme } = useTheme(); // Destructure theme from useTheme

<DropdownMenuItem onClick={() => { setTheme("dark"); console.log("Theme set to dark but in reality it is", theme); }}>
<DropdownMenuItem onClick={() => { setTheme("system"); console.log("Theme set to system preference"); }}>

However, regardless of the theme change actions, the theme variable remains undefined, as shown in the console logs:

Current theme: undefined
botonDarkMode.tsx:20 Current theme: undefined
botonDarkMode.tsx:33 Theme set to light but in reality it is undefined
botonDarkMode.tsx:36 Theme set to dark but in reality it is undefined
botonDarkMode.tsx:33 Theme set to light but in reality it is undefined

This suggests that there might be an issue with how the theme context is being provided or consumed within my application. Perhaps this additional information could shed some light on what might be causing the issue. Any further assistance or insights would be greatly appreciated. :)

vladimirzb Feb 3, 2024
Author

I was not wrapping correctly in the layout the {children}
Here is how the correct code looks

 return (
    <html lang="en" suppressHydrationWarning>
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable
        )}
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          
          <ClientLayout isLoggedIn={isLoggedIn}></ClientLayout>
          {children}
        </ThemeProvider>


      </body>
    </html>
  );

Answer selected by vladimirzb

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Trouble Implementing Dark Mode in Next.js Project Using App Directory #2648

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Trouble Implementing Dark Mode in Next.js Project Using App Directory #2648

Uh oh!

vladimirzb Feb 2, 2024

Replies: 1 comment · 3 replies

Uh oh!

imopbuilder Feb 2, 2024

Uh oh!

Uh oh!

vladimirzb Feb 2, 2024 Author

Uh oh!

vladimirzb Feb 3, 2024 Author

Uh oh!

vladimirzb Feb 3, 2024 Author

vladimirzb
Feb 2, 2024

Replies: 1 comment 3 replies

imopbuilder
Feb 2, 2024

vladimirzb Feb 2, 2024
Author

vladimirzb Feb 3, 2024
Author

vladimirzb Feb 3, 2024
Author