refactor: update color scheme to use custom CSS variables for better consistency

Co-authored-by: Sahaj Jain <82111591+jnsahaj@users.noreply.github.com>
This commit is contained in:
v0
2026-07-31 22:31:27 +00:00
parent f5441ed701
commit c0890ab31a
6 changed files with 10 additions and 10 deletions
+1 -1
View File
@@ -30,7 +30,7 @@ export default function Home() {
}, []);
return (
<div className="bg-background text-foreground flex min-h-[100dvh] flex-col items-center justify-items-center">
<div className="bg-[var(--hp-surface)] text-white flex min-h-[100dvh] flex-col items-center justify-items-center">
<Header
isScrolled={isScrolled}
mobileMenuOpen={mobileMenuOpen}
+5 -5
View File
@@ -29,7 +29,7 @@ export function Footer() {
<div className="sm:col-span-2">
<Link href="/" className="mb-4 flex items-center gap-2">
<Logo className="size-5" />
<span className="font-mono text-sm font-semibold">tweakcn</span>
<span className="font-mono text-sm font-semibold text-white">tweakcn</span>
</Link>
<p className="max-w-xs text-xs leading-relaxed text-[var(--hp-text-secondary)]">
A visual theme editor for shadcn/ui. Customize, preview, and export Tailwind CSS
@@ -62,7 +62,7 @@ export function Footer() {
{/* Product links */}
<div>
<h4 className="mb-4 font-mono text-xs font-semibold uppercase tracking-widest text-foreground">
<h4 className="mb-4 font-mono text-xs font-semibold uppercase tracking-widest text-white">
Product
</h4>
<ul className="space-y-2.5">
@@ -81,7 +81,7 @@ export function Footer() {
{/* Resources links */}
<div>
<h4 className="mb-4 font-mono text-xs font-semibold uppercase tracking-widest text-foreground">
<h4 className="mb-4 font-mono text-xs font-semibold uppercase tracking-widest text-white">
Resources
</h4>
<ul className="space-y-2.5">
@@ -92,14 +92,14 @@ export function Footer() {
href={link.href}
target="_blank"
rel="noopener noreferrer"
className="font-mono text-xs text-[var(--hp-text-secondary)] transition-colors hover:text-foreground"
className="font-mono text-xs text-[var(--hp-text-secondary)] transition-colors hover:text-white"
>
{link.label}
</a>
) : (
<Link
href={link.href}
className="font-mono text-xs text-[var(--hp-text-secondary)] transition-colors hover:text-foreground"
className="font-mono text-xs text-[var(--hp-text-secondary)] transition-colors hover:text-white"
>
{link.label}
</Link>
+1 -1
View File
@@ -36,7 +36,7 @@ const faqs = [
export function FAQ() {
return (
<section id="faq" className="w-full border-b border-[var(--hp-rule)]">
<section id="faq" className="w-full border-b border-[var(--hp-rule)] bg-[var(--hp-surface)]">
<div className="container mx-auto px-4 md:px-6">
{/* Header row */}
<div className="border-b border-[var(--hp-rule)] py-10">
+1 -1
View File
@@ -14,7 +14,7 @@ export function Hero() {
const mode = themeState.currentMode;
return (
<section className="relative w-full overflow-hidden border-b border-[var(--hp-rule)]">
<section className="relative w-full overflow-hidden border-b border-[var(--hp-rule)] bg-[var(--hp-surface)]">
{/* Fine dot grid */}
<div
className="pointer-events-none absolute inset-0 -z-10"
+1 -1
View File
@@ -23,7 +23,7 @@ const steps = [
export function HowItWorks() {
return (
<section id="how-it-works" className="w-full border-b border-[var(--hp-rule)]">
<section id="how-it-works" className="w-full border-b border-[var(--hp-rule)] bg-[var(--hp-surface)]">
<div className="container mx-auto px-4 md:px-6">
{/* Header row */}
<div className="flex items-end justify-between border-b border-[var(--hp-rule)] py-10">
+1 -1
View File
@@ -177,7 +177,7 @@ function MarqueeRow({ items, reverse = false }: { items: typeof testimonials; re
export function Testimonials() {
return (
<section id="testimonials" className="w-full border-b border-[var(--hp-rule)] py-20 md:py-28 overflow-hidden">
<section id="testimonials" className="w-full border-b border-[var(--hp-rule)] bg-[var(--hp-surface)] py-20 md:py-28 overflow-hidden">
<div className="container mx-auto mb-12 px-4 md:px-6">
<motion.div
initial={{ opacity: 0, y: 12 }}