Skip to content

bug: Dark theme not working #118

@ogzcode

Description

@ogzcode

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.

Image

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
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions