/** * CircleBar Dark Mode Overrides * Applied when has class "dark" */ /* ===== Base elements ===== */ html.dark { color-scheme: dark; } html.dark body { background-color: #111827; /* gray-900 */ color: #d1d5db; /* gray-300 */ } /* ===== Background overrides ===== */ html.dark .bg-white { background-color: #1f2937 !important; /* gray-800 */ } html.dark .bg-gray-50 { background-color: #111827 !important; /* gray-900 */ } html.dark .bg-gray-100 { background-color: #1f2937 !important; /* gray-800 */ } html.dark .bg-gray-200 { background-color: #374151 !important; /* gray-700 */ } html.dark .hover\:bg-gray-50:hover { background-color: #374151 !important; /* gray-700 */ } html.dark .hover\:bg-gray-100:hover { background-color: #374151 !important; /* gray-700 */ } html.dark .hover\:bg-gray-200:hover { background-color: #4b5563 !important; /* gray-600 */ } html.dark .hover\:bg-gray-300:hover { background-color: #4b5563 !important; /* gray-600 */ } /* ===== Text color overrides ===== */ html.dark .text-gray-900 { color: #f3f4f6 !important; /* gray-100 */ } html.dark .text-gray-800 { color: #e5e7eb !important; /* gray-200 */ } html.dark .text-gray-700 { color: #d1d5db !important; /* gray-300 */ } html.dark .text-gray-600 { color: #9ca3af !important; /* gray-400 */ } html.dark .text-gray-500 { color: #9ca3af !important; /* gray-400 */ } html.dark .text-gray-400 { color: #6b7280 !important; /* gray-500 */ } html.dark .hover\:text-gray-900:hover { color: #f9fafb !important; /* gray-50 */ } html.dark .hover\:text-gray-700:hover { color: #e5e7eb !important; /* gray-200 */ } html.dark .hover\:text-gray-600:hover { color: #d1d5db !important; /* gray-300 */ } /* ===== Border overrides ===== */ html.dark .border-gray-100 { border-color: #374151 !important; /* gray-700 */ } html.dark .border-gray-200 { border-color: #374151 !important; /* gray-700 */ } html.dark .border-gray-300 { border-color: #4b5563 !important; /* gray-600 */ } html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #374151 !important; /* gray-700 */ } html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #374151 !important; /* gray-700 */ } html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: #1f2937 !important; /* gray-800 */ } /* ===== Shadow adjustments ===== */ html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3) !important; } html.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.3) !important; } html.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.4), 0 8px 10px -6px rgba(0,0,0,0.3) !important; } /* ===== Navigation ===== */ html.dark nav.sticky { background-color: #1f2937 !important; /* gray-800 */ border-color: #374151 !important; /* gray-700 */ } /* ===== Form inputs ===== */ html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="password"], html.dark input[type="url"], html.dark input[type="number"], html.dark input[type="search"], html.dark input[type="date"], html.dark input[type="datetime-local"], html.dark textarea, html.dark select { background-color: #111827 !important; /* gray-900 */ border-color: #4b5563 !important; /* gray-600 */ color: #e5e7eb !important; /* gray-200 */ } html.dark input::placeholder, html.dark textarea::placeholder { color: #6b7280 !important; /* gray-500 */ } html.dark input:focus, html.dark textarea:focus, html.dark select:focus { border-color: #6366f1 !important; /* indigo-500 */ } html.dark .bg-gray-50[type], html.dark select.bg-gray-50 { background-color: #111827 !important; } /* ===== Cards & panels ===== */ html.dark .rounded-xl.border.border-gray-200, html.dark .bg-white.rounded-xl { background-color: #1f2937 !important; border-color: #374151 !important; } /* ===== Ring / focus ===== */ html.dark .ring-gray-200 { --tw-ring-color: #374151 !important; } html.dark .ring-gray-300 { --tw-ring-color: #4b5563 !important; } /* ===== Indigo tinted backgrounds ===== */ html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.1) !important; } html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.15) !important; } html.dark .bg-purple-50 { background-color: rgba(139, 92, 246, 0.1) !important; } html.dark .bg-green-50 { background-color: rgba(16, 185, 129, 0.1) !important; } html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; } html.dark .bg-yellow-50 { background-color: rgba(245, 158, 11, 0.1) !important; } html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1) !important; } html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1) !important; } html.dark .bg-pink-50 { background-color: rgba(236, 72, 153, 0.1) !important; } html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.1) !important; } html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.1) !important; } html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.15) !important; } html.dark .bg-cyan-50 { background-color: rgba(6, 182, 212, 0.1) !important; } html.dark .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.15) !important; } html.dark .bg-teal-50 { background-color: rgba(20, 184, 166, 0.1) !important; } html.dark .bg-teal-100 { background-color: rgba(20, 184, 166, 0.15) !important; } html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.1) !important; } html.dark .bg-rose-100 { background-color: rgba(244, 63, 94, 0.15) !important; } html.dark .bg-violet-100 { background-color: rgba(139, 92, 246, 0.15) !important; } html.dark .bg-sky-50 { background-color: rgba(14, 165, 233, 0.1) !important; } html.dark .bg-sky-100 { background-color: rgba(14, 165, 233, 0.15) !important; } /* Lift the saturation/brightness of small color-tinted icons so they stay readable on dark backgrounds (resource category icons etc.). */ html.dark .text-emerald-600 { color: #34d399 !important; } /* emerald-400 */ html.dark .text-emerald-500 { color: #34d399 !important; } html.dark .text-cyan-600 { color: #22d3ee !important; } /* cyan-400 */ html.dark .text-teal-600 { color: #2dd4bf !important; } /* teal-400 */ html.dark .text-rose-600 { color: #fb7185 !important; } /* rose-400 */ html.dark .text-sky-600 { color: #38bdf8 !important; } /* sky-400 */ html.dark .text-violet-600 { color: #a78bfa !important; } /* violet-400 */ html.dark .text-amber-600 { color: #fbbf24 !important; } /* amber-400 */ html.dark .text-orange-600 { color: #fb923c !important; } /* orange-400 */ html.dark .text-pink-600 { color: #f472b6 !important; } /* pink-400 */ html.dark .text-blue-600 { color: #60a5fa !important; } /* blue-400 */ html.dark .text-green-600 { color: #34d399 !important; } html.dark .text-red-600 { color: #f87171 !important; } /* red-400 */ html.dark .text-yellow-600 { color: #facc15 !important; } /* yellow-400 */ html.dark .text-purple-600 { color: #c084fc !important; } /* purple-400 */ /* "No" / placeholder icons render as text-gray-300; bump for dark BG. */ html.dark .text-gray-300 { color: #6b7280 !important; /* gray-500 */ } /* Zebra-striped table rows. Tailwind compiles odd:/even: to their own classes (e.g. .even\:bg-gray-100), so the plain .bg-gray-100 override above doesn't reach them. */ html.dark .odd\:bg-white:nth-child(odd) { background-color: #1f2937 !important; /* gray-800 */ } html.dark .even\:bg-gray-50:nth-child(even) { background-color: #111827 !important; /* gray-900 */ } html.dark .even\:bg-gray-100:nth-child(even) { background-color: #111827 !important; } html.dark .hover\:bg-indigo-50:hover { background-color: rgba(99, 102, 241, 0.15) !important; } /* Translucent surfaces (sticky footers, glass panels). The opacity variants compile to their own classes, so a plain .bg-white override does not match. */ html.dark .bg-white\/95 { background-color: rgba(31, 41, 55, 0.95) !important; /* gray-800 */ } html.dark .bg-white\/90 { background-color: rgba(31, 41, 55, 0.9) !important; } html.dark .bg-gray-50\/95 { background-color: rgba(17, 24, 39, 0.95) !important; /* gray-900 */ } html.dark .bg-gray-50\/50 { background-color: rgba(17, 24, 39, 0.5) !important; } /* Compare tool: the inline page CSS hardcodes #fff / #f3f4f6 for the zebra rows, which bypass utility-class overrides. Re-color them here. */ html.dark .compare-results-table tbody tr:nth-child(odd) { background-color: #1f2937 !important; /* gray-800 */ } html.dark .compare-results-table tbody tr:nth-child(even) { background-color: #111827 !important; /* gray-900 */ } html.dark .compare-results-table tbody tr:hover { background-color: rgba(99, 102, 241, 0.15) !important; } html.dark .compare-results-table thead { background-color: #111827 !important; } html.dark .compare-results-table th, html.dark .compare-results-table td { border-color: #374151 !important; } /* Indigo tinted text */ html.dark .text-indigo-900 { color: #c7d2fe !important; /* indigo-200 */ } html.dark .text-indigo-800 { color: #c7d2fe !important; } html.dark .text-indigo-700 { color: #a5b4fc !important; /* indigo-300 */ } /* ===== Footer — keep as-is (already dark) ===== */ html.dark footer.bg-gray-900 { background-color: #030712 !important; /* gray-950 */ border-color: #1f2937 !important; } html.dark footer .border-gray-800 { border-color: #1f2937 !important; } /* ===== Mobile bottom nav ===== */ html.dark #mobile-bottom-nav { background-color: #1f2937 !important; border-color: #374151 !important; } /* ===== Mobile sidebar ===== */ html.dark .mobile-sidebar-drawer { background-color: #1f2937 !important; } html.dark .mobile-sidebar-drawer .bg-white { background-color: #1f2937 !important; } /* ===== Dropdown menus ===== */ html.dark #user-dropdown-menu, html.dark #notif-dropdown-menu { background-color: #1f2937 !important; border-color: #374151 !important; } /* ===== Flash messages ===== */ html.dark .flash-message { border-color: #374151 !important; } /* ===== Tables ===== */ html.dark table thead { background-color: #111827 !important; } html.dark table th { color: #9ca3af !important; border-color: #374151 !important; } html.dark table td { border-color: #374151 !important; } html.dark table tbody tr:hover { background-color: #374151 !important; } /* ===== Code blocks ===== */ html.dark pre, html.dark code { background-color: #111827 !important; color: #e5e7eb !important; } /* ===== Gradient overlays ===== */ html.dark .from-indigo-50 { --tw-gradient-from: rgba(99, 102, 241, 0.1) !important; } html.dark .to-purple-50 { --tw-gradient-to: rgba(139, 92, 246, 0.1) !important; } /* ===== Breadcrumbs ===== */ html.dark .text-gray-500.mb-4 a { color: #9ca3af; } html.dark .text-gray-500.mb-4 a:hover { color: #f3f4f6; } /* ===== AI content ===== */ html.dark .ai-content h2 { color: #f3f4f6 !important; } html.dark .ai-content h3 { color: #e5e7eb !important; } html.dark .ai-content strong { color: #d1d5db !important; } /* ===== Scrollbar ===== */ html.dark ::-webkit-scrollbar { width: 8px; } html.dark ::-webkit-scrollbar-track { background: #1f2937; } html.dark ::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #6b7280; } /* ===== Selection ===== */ html.dark ::selection { background-color: rgba(99, 102, 241, 0.3); color: #f3f4f6; } /* ===== Search results dropdown ===== */ html.dark #nav-search-results { background-color: #1f2937 !important; border-color: #374151 !important; } /* ===== Toast notifications ===== */ html.dark #achievement-toast-container > div { background-color: #1f2937 !important; border-color: #374151 !important; } /* ===== Secondary buttons ===== */ html.dark .bg-gray-200.hover\:bg-gray-300 { background-color: #374151 !important; color: #e5e7eb !important; } html.dark .bg-gray-200.hover\:bg-gray-300:hover { background-color: #4b5563 !important; } /* ===== Select arrow for dark mode ===== */ html.dark select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M2.22 4.47a.75.75 0 0 1 1.06 0L6 7.19l2.72-2.72a.75.75 0 0 1 1.06 1.06L6.53 8.78a.75.75 0 0 1-1.06 0L2.22 5.53a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") !important; } /* ===== Article / guide content ===== */ html.dark .article-content { color: #d1d5db; /* gray-300 */ } html.dark .article-content h1, html.dark .article-content h2, html.dark .article-content h3, html.dark .article-content h4 { color: #f3f4f6; /* gray-100 */ } html.dark .article-content h2 { border-bottom-color: #374151; /* gray-700 */ } html.dark .article-content h5 { color: #d1d5db; } html.dark .article-content h6 { color: #9ca3af; } html.dark .article-content strong { color: #f3f4f6; } html.dark .article-content a { color: #818cf8; /* indigo-400 */ } html.dark .article-content a:hover { color: #a5b4fc; /* indigo-300 */ } html.dark .article-content blockquote { background: #111827; /* gray-900 */ color: #d1d5db; border-left-color: #818cf8; } html.dark .article-content code { background: #111827; color: #e5e7eb; } html.dark .article-content pre { background: #111827; color: #e5e7eb; } html.dark .article-content img { border-color: #374151; } html.dark .article-content th { background: #111827; color: #f3f4f6; border-color: #374151; } html.dark .article-content td { border-color: #374151; } html.dark .article-content hr { background-image: linear-gradient(to right, rgba(55, 65, 81, 0), rgb(55, 65, 81), rgba(55, 65, 81, 0)); } html.dark .article-content figcaption { color: #9ca3af; } /* ===== Checkbox styling ===== */ html.dark input[type="checkbox"] { background-color: #111827 !important; border-color: #4b5563 !important; } /* ===== Right sidebar ===== */ html.dark #right-sidebar { background-color: #1f2937; /* gray-800 */ border-left-color: #374151; /* gray-700 */ } html.dark .sidebar-tabs { border-bottom-color: #374151; } html.dark .sidebar-tab { color: #6b7280; /* gray-500 */ } html.dark .sidebar-tab.active { color: #818cf8; /* indigo-400 */ border-bottom-color: #818cf8; } html.dark .sidebar-tab:hover:not(.active) { color: #9ca3af; } html.dark .sidebar-tab-content::-webkit-scrollbar-thumb { background: #4b5563; } html.dark #sidebar-online-count { color: #6b7280; } html.dark .sidebar-section { border-bottom-color: #374151; } html.dark .sidebar-section-toggle { color: #9ca3af; } html.dark .sidebar-section-toggle:hover { background: #374151; color: #e5e7eb; } html.dark .sidebar-user:hover { background: #374151; } html.dark .sidebar-user .su-name { color: #d1d5db; /* gray-300 */ } html.dark .sidebar-user .online-dot { border-color: #1f2937; /* match sidebar bg */ } html.dark #sidebar-collapse-btn { background-color: #1f2937; border-color: #374151; color: #6b7280; } /* ===== Profile page dark mode ===== */ html.dark .profile-display-name { color: #f3f4f6; } html.dark .profile-glass { background: rgba(17, 24, 39, 0.6); border-color: rgba(75, 85, 99, 0.4); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); } html.dark .profile-badge-admin { color: #f87171; border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.1); } html.dark .profile-badge-mod { color: #4ade80; border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.1); } html.dark .profile-badge-verified { color: #34d399; border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.1); } html.dark .profile-badge-rep { color: #60a5fa; border-color: rgba(96, 165, 250, 0.4); background: rgba(96, 165, 250, 0.1); } html.dark .profile-badge-online { color: #4ade80; border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.1); }