/* * Dark Mode Overrides for SmartHelpdesk * * These rules override the hardcoded light-mode Tailwind utility classes * used across templates so the entire app responds to the .dark class on . * Toggled via the moon/sun button in the top navbar; preference stored in localStorage. */ /* Body and main layout */ html.dark body { background-color: #0f172a; color: #e2e8f0; } /* Top header bar */ html.dark header.bg-white { background-color: #1e293b; border-color: #334155; } /* Cards, panels, modals */ html.dark .bg-white { background-color: #1e293b; } /* Border colors */ html.dark .border-gray-200 { border-color: #334155; } html.dark .border-gray-100 { border-color: #1e293b; } html.dark .border-gray-300 { border-color: #475569; } /* Dividers */ html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #334155; } html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: #1e293b; } /* Text colors */ html.dark .text-gray-900 { color: #f1f5f9; } html.dark .text-gray-800 { color: #e2e8f0; } html.dark .text-gray-700 { color: #cbd5e1; } html.dark .text-gray-600 { color: #94a3b8; } html.dark .text-gray-500 { color: #94a3b8; } html.dark .text-gray-400 { color: #64748b; } /* Background tints */ html.dark .bg-gray-50 { background-color: #0f172a; } html.dark .bg-gray-100 { background-color: #334155; } html.dark .bg-gray-200 { background-color: #475569; } /* Form inputs */ html.dark input, html.dark select, html.dark textarea { background-color: #0f172a; color: #e2e8f0; border-color: #475569; } html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3); } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; } /* Select2 */ html.dark .select2-container--default .select2-selection--single { background-color: #0f172a !important; border-color: #475569 !important; } html.dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e2e8f0 !important; } html.dark .select2-dropdown { background-color: #1e293b !important; border-color: #475569 !important; } html.dark .select2-container--default .select2-results__option { color: #e2e8f0; } html.dark .select2-container--default .select2-results__option--selectable:hover { background-color: #334155; } html.dark .select2-search--dropdown .select2-search__field { background-color: #0f172a !important; border-color: #475569 !important; color: #e2e8f0 !important; } html.dark .select2-container--default .select2-selection--multiple { background-color: #0f172a !important; border-color: #475569 !important; } /* Badge/pill tints */ html.dark .bg-primary-50 { background-color: rgba(99, 102, 241, 0.15); } html.dark .bg-primary-100 { background-color: rgba(99, 102, 241, 0.2); } /* Status badge backgrounds */ html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.1); } html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1); } html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1); } html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1); } html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.1); } html.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.1); } html.dark .bg-cyan-50 { background-color: rgba(6, 182, 212, 0.1); } html.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.1); } html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.1); } /* Hover states */ html.dark .hover\:bg-gray-50:hover { background-color: #334155 !important; } html.dark .hover\:bg-gray-100:hover { background-color: #475569 !important; } html.dark .hover\:bg-gray-200:hover { background-color: #64748b !important; } /* Shadows */ html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); } html.dark .shadow-lg { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5); } html.dark .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); } /* Scrollbar */ html.dark .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); } /* Dropdowns */ html.dark #search-dropdown, html.dark #notif-dropdown, html.dark #tenant-dropdown { background-color: #1e293b; border-color: #334155; } /* Prose (article/comment content) */ html.dark .prose { color: #cbd5e1; } html.dark .prose h1, html.dark .prose h2, html.dark .prose h3, html.dark .prose h4, html.dark .prose h5, html.dark .prose h6 { color: #f1f5f9; } html.dark .prose a { color: #818cf8; } html.dark .prose strong { color: #f1f5f9; } html.dark .prose code { color: #e2e8f0; background-color: #334155; } html.dark .prose blockquote { color: #94a3b8; border-color: #475569; } html.dark .prose pre { background-color: #0f172a; } /* Tables */ html.dark table { border-color: #334155; } html.dark th, html.dark td { border-color: #334155; } html.dark thead { background-color: #0f172a; } html.dark tr:hover { background-color: rgba(51, 65, 85, 0.5); } /* Internal note amber tint */ html.dark .bg-amber-50\/60 { background-color: rgba(245, 158, 11, 0.08); } /* SSE toast overrides */ html.dark .sse-toast-enter { border-color: #475569; }