Fix dark theme for home page.

cline_docs/activeContext.md

@@ -10,6 +10,25 @@
 - Planning authentication implementation for production deployment
 
 ## Recent Changes
+- Improved dark theme appearance and accessibility:
+  - Enhanced contrast for navigation menu items in dark mode by using white text
+  - Fixed site title "Olathe Club of the Deaf" contrast in dark mode by changing to white
+  - Added dark background to navigation menu in dark mode for better visibility
+  - Fixed mobile menu button contrast in dark mode
+  - Improved visibility of secondary buttons in dark mode
+  - Fixed heading contrast issues throughout the site
+  - Enhanced "No image available" text visibility in dark mode
+  - Fixed event card date and "Learn more" link contrast in dark mode by changing to white text
+  - Improved contrast for event card descriptions by changing to white text in dark mode
+  - Enhanced About section paragraph text visibility with white text in dark mode
+  - Fixed Membership Benefits section text contrast with white text in dark mode
+  - Fixed "Join Our Community" section text contrast by changing background to dark gray in dark mode
+  - Changed "View All Events" button from secondary to primary style for consistency
+  - Updated "View All Board Members" button in About page to use primary style
+  - Added explicit text color for headings in dark mode
+  - Improved CSS variables for dark mode with better text contrast
+  - Fixed "Join OCD" button visibility in dark mode
+
 - Implemented comprehensive admin dashboard system:
   - Created central dashboard with statistics and quick actions
   - Built out events management with filtering and CRUD UI

cline_docs/progress.md

@@ -104,6 +104,15 @@
 
 ### Phase 5: Accessibility & Refinement
 - [x] Fix navigation menu active state contrast for better visibility
+- [x] Improve dark theme contrast for better accessibility
+- [x] Enhance button visibility in dark mode
+- [x] Fix heading contrast issues throughout the site
+- [x] Improve text visibility for placeholders and content
+- [x] Fix site title contrast in dark mode
+- [x] Enhance event card text contrast in dark mode
+- [x] Improve paragraph text contrast in About and Membership sections
+- [x] Fix "Join Our Community" section text contrast by changing background color
+- [x] Standardize button styling by changing "View All Events" and "View All Board Members" to primary style
 - [ ] Conduct comprehensive accessibility audit
 - [ ] Implement screen reader optimizations
 - [ ] Refine keyboard navigation

frontend/src/app/about/page.tsx

@@ -94,7 +94,7 @@ export default function AboutPage() {
               ))}
             </div>
             <div className="text-center mt-12">
-              <Link href="/about/board" className="btn-secondary inline-block">
+              <Link href="/about/board" className="btn-primary inline-block">
                 View All Board Members
               </Link>
             </div>

frontend/src/app/globals.css

@@ -30,7 +30,8 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --color-text: #f3f4f6;
-    --color-text-light: #d1d5db;
+    --color-text-light: #e5e7eb;
+    --color-primary-light: #60a5fa;
   }
 }
 
@@ -124,12 +125,17 @@
   }
   
   .btn-secondary {
-    background-color: transparent;
-    border-color: currentColor;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: var(--color-primary-light);
+    color: var(--color-primary-light);
   }
   
   .btn-secondary:hover {
-    background-color: #374151;
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  
+  h2, h3 {
+    color: var(--color-text);
   }
 }
 

frontend/src/app/page.tsx

@@ -34,16 +34,16 @@ const EventCard: React.FC<EventCardProps> = ({
           />
         ) : (
           <div className="w-full h-full flex items-center justify-center">
-            <span className="text-gray-400">No image available</span>
+            <span className="text-gray-400 dark:text-gray-300">No image available</span>
           </div>
         )}
       </div>
       <div className="p-6 flex-grow flex flex-col">
         <h3 className="text-xl font-semibold mb-2">{title}</h3>
-        <p className="text-gray-600 dark:text-gray-300 mb-4 flex-grow">{description}</p>
+        <p className="text-gray-600 dark:text-white mb-4 flex-grow">{description}</p>
         <div className="flex justify-between items-center mt-auto">
-          <span className="text-primary font-medium">{date}</span>
-          <Link href={`/events/${slug}`} className="text-primary hover:underline">
+          <span className="text-primary dark:text-white font-medium">{date}</span>
+          <Link href={`/events/${slug}`} className="text-primary dark:text-white hover:underline">
             Learn more
           </Link>
         </div>
