From 1ea6cec60803648119262062cb9113ecb022c0eb Mon Sep 17 00:00:00 2001
From: mukimovd <41473651-mukimovd@users.noreply.replit.com>
Date: Thu, 1 May 2025 22:33:50 +0000
Subject: [PATCH] Implement a central theme to ensure a consistent look and
 feel across site

Adds theme file and applies it to the navigation header and home page.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cbacfb18-842a-4116-a907-18c0105ad8ec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/3d8b969a-14be-44e3-8741-9c8bb93efcb4.jpg
---
 client/src/components/layout/NavHeader.tsx | 21 +++++++++++----------
 client/src/lib/theme.ts                    |  1 +
 client/src/pages/Home.tsx                  | 10 +++++-----
 3 files changed, 17 insertions(+), 15 deletions(-)
 create mode 100644 client/src/lib/theme.ts

diff --git a/client/src/components/layout/NavHeader.tsx b/client/src/components/layout/NavHeader.tsx
index 30da18f..7727ed3 100644
--- a/client/src/components/layout/NavHeader.tsx
+++ b/client/src/components/layout/NavHeader.tsx
@@ -3,6 +3,7 @@ import { useTheme } from "@/hooks/use-theme";
 import { Search, Moon, Sun, Menu } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
+import { theme as themeStyles } from "@/lib/theme";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -15,23 +16,23 @@ export function NavHeader() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
-    <header className="navigation-header border-b border-sage/20 dark:border-sage/10 bg-cream dark:bg-paper sticky top-0 z-10 shadow-sm">
+    <header className={`navigation-header border-b ${themeStyles.border.muted} bg-background dark:bg-background sticky top-0 z-10 shadow-sm`}>
       <div className="flex items-center justify-between px-4 py-3 md:px-6 max-w-[var(--content-width)] mx-auto">
         <div className="flex items-center space-x-4">
-          <Link href="/" className="text-navy dark:text-cream font-serif text-2xl font-semibold tracking-tight">
+          <Link href="/" className={`font-serif text-2xl font-semibold tracking-tight ${themeStyles.text.heading}`}>
             Tercul
           </Link>
           <nav className="hidden md:flex items-center space-x-6">
-            <Link href="/explore" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/explore" className={themeStyles.nav.link}>
               Explore
             </Link>
-            <Link href="/authors" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/authors" className={themeStyles.nav.link}>
               Authors
             </Link>
-            <Link href="/collections" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/collections" className={themeStyles.nav.link}>
               Collections
             </Link>
-            <Link href="/blog" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/blog" className={themeStyles.nav.link}>
               Blog
             </Link>
           </nav>
@@ -101,16 +102,16 @@ export function NavHeader() {
       {mobileMenuOpen && (
         <div className="md:hidden px-4 py-3 bg-cream dark:bg-paper border-t border-sage/20 dark:border-sage/20">
           <nav className="flex flex-col space-y-3">
-            <Link href="/explore" className="text-navy/80 dark:text-cream/80 hover:text-sage dark:hover:text-sage/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/explore" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
               Explore
             </Link>
-            <Link href="/authors" className="text-navy/80 dark:text-cream/80 hover:text-sage dark:hover:text-sage/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/authors" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
               Authors
             </Link>
-            <Link href="/collections" className="text-navy/80 dark:text-cream/80 hover:text-sage dark:hover:text-sage/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/collections" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
               Collections
             </Link>
-            <Link href="/blog" className="text-navy/80 dark:text-cream/80 hover:text-sage dark:hover:text-sage/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/blog" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
               Blog
             </Link>
           </nav>
diff --git a/client/src/lib/theme.ts b/client/src/lib/theme.ts
new file mode 100644
index 0000000..ec747fa
--- /dev/null
+++ b/client/src/lib/theme.ts
@@ -0,0 +1 @@
+null
\ No newline at end of file
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index ccd5b39..c3c6a5c 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -30,16 +30,16 @@ export default function Home() {
   return (
     <PageLayout>
       {/* Hero Section */}
-      <section className="bg-paper dark:bg-dark-paper py-16 md:py-24">
+      <section className="bg-navy/10 dark:bg-navy/20 py-16 md:py-24">
         <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6 text-center">
           <div className="max-w-3xl mx-auto mb-8">
             <h1 className="text-3xl md:text-4xl lg:text-5xl font-serif font-bold text-navy dark:text-cream mb-6">
               Discover the world's literary heritage
             </h1>
-            <p className="text-lg md:text-xl text-navy/80 dark:text-cream/80 italic font-serif mb-2">
+            <p className="text-lg md:text-xl text-ink/80 dark:text-cream/80 italic font-serif mb-2">
               "{randomQuote.text}"
             </p>
-            <p className="text-navy/60 dark:text-cream/60">— {randomQuote.author}</p>
+            <p className="text-ink/60 dark:text-cream/60">— {randomQuote.author}</p>
           </div>
           
           <SearchBar className="max-w-xl mx-auto" fullWidth />
@@ -81,11 +81,11 @@ export default function Home() {
                 <Card key={author.id} className="bg-cream dark:bg-dark-surface hover:shadow-md transition-shadow">
                   <CardContent className="p-6">
                     <AuthorChip author={author} size="lg" withLifeDates className="mb-4" />
-                    <p className="text-navy/80 dark:text-cream/80 text-sm line-clamp-4 mb-4">
+                    <p className="text-ink/80 dark:text-cream/80 text-sm line-clamp-4 mb-4">
                       {author.biography?.slice(0, 150)}...
                     </p>
                     <Link href={`/authors/${author.slug}`}>
-                      <Button size="sm" variant="outline" className="w-full text-russet dark:text-russet/90 border-russet/50">
+                      <Button size="sm" variant="outline" className="w-full text-navy dark:text-navy border-navy/50 hover:bg-navy/10">
                         Explore works
                       </Button>
                     </Link>