I recently started using the Dropdown component from NextUI and managed to set up the dark mode based on the Dark mode documentation.
However, when I implemented the Dropdown, it appeared in the light theme instead of the dark mode that I had configured:
https://i.sstatic.net/0VFtOQCY.png
Here is the code snippet where I tried to apply the 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>
);
}
Next, I tried to create a dark-themed dropdown as follows:
// 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 >
)
}
However, the Dropdown still appeared in white, whereas I wanted it in black:
https://i.sstatic.net/82ml57ZT.png
Edit (26th August): Upon @xxnikosxx's suggestion, I tried directly adding the ´dark´ class to the components, which worked:
I applied the class dark 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 >
)
}
Now, the Dropdown appears correctly in dark mode as shown in the docs: https://i.sstatic.net/XIP6qusc.png