novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add light/dark mode support with Tailwind dark: prefix

Browse Source
This commit is contained in:
张翔
2026-02-21 23:32:47 +08:00
parent 1d7872c8cc
commit 15e17a8f20
13 changed files with 2581 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/button.tsx
+2 -2
View File
@@ -15,9 +15,9 @@ const buttonVariants = cva(
outline:
"border border-[var(--color-tech-blue)] bg-transparent text-[var(--color-tech-blue)] hover:bg-[var(--color-tech-blue)]/10 hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/20",
secondary:
"bg-[var(--color-bg-tertiary)] text-white border border-gray-700 hover:border-[var(--color-tech-blue)] hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/20 hover:scale-105 active:scale-95",
"bg-gray-100 dark:bg-[var(--color-bg-tertiary)] text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700 hover:border-[var(--color-tech-blue)] hover:shadow-lg hover:shadow-[var(--color-tech-blue)]/20 hover:scale-105 active:scale-95",
ghost:
"text-gray-300 hover:text-[var(--color-tech-blue)] hover:bg-[var(--color-bg-tertiary)]",
"text-gray-600 dark:text-gray-300 hover:text-[var(--color-tech-blue)] hover:bg-gray-100 dark:hover:bg-[var(--color-bg-tertiary)]",
link: "text-[var(--color-tech-blue)] underline-offset-4 hover:underline",
},
size: {
src/components/ui/card.tsx
+4 -4
View File
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="card"
className={cn(
"bg-[var(--color-bg-secondary)] text-white flex flex-col gap-6 rounded-xl border border-gray-800 py-6 shadow-lg transition-all duration-300 hover:border-[var(--color-tech-blue)] hover:shadow-[var(--color-tech-blue)]/20",
"bg-white dark:bg-[var(--color-bg-secondary)] text-gray-900 dark:text-white flex flex-col gap-6 rounded-xl border border-gray-200 dark:border-gray-800 py-6 shadow-lg transition-all duration-300 hover:border-[var(--color-tech-blue)] hover:shadow-[var(--color-tech-blue)]/20",
className
)}
{...props}
@@ -32,7 +32,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-title"
className={cn("leading-none font-semibold text-white", className)}
className={cn("leading-none font-semibold text-gray-900 dark:text-white", className)}
{...props}
/>
)
@@ -42,7 +42,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-description"
className={cn("text-gray-400 text-sm", className)}
className={cn("text-gray-600 dark:text-gray-400 text-sm", className)}
{...props}
/>
)
@@ -75,7 +75,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-footer"
className={cn("flex items-center px-6 [.border-t]:pt-6 border-t border-gray-800", className)}
className={cn("flex items-center px-6 [.border-t]:pt-6 border-t border-gray-200 dark:border-gray-800", className)}
{...props}
/>
)