feat: dark mode for style tabs

This commit is contained in:
Daniel Avila 2023-03-24 19:02:42 -04:00
parent ad0f2408c8
commit b8720eec3d

View file

@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
<TabsPrimitive.List
ref={ref}
className={cn(
"inline-flex items-center justify-center rounded-md bg-slate-100 p-1 dark:bg-slate-800",
"inline-flex items-center justify-center rounded-md bg-gray-100 p-1 dark:bg-gray-800",
className
)}
{...props}
@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
>(({ className, ...props }, ref) => (
<TabsPrimitive.Trigger
className={cn(
"inline-flex min-w-[100px] items-center justify-center rounded-[0.185rem] px-3 py-1.5 text-sm font-medium text-slate-700 transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-sm dark:text-slate-200 dark:data-[state=active]:bg-slate-900 dark:data-[state=active]:text-slate-100",
"inline-flex min-w-[100px] items-center justify-center rounded-[0.185rem] px-3 py-1.5 text-sm font-medium text-gray-700 transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm dark:text-gray-200 dark:data-[state=active]:bg-gray-700 dark:data-[state=active]:text-gray-100",
className
)}
{...props}
@ -43,7 +43,7 @@ const TabsContent = React.forwardRef<
>(({ className, ...props }, ref) => (
<TabsPrimitive.Content
className={cn(
"mt-2 rounded-md border border-slate-200 p-6 dark:border-slate-700",
"mt-2 rounded-md border border-gray-200 p-6 dark:border-gray-700",
className
)}
{...props}