Skip to content

fix: improve dark mode contrast and accessibility for input placeholders #240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kalpana-chavhan wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: improve dark mode contrast and accessibility for input placeholders #240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions frontend/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class', // Enables dark mode support
theme: {
extend: {},
extend: {
colors: {
// High-contrast colors for Dark Mode (WCAG 2.1 Compliant)
primary: '#22c55e', // Success Green
'primary-hover': '#16a34a',
'dark-card': '#121212', // Slightly lighter than pure black
'dark-lighter': '#1e1e1e', // Lighter grey for buttons/sections
'accessible-gray': '#a1a1aa', // Zinc-400 for placeholders/muted text
},
},
},
plugins: [],
};
};
77 changes: 50 additions & 27 deletions landing/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,58 +4,81 @@
@tailwind components;
@tailwind utilities;

body {
font-family: 'Inter', sans-serif;
@apply bg-dark text-white antialiased;
}
@layer base {
body {
font-family: 'Inter', sans-serif;
/* Use a slightly lifted dark color for better depth than pure black */
background-color: #09090b;
@apply text-white antialiased;
}

.gradient-text {
@apply bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent;
}
/* Accessibility Fix: Placeholder Contrast */
/* This ensures users can actually read the hint text in input fields */
input::placeholder,
textarea::placeholder {
color: #a1a1aa !important; /* Zinc-400 provides a 4.5:1 contrast ratio */
opacity: 1;
}

.card {
@apply bg-dark-card border border-gray-700 rounded-xl p-6 transition-all hover:border-green-500;
/* Accessibility Fix: Table row hover state */
tr:hover {
background-color: #1e1e1e !important;
transition: background-color 0.2s ease;
}
Comment on lines +23 to +27
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Move transition to the base tr selector for proper animation.

The transition property is defined inside :hover, which means it only applies when hovering. On mouse-out, the background will snap back instantly instead of animating smoothly. Also, consider using the dark-lighter token.

🐛 Proposed fix 
+ tr {
+   transition: background-color 0.2s ease;
+ }
+
  /* Accessibility Fix: Table row hover state */
  tr:hover {
-   background-color: `#1e1e1e` !important;
-   transition: background-color 0.2s ease;
+   background-color: theme('colors.dark-lighter') !important;
  }
🤖 Prompt for AI Agents 
In `@landing/src/index.css` around lines 23 - 27, The transition is currently set
only on the tr:hover rule so the un-hover state snaps; move the transition
declaration from tr:hover into the base tr selector (target the tr selector, not
tr:hover) so both hover-in and hover-out animate, and replace the hardcoded
background-color value with the design token (e.g., --dark-lighter) in tr:hover
to use the themed color.

}

.btn-primary {
@apply px-6 py-3 rounded-lg bg-primary hover:bg-primary-hover transition-all text-white font-medium;
}
@layer components {
.gradient-text {
@apply bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent;
}

.btn-secondary {
@apply px-6 py-3 rounded-lg bg-dark-lighter hover:bg-gray-800 transition-all text-white font-medium border border-gray-700;
}
.card {
/* Improved border from gray-700 to zinc-700 for better visibility in dark mode */
@apply bg-dark-card border border-zinc-700 rounded-xl p-6 transition-all hover:border-green-500;
}

.section {
@apply py-12 md:py-20;
}
.btn-primary {
@apply px-6 py-3 rounded-lg bg-primary hover:bg-primary-hover transition-all text-white font-medium;
}

.hover-lift {
@apply transition-transform duration-300;
}
.btn-secondary {
/* Improved border and hover state for secondary buttons */
@apply px-6 py-3 rounded-lg bg-dark-lighter hover:bg-zinc-800 transition-all text-white font-medium border border-zinc-600;
}

.section {
@apply py-12 md:py-20;
}

.hover-lift:hover {
transform: translateY(-5px);
.hover-lift {
@apply transition-transform duration-300;
}

.hover-lift:hover {
transform: translateY(-5px);
}
}

.radial-gradient-bg {
background: radial-gradient(circle at center, rgba(34, 197, 94, 0.15), transparent 50%);
}
/* Webkit Scrollbar Styling */

/* Webkit Scrollbar Styling - Keeping your custom branding */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-track {
background: #000; /* Optional: light background */
background: #000;
border-radius: 8px;
}

::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, #167a16, #171787); /* Green to blue */
background: linear-gradient(to bottom, #22c55e, #3b82f6); /* Slightly brighter green-to-blue */
border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
background: linear-gradient(to bottom, #167a16, #171787);
background: linear-gradient(to bottom, #16a34a, #2563eb);
}