/* * Dark Mode Overrides — Website Publik * * Catatan teknis: build Tailwind precompiled di public/build/ TIDAK * mengandung varian `dark:` (project belum konfigurasi darkMode: 'class' * dan tidak bisa rebuild di server karena tanpa Node.js). File ini * menyediakan override manual untuk utility class yang umum dipakai, * di-scope ke selector `html.dark`. * * Aktivasi: layout `resources/views/layouts/publik.blade.php` menambahkan * `class="dark"` ke via inline script (no-FOUC) berdasarkan * preferensi user di localStorage, fallback ke prefers-color-scheme OS. * * Opt-out per elemen: tambahkan class `dark-keep-light` pada elemen yang * tetap ingin tampil terang (mis. kop surat cetak, badge brand). */ html.dark { color-scheme: dark; } /* ===== Page shell ===== */ html.dark body { background-color: #020617; color: #e2e8f0; } /* ===== Surface backgrounds ===== */ html.dark .bg-white { background-color: #0f172a !important; } html.dark .bg-slate-50 { background-color: #020617 !important; } html.dark .bg-slate-100 { background-color: #1e293b !important; } html.dark .bg-slate-200 { background-color: #334155 !important; } /* Opacity-suffixed variants (sering muncul di project ini) */ html.dark .bg-white\/5 { background-color: rgba(255,255,255,0.04) !important; } html.dark .bg-white\/10 { background-color: rgba(255,255,255,0.06) !important; } /* Card/surface elevations */ html.dark .bg-blue-50 { background-color: rgba(30,58,138,0.18) !important; } html.dark .bg-blue-100 { background-color: rgba(30,58,138,0.25) !important; } html.dark .bg-yellow-50 { background-color: rgba(202,138,4,0.12) !important; } html.dark .bg-green-50 { background-color: rgba(22,101,52,0.18) !important; } html.dark .bg-red-50 { background-color: rgba(153,27,27,0.18) !important; } /* ===== Gradient softening ===== */ html.dark .from-slate-50 { --tw-gradient-from: #0f172a !important; } html.dark .to-slate-100 { --tw-gradient-to: #1e293b !important; } html.dark .from-white { --tw-gradient-from: #0f172a !important; } html.dark .to-white { --tw-gradient-to: #0f172a !important; } /* ===== Text colors ===== */ 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 .text-blue-900 { color: #93c5fd !important; } html.dark .text-blue-800 { color: #93c5fd !important; } html.dark .text-blue-700 { color: #60a5fa !important; } /* gray-* = padanan slate-*, banyak dipakai di halaman profil/publik */ html.dark .text-gray-900 { color: #f1f5f9 !important; } html.dark .text-gray-800 { color: #e2e8f0 !important; } html.dark .text-gray-700 { color: #cbd5e1 !important; } html.dark .text-gray-600 { color: #94a3b8 !important; } html.dark .text-gray-500 { color: #94a3b8 !important; } html.dark .text-gray-400 { color: #64748b !important; } /* bg-gray-* */ html.dark .bg-gray-50 { background-color: rgba(30,41,59,0.35) !important; } html.dark .bg-gray-100 { background-color: #1e293b !important; } html.dark .bg-gray-200 { background-color: #334155 !important; } html.dark .bg-gray-800 { background-color: #0f172a !important; } html.dark .bg-gray-900 { background-color: #020617 !important; } /* border-gray-* */ html.dark .border-gray-100 { border-color: rgba(51,65,85,0.45) !important; } html.dark .border-gray-200 { border-color: rgba(51,65,85,0.55) !important; } html.dark .border-gray-700 { border-color: rgba(51,65,85,0.70) !important; } /* Catatan: text-white, text-yellow-*, text-blue-200/300/400 sengaja TIDAK dioverride — biasanya dipakai pada header/footer biru/yellow accent yang sudah cocok untuk dark. */ /* ===== Borders ===== */ html.dark .border-slate-100 { border-color: rgba(51,65,85,0.45) !important; } html.dark .border-slate-200 { border-color: rgba(51,65,85,0.55) !important; } html.dark .border-slate-300 { border-color: rgba(51,65,85,0.70) !important; } html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(51,65,85,0.40) !important; } html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(51,65,85,0.55) !important; } /* Opacity-suffix borders */ html.dark .border-slate-200\/80 { border-color: rgba(51,65,85,0.55) !important; } /* ===== Form controls ===== */ html.dark input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), html.dark textarea, html.dark select { background-color: #1e293b; color: #f1f5f9; border-color: rgba(51,65,85,0.70); } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; } /* ===== Hover utilities ===== */ 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\:bg-blue-50:hover { background-color: rgba(30,58,138,0.30) !important; } /* ===== Shadow softening (shadow + dark page = barely visible; bump opacity) ===== */ html.dark .shadow, html.dark .shadow-sm, html.dark .shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; } html.dark .shadow-lg, html.dark .shadow-xl, html.dark .shadow-2xl { box-shadow: 0 10px 30px rgba(0,0,0,0.55) !important; } /* ===== Ring (Tailwind ring utility) ===== */ html.dark .ring-1, html.dark .ring { box-shadow: 0 0 0 1px rgba(51,65,85,0.7) !important; } /* ===== Tabel ===== */ html.dark table thead { background-color: #1e293b; } html.dark table tbody tr { border-color: rgba(51,65,85,0.45); } html.dark table tbody tr:nth-child(even) { background-color: rgba(30,41,59,0.35); } /* ===== Prose (artikel berita/konten panjang) ===== */ html.dark .prose { color: #cbd5e1; } html.dark .prose h1, html.dark .prose h2, html.dark .prose h3, html.dark .prose h4, html.dark .prose strong { color: #f1f5f9; } html.dark .prose a { color: #93c5fd; } html.dark .prose blockquote { color: #94a3b8; border-color: rgba(51,65,85,0.7); } html.dark .prose code, html.dark .prose pre { background-color: #1e293b; color: #f1f5f9; } html.dark .prose hr { border-color: rgba(51,65,85,0.6); } /* ===== Opt-out: elemen yang TIDAK ingin di-darkify ===== */ html.dark .dark-keep-light, html.dark .dark-keep-light * { background-color: #ffffff !important; color: #1f2937 !important; border-color: #e5e7eb !important; } /* Img/photo containers — biarkan apa adanya */ html.dark img { opacity: 1; } /* ===== Smooth transition saat ganti tema ===== */ html.dark body, html.dark body * { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }