From f3c53e27aa1395361e83a68ba6b68f7594e708b8 Mon Sep 17 00:00:00 2001 From: fahed Date: Wed, 4 Mar 2026 17:00:00 +0300 Subject: [PATCH] fix: dark mode CSS variables and overrides The ThemeContext was toggling the 'dark' class on 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 --- client/src/index.css | 47 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/client/src/index.css b/client/src/index.css index c23ce18..ed8f1cc 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -36,6 +36,53 @@ --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 */ ::-webkit-scrollbar { width: 6px;