Search code examples
javascriptnext.jsnextui

Dark mode not applied on component

I am trying to use the Dropdown from NextUI and I already configured the dark mode as per the Dark mode

I use the Dropdown but it applies using the light theme, but as per the docs, the following dark box is applied:

enter image description here

So my version I try to apply dark mode:

// app/layout.tsx


export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <React.StrictMode>
      <html lang="en">
        <body className={inter.className}>
          <NextUIProvider>
            <main className="dark text-foreground bg-background min-h-screen p-4 md:p-24">
              <Header />
              {children}
              <Footer />
            </main>
          </NextUIProvider>
        </body>
      </html>
    </React.StrictMode>
  );
}

And create a dropdown:

// app/_components/nav.tsx


export default function Nav() {
  
  return (
    <Card className="mb-5 p-0">
      <CardBody className="flex flex-row py-3 px-4 w-full">
        <div className="flex flex-auto flex-row space-x-4 ">
          ... some buttons ...
        </div>
        <div className="flex flex-auto flex-row-reverse">
          <div className="flex items-center gap-4">
            <Dropdown
              backdrop="blur"
              showArrow
              radius="sm"
              classNames={{
                base: "before:bg-default-200", // change arrow background
                content: "p-0 border-small border-divider ",
              }}
            >
              <DropdownTrigger>
                <Button variant="ghost">Open Menu</Button>
              </DropdownTrigger>
              <DropdownMenu>
                <DropdownItem>View</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </div>
        </div>
      </CardBody >
    </Card >
  )
}

Result is the Dropdown is white, which I wish black...:

enter image description here

Edit (26th August): As per @xxnikosxx question, if I tried using ´dark´ class directly on the components, which did work.

I added the class dark directly to the Dropdown, DropdownMenu and DropdownItem:

export default function Nav() {

  return (
    <Card className="mb-5 p-0">
      <CardBody className="flex flex-row py-3 px-4 w-full">
        <div className="flex flex-auto flex-row space-x-4 ">
          <!-- ...some buttons... -->
        </div>
        <div className="flex flex-auto flex-row-reverse">
          <div className="flex items-center gap-4">
            <Dropdown
              radius="sm"
              classNames={{
                content: "dark text-white p-0 border-small border-divider ", // here
              }}
            >
              <DropdownTrigger>
                <Button variant="ghost">Open Menu</Button>
              </DropdownTrigger>
              <DropdownMenu className="dark">                               // here
                <DropdownItem className="dark">View</DropdownItem>          // here
              </DropdownMenu>
            </Dropdown>
          </div>
        </div>
      </CardBody >
    </Card >
  )
}

And the result is the same as per the docs: enter image description here

Solution

  • Posting the answer since it worked after comment conversation - apply .dark to the components itself since you only want to have dark mode for reference, if you wanted to have both light and dark mode, you can use .dark: to change classnames for dark mode only.