/* ========================================================= Dark Mode - Panel Admin (template Berry, light-only build) ========================================================= */ [data-theme="dark"] { --pc-heading-color: #d7dcec; --pc-header-background: #161d2e; --pc-header-color: #c8cfdd; --pc-header-shadow: none; --pc-sidebar-background: #121826; --pc-sidebar-color: #a3adc2; --pc-sidebar-border: rgba(255, 255, 255, 0.06); --pc-sidebar-shadow: none; --pc-sidebar-caption-color: #6b7688; --pc-card-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --pc-sidebar-active-color: #4099ff; /* Override variabel Bootstrap yang didefinisikan ulang Berry di :root */ --bs-body-color: #c8cfdd; --bs-body-bg: #0f1523; --bs-heading-color: #d7dcec; --bs-secondary-color: #9aa5b8; --bs-border-color: rgba(255, 255, 255, 0.1); --bs-card-color: #c8cfdd; --bs-card-bg: #161d2e; --bs-card-border-color: rgba(255, 255, 255, 0.06); --bs-table-color: #c8cfdd; --bs-table-bg: transparent; --bs-table-striped-color: #c8cfdd; --bs-table-striped-bg: rgba(255, 255, 255, 0.02); --bs-table-hover-color: #e5e9f2; --bs-table-hover-bg: rgba(255, 255, 255, 0.04); --bs-dropdown-color: #c8cfdd; --bs-dropdown-bg: #161d2e; --bs-dropdown-link-color: #c8cfdd; --bs-dropdown-link-hover-color: #ffffff; --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.06); --bs-dropdown-border-color: rgba(255, 255, 255, 0.08); --bs-modal-color: #c8cfdd; --bs-modal-bg: #161d2e; --bs-pagination-color: #c8cfdd; --bs-pagination-bg: #161d2e; --bs-pagination-border-color: rgba(255, 255, 255, 0.08); --bs-pagination-hover-color: #ffffff; --bs-pagination-hover-bg: #1d2739; --bs-pagination-hover-border-color: rgba(255, 255, 255, 0.12); --bs-pagination-disabled-color: #6b7688; --bs-pagination-disabled-bg: #161d2e; --bs-pagination-disabled-border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] body, [data-theme="dark"] .pc-container { background: #0f1523; color: #c8cfdd; } /* Override variabel pada body: preset Berry mendeklarasikan ulang --bs-body-bg dkk di elemen body sehingga mengalahkan nilai di */ [data-theme="dark"] body { --bs-body-bg: #0f1523; --bs-body-color: #c8cfdd; color-scheme: dark; } [data-theme="dark"] .pc-content { color: #c8cfdd; } /* Kartu */ [data-theme="dark"] .card { background: #161d2e; border-color: rgba(255, 255, 255, 0.06); color: #c8cfdd; } [data-theme="dark"] .card-header { background: #161d2e; border-bottom-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .card-footer { background: #161d2e; border-top-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .card-header h5, [data-theme="dark"] .card-header h6, [data-theme="dark"] .card-body { color: #d7dcec; } /* Tabel */ /* Penting: Bootstrap mendeklarasikan ulang --bs-table-* DI ELEMEN .table dengan nilai literal #212529 sehingga override di tidak berlaku. Harus dioverride di .table itu sendiri. */ [data-theme="dark"] .table { --bs-table-color: #c8cfdd; --bs-table-striped-color: #c8cfdd; --bs-table-striped-bg: rgba(255, 255, 255, 0.02); --bs-table-hover-color: #e5e9f2; --bs-table-hover-bg: rgba(255, 255, 255, 0.04); --bs-table-active-color: #c8cfdd; --bs-table-active-bg: rgba(255, 255, 255, 0.04); --bs-table-bg: transparent; color: #c8cfdd; } [data-theme="dark"] .table td, [data-theme="dark"] .table th { color: #c8cfdd; } [data-theme="dark"] .table thead th, [data-theme="dark"] .table thead td { background: #121826; border-color: rgba(255, 255, 255, 0.06); color: #d7dcec; } [data-theme="dark"] .table td, [data-theme="dark"] .table th { border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.04); color: #e5e9f2; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02); color: #c8cfdd; } /* Form */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: #111827; border-color: rgba(255, 255, 255, 0.1); color: #e5e7eb; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: #111827; color: #e5e7eb; } [data-theme="dark"] .form-control::placeholder { color: #6b7688; } [data-theme="dark"] .form-label, [data-theme="dark"] .form-text { color: #9aa5b8; } [data-theme="dark"] .input-group-text { background: #1d2739; border-color: rgba(255, 255, 255, 0.1); color: #9aa5b8; } /* Dropdown */ [data-theme="dark"] .dropdown-menu { background: #161d2e; border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .dropdown-item { color: #c8cfdd; } [data-theme="dark"] .dropdown-item:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; } [data-theme="dark"] .dropdown-divider { border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .dropdown-header { color: #9aa5b8; } /* Teks & badge */ [data-theme="dark"] .text-muted { color: #9aa5b8 !important; } [data-theme="dark"] .text-secondary { color: #9aa5b8 !important; } [data-theme="dark"] .bg-light { background-color: #1d2739 !important; color: #c8cfdd !important; } [data-theme="dark"] code { color: #fca5a5; background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .btn-link { color: #a5b4fc; } [data-theme="dark"] .btn-outline-secondary { border-color: #4b5563; color: #c8cfdd; } [data-theme="dark"] .btn-outline-secondary:hover { background: #1d2739; color: #ffffff; } /* Header topbar */ [data-theme="dark"] .pc-header { background: var(--pc-header-background); } [data-theme="dark"] .pc-header .pc-head-link { color: #c8cfdd; } /* Pil topbar (head-link-primary/secondary) - teks terang di pil gelap */ [data-theme="dark"] .pc-header .pc-head-link.head-link-primary { background: rgba(38, 137, 226, 0.15); color: #8ec9f0; } [data-theme="dark"] .pc-header .pc-head-link.head-link-primary > i { color: #8ec9f0; } [data-theme="dark"] .pc-header .pc-head-link.head-link-primary:hover { background: rgba(38, 137, 226, 0.28); color: #ffffff; } [data-theme="dark"] .pc-header .pc-head-link.head-link-primary:hover > i { color: #ffffff; } [data-theme="dark"] .pc-header .pc-head-link.head-link-secondary { background: rgba(102, 16, 242, 0.15); color: #b39bfc; } [data-theme="dark"] .pc-header .pc-head-link.head-link-secondary > i { color: #b39bfc; } [data-theme="dark"] .pc-header .pc-head-link.head-link-secondary:hover { background: rgba(102, 16, 242, 0.28); color: #ffffff; } [data-theme="dark"] .pc-header .pc-head-link.head-link-secondary:hover > i { color: #ffffff; } /* Tombol toggle di topbar admin */ .pc-header .theme-toggle-btn { background: rgba(64, 79, 98, 0.08); color: #3f4f62; margin-left: 0; margin-right: 24px; } .pc-header .theme-toggle-btn:hover { background: rgba(64, 79, 98, 0.15); } [data-theme="dark"] .pc-header .theme-toggle-btn { background: rgba(255, 255, 255, 0.08); color: #c8cfdd; } /* Tombol toggle di halaman login & halaman lain dengan latar terang */ .auth-main .theme-toggle-btn, .theme-toggle-btn.fixed-corner { background: rgba(64, 79, 98, 0.08); color: #3f4f62; margin-left: 0; } .auth-main .theme-toggle-btn:hover, .theme-toggle-btn.fixed-corner:hover { background: rgba(64, 79, 98, 0.15); } [data-theme="dark"] .auth-main .theme-toggle-btn, [data-theme="dark"] .theme-toggle-btn.fixed-corner { background: rgba(255, 255, 255, 0.08); color: #c8cfdd; } /* Pagination DataTables */ [data-theme="dark"] .page-item .page-link { background: #161d2e; border-color: rgba(255, 255, 255, 0.08); color: #c8cfdd; } [data-theme="dark"] .page-item.active .page-link { background: var(--pc-sidebar-active-color, #4099ff); border-color: transparent; color: #ffffff; } [data-theme="dark"] .page-item.disabled .page-link { background: #161d2e; color: #6b7688; } /* SweetAlert2 */ [data-theme="dark"] .swal2-popup { background: #161d2e !important; color: #c8cfdd; } [data-theme="dark"] .swal2-title { color: #e5e7eb !important; } [data-theme="dark"] .swal2-html-container { color: #9aa5b8 !important; } /* Modal */ [data-theme="dark"] .modal-content { background: #161d2e; color: #c8cfdd; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: rgba(255, 255, 255, 0.08); } /* Preloader */ [data-theme="dark"] .loader-bg { background: #0f1523; } /* Kartu tinted dashboard */ [data-theme="dark"] .card.bg-light-primary { background: rgba(38, 137, 226, 0.12); border-color: rgba(38, 137, 226, 0.25); color: #8ec9f0; } [data-theme="dark"] .card.bg-light-success { background: rgba(0, 200, 83, 0.12); border-color: rgba(0, 200, 83, 0.25); color: #7de3a8; } [data-theme="dark"] .card.bg-light-info { background: rgba(62, 201, 214, 0.12); border-color: rgba(62, 201, 214, 0.25); color: #8ee4ea; } [data-theme="dark"] .card.bg-light-warning { background: rgba(255, 193, 7, 0.12); border-color: rgba(255, 193, 7, 0.25); color: #ffd666; } /* Halaman login */ [data-theme="dark"] .auth-main, [data-theme="dark"] .auth-main .auth-wrapper { background: #0f1523; } [data-theme="dark"] .auth-main .auth-wrapper .auth-form { background: #0f1523; } [data-theme="dark"] .auth-main .auth-wrapper .saprator:after { background: rgba(255, 255, 255, 0.1); } [data-theme="dark"] .auth-main .auth-wrapper .saprator span { background: #161d2e; color: #c8cfdd; outline-color: rgba(255, 255, 255, 0.1); } /* Tombol close modal agar terlihat di latar gelap */ [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%); } /* Keterangan grup sidebar */ [data-theme="dark"] .pc-sidebar .pc-caption span:not(.badge) { color: #9aa5b8; } /* Breadcrumb/page-header (mis. manage_admins.php) */ [data-theme="dark"] .page-header { background: #161d2e; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: none; } [data-theme="dark"] .page-header h5, [data-theme="dark"] .page-header .h5 { color: #d7dcec; } /* Opsi native select */ [data-theme="dark"] select option { background: #111827; color: #e5e7eb; } /* Label & info DataTables */ [data-theme="dark"] div.dataTables_wrapper label, [data-theme="dark"] div.dataTables_wrapper .dataTables_info, [data-theme="dark"] div.dataTables_wrapper .dataTables_length, [data-theme="dark"] div.dataTables_wrapper .dataTables_filter, [data-theme="dark"] div.dataTables_wrapper .dataTables_paginate { color: #c8cfdd; } /* Checkbox & label form */ [data-theme="dark"] .form-check-label { color: #c8cfdd; } /* Form floating (halaman login) */ [data-theme="dark"] .form-floating > label { color: #9aa5b8; } [data-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label::after, [data-theme="dark"] .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after, [data-theme="dark"] .form-floating > .form-select ~ label::after { background: #111827; }