fahed/marketing-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dark mode CSS variables and overrides
All checks were successful
Deploy / deploy (push) Successful in 11s
Details

Browse Source 
The ThemeContext was toggling the 'dark' class on <html> but the CSS
custom properties never changed. Added:
- .dark selector overriding all theme color variables
- .dark overrides for hardcoded bg-white, bg-gray-*, text-gray-*,
  border-gray-* classes used throughout components
- Dark mode input/select/textarea styling
- Dark mode scrollbar colors

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
fahed
2026-03-04 17:00:00 +03:00
parent 643d004dc7
commit f3c53e27aa
1 changed files with 47 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
client/src/index.css
View File

@@ -36,6 +36,53 @@
--color-status-cancelled: #dc2626; --color-status-cancelled: #dc2626;
} }
/* Dark mode overrides */
.dark {
--color-surface: #0f172a;
--color-surface-secondary: #1e293b;
--color-surface-tertiary: #334155;
--color-border: #334155;
--color-border-light: #1e293b;
--color-text-primary: #f1f5f9;
--color-text-secondary: #cbd5e1;
--color-text-tertiary: #64748b;
--color-sidebar: #020617;
--color-sidebar-hover: #0f172a;
--color-sidebar-active: #000000;
color-scheme: dark;
background-color: #0f172a;
color: #f1f5f9;
}
/* Override hardcoded bg-white in dark mode */
.dark .bg-white { background-color: #1e293b !important; }
.dark .bg-gray-50,
.dark .bg-gray-100 { background-color: #334155 !important; }
.dark .border-gray-200,
.dark .border-gray-300 { border-color: #334155 !important; }
.dark .text-gray-900 { color: #f1f5f9 !important; }
.dark .text-gray-700,
.dark .text-gray-600 { color: #cbd5e1 !important; }
.dark .text-gray-500,
.dark .text-gray-400 { color: #94a3b8 !important; }
/* Dark mode inputs and selects */
.dark input,
.dark select,
.dark textarea {
background-color: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
.dark input::placeholder,
.dark textarea::placeholder {
color: #64748b;
}
/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }
/* Custom scrollbar */ /* Custom scrollbar */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 6px;