@@ -68,7 +68,7 @@ export default function Home() {
       {/* Featured events section */}
       <section className="py-16 bg-white dark:bg-gray-900">
         <div className="container mx-auto px-4">
-          <h2 className="text-3xl font-bold mb-8 text-center">Featured Events</h2>
+          <h2 className="text-3xl font-bold mb-8 text-center text-gray-900 dark:text-white">Featured Events</h2>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
             <EventCard 
               title="Monthly Social"
@@ -92,7 +92,7 @@ export default function Home() {
           <div className="text-center mt-10">
             <Link 
               href="/events" 
-              className="btn-secondary inline-block"
+              className="btn-primary inline-block"
             >
               View All Events
             </Link>
@@ -103,16 +103,16 @@ export default function Home() {
       {/* About section with video */}
       <section className="py-16 bg-gray-50 dark:bg-gray-800">
         <div className="container mx-auto px-4">
-          <h2 className="text-3xl font-bold mb-8 text-center">About OCD</h2>
+          <h2 className="text-3xl font-bold mb-8 text-center text-gray-900 dark:text-white">About OCD</h2>
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
             <div>
-              <p className="text-lg mb-6">
+              <p className="text-lg mb-6 dark:text-white">
                 Olathe Club of the Deaf (OCD) is a non-profit organization dedicated to serving the deaf and hard-of-hearing community in Olathe and surrounding areas.
               </p>
-              <p className="text-lg mb-6">
+              <p className="text-lg mb-6 dark:text-white">
                 Our mission is to promote social, educational, and recreational opportunities for deaf individuals and their families while fostering a sense of community and belonging.
               </p>
-              <p className="text-lg mb-6">
+              <p className="text-lg mb-6 dark:text-white">
                 Founded in 1975, we have a rich history of advocacy and community service, working to bridge the gap between the deaf and hearing communities.
               </p>
               <Link href="/about" className="btn-primary inline-block">
@@ -132,23 +132,23 @@ export default function Home() {
       {/* Membership Benefits */}
       <section className="py-16 bg-white dark:bg-gray-900">
         <div className="container mx-auto px-4">
-          <h2 className="text-3xl font-bold mb-8 text-center">Membership Benefits</h2>
+          <h2 className="text-3xl font-bold mb-8 text-center text-gray-900 dark:text-white">Membership Benefits</h2>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
             <div className="card p-6">
               <h3 className="text-xl font-semibold mb-4">Community Events</h3>
-              <p className="text-gray-600 dark:text-gray-300">
+              <p className="text-gray-600 dark:text-white">
                 Access to all OCD community events, socials, and gatherings throughout the year.
               </p>
             </div>
             <div className="card p-6">
               <h3 className="text-xl font-semibold mb-4">Voting Rights</h3>
-              <p className="text-gray-600 dark:text-gray-300">
+              <p className="text-gray-600 dark:text-white">
                 Have your say in club decisions and vote in board elections.
               </p>
             </div>
             <div className="card p-6">
               <h3 className="text-xl font-semibold mb-4">Support Network</h3>
-              <p className="text-gray-600 dark:text-gray-300">
+              <p className="text-gray-600 dark:text-white">
                 Connect with a supportive network of deaf and hard-of-hearing individuals.
               </p>
             </div>
@@ -165,10 +165,10 @@ export default function Home() {
       </section>
       
       {/* Call to action */}
-      <section className="py-16 bg-primary text-white">
+      <section className="py-16 bg-primary dark:bg-gray-800">
         <div className="container mx-auto px-4 text-center">
-          <h2 className="text-3xl font-bold mb-4">Join Our Community</h2>
-          <p className="text-xl max-w-3xl mx-auto mb-8">
+          <h2 className="text-3xl font-bold mb-4 text-white">Join Our Community</h2>
+          <p className="text-xl max-w-3xl mx-auto mb-8 text-white">
             Become a member today and connect with the deaf community in Olathe.
           </p>
           <div className="flex flex-col sm:flex-row justify-center gap-4">

frontend/src/components/molecules/Hero.tsx

@@ -105,7 +105,7 @@ const Hero: React.FC<HeroProps> = ({
             {secondaryButtonText && secondaryButtonLink && (
               <Link
                 href={secondaryButtonLink}
-                className="btn-secondary px-6 py-3 rounded-lg text-lg font-medium transition-colors duration-300 inline-block focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
+                className="btn-secondary px-6 py-3 rounded-lg text-lg font-medium transition-colors duration-300 inline-block focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary dark:text-primary-light dark:border-primary-light"
               >
                 {secondaryButtonText}
               </Link>

frontend/src/components/organisms/Navigation.tsx

@@ -47,7 +47,7 @@ const NavLink = ({ href, children, isMobile = false, onClick }: NavLinkProps) =>
   // Create a visually distinct style for active links using the exact primary blue color
   const activeStyles = isActive 
     ? "text-white font-bold border-b-4 border-accent" 
-    : "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700";
+    : "text-gray-700 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700";
   
   // Apply background color using inline style for active links to ensure exact color match
   const linkStyle = isActive ? { backgroundColor: 'var(--color-primary)' } : {};
@@ -104,7 +104,7 @@ const Navigation = () => {
       className={`
         fixed top-0 z-40 w-full 
         transition-all duration-300 ease-in-out
-        ${scrolled ? 'bg-white dark:bg-gray-900 shadow-md' : 'bg-transparent'}
+        ${scrolled ? 'bg-white dark:bg-gray-900 shadow-md' : 'bg-transparent dark:bg-gray-900'}
       `}
       aria-label="Main Navigation"
     >
@@ -113,7 +113,7 @@ const Navigation = () => {
           {/* Logo and site name */}
           <div className="flex-shrink-0">
             <Link href="/" className="flex items-center" onClick={closeMenu}>
-              <span className="text-xl font-bold text-primary dark:text-primary-light">Olathe Club of the Deaf</span>
+              <span className="text-xl font-bold text-primary dark:text-white">Olathe Club of the Deaf</span>
             </Link>
           </div>
           
@@ -133,7 +133,7 @@ const Navigation = () => {
           <div className="md:hidden">
             <button
               type="button"
-              className="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"
+              className="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"
               aria-controls="mobile-menu"
               aria-expanded={isOpen}
               onClick={toggleMenu}