-
-
Notifications
You must be signed in to change notification settings - Fork 7
Open
Description
I installed the library as in the doc site, but the color of the components does not change in dark mode. When I examined the codes, I did not see any tailwind class related to the dark theme.
I wrote my own dark theme classes for Accordion and it worked.
Below are the classes written for the button.
export const buttonVariants = cva(
"flex-row items-center justify-center rounded-lg",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground shadow-sm",
destructive: "bg-destructive text-destructive-foreground shadow-sm",
outline: "border-2 border-border bg-background text-foreground",
secondary: "bg-secondary text-secondary-foreground shadow-sm",
ghost: "text-foreground",
link: "text-primary underline",
selection: "border-2 border-border bg-background",
},
size: {
default: "h-12 px-4",
sm: "h-10 px-3",
lg: "h-14 px-6",
icon: "h-12 w-12",
},
selected: {
true: "",
false: "",
},
},
compoundVariants: [
{
variant: "selection",
selected: true,
className: "border-primary bg-primary/5",
},
{
variant: "outline",
selected: true,
className: "border-primary ring-1 ring-primary/20",
},
],
defaultVariants: {
variant: "default",
size: "default",
selected: false,
},
},
);
Metadata
Metadata
Assignees
Labels
No labels