/* wp-automasites — dark mode overrides * * Strategy: keep all existing Tailwind utility classes in templates as-is. * When `` carries the `dark` class, remap the most common surface * utilities (slate, white, alert tints) to a coherent dark palette. * This avoids touching 30+ templates and keeps the toggle additive. */ :root { color-scheme: light; } html.dark { color-scheme: dark; background-color: #0b1220; } /* ----- body & generic surfaces ----- */ html.dark body { background-color: #0b1220 !important; color: #e2e8f0 !important; } html.dark .bg-white { background-color: #111a2e !important; } html.dark .bg-slate-50 { background-color: #0f172a !important; } html.dark .bg-slate-100 { background-color: #1e293b !important; } html.dark .bg-slate-200 { background-color: #334155 !important; } html.dark .bg-slate-300 { background-color: #475569 !important; } html.dark .text-slate-900 { color: #f1f5f9 !important; } html.dark .text-slate-800 { color: #e2e8f0 !important; } html.dark .text-slate-700 { color: #cbd5e1 !important; } html.dark .text-slate-600 { color: #94a3b8 !important; } html.dark .text-slate-500 { color: #94a3b8 !important; } html.dark .text-slate-400 { color: #64748b !important; } html.dark .border-slate-100 { border-color: #1e293b !important; } html.dark .border-slate-200 { border-color: #1e293b !important; } html.dark .border-slate-300 { border-color: #334155 !important; } html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #1e293b !important; } /* hover variants on the same classes */ html.dark .hover\:bg-slate-50:hover { background-color: #1e293b !important; } html.dark .hover\:bg-slate-100:hover { background-color: #334155 !important; } html.dark .hover\:border-slate-300:hover { border-color: #475569 !important; } html.dark .hover\:text-slate-700:hover { color: #cbd5e1 !important; } html.dark .hover\:text-slate-900:hover { color: #f1f5f9 !important; } /* ----- 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="tel"], html.dark select, html.dark textarea { background-color: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; } html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: #5b6ef0 !important; outline: none; } /* ----- alert tints (amber / rose / emerald / blue) ----- */ html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.10) !important; } html.dark .border-rose-200 { border-color: rgba(244, 63, 94, 0.35) !important; } html.dark .text-rose-700 { color: #fda4af !important; } html.dark .text-rose-800 { color: #fda4af !important; } html.dark .text-rose-900 { color: #fecdd3 !important; } html.dark .bg-rose-100 { background-color: rgba(244, 63, 94, 0.18) !important; } html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.10) !important; } html.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.35) !important; } html.dark .text-amber-700 { color: #fcd34d !important; } html.dark .text-amber-800 { color: #fcd34d !important; } html.dark .text-amber-900 { color: #fde68a !important; } html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.18) !important; } html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.10) !important; } html.dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.35) !important; } html.dark .text-emerald-700 { color: #6ee7b7 !important; } html.dark .text-emerald-800 { color: #6ee7b7 !important; } html.dark .text-emerald-900 { color: #a7f3d0 !important; } html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.18) !important; } html.dark .bg-emerald-200 { background-color: rgba(16, 185, 129, 0.28) !important; } html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.18) !important; } html.dark .text-blue-800 { color: #93c5fd !important; } /* ----- shadow tweaks (cards look better with stronger shadow on dark) ----- */ html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important; } html.dark .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4) !important; } /* ----- theme toggle button ----- */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline-block; } html.dark .theme-toggle .icon-sun { display: inline-block; } html.dark .theme-toggle .icon-moon { display: none; }