/*-------------------------------------------------------------- # Dark Mode Overrides # Applies when is set. # Bootstrap 5.3 handles its own components; these rules cover # NiceAdmin's hardcoded colors that Bootstrap doesn't touch. --------------------------------------------------------------*/ /* General */ [data-bs-theme="dark"] body { background: #0f1117; color: #c8cdd6; } [data-bs-theme="dark"] a { color: #818cf8; } [data-bs-theme="dark"] a:hover { color: #a5b4fc; } /* Page Title */ [data-bs-theme="dark"] .pagetitle h1 { color: #e2e8f0; } /* Breadcrumb */ [data-bs-theme="dark"] .breadcrumb a { color: #6c7a96; } [data-bs-theme="dark"] .breadcrumb a:hover { color: #a0aec0; } [data-bs-theme="dark"] .breadcrumb .breadcrumb-item::before { color: #6c7a96; } [data-bs-theme="dark"] .breadcrumb .active { color: #a0aec0; } /* Card */ [data-bs-theme="dark"] .card { background: #1c1c2e; border-color: #2d3748; box-shadow: 0px 0 30px rgba(0, 0, 0, 0.4); color: #c8cdd6; } [data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .card-footer { border-color: #2d3748; background-color: #161a28; color: #a0aec0; } [data-bs-theme="dark"] .card-title { color: #e2e8f0; } [data-bs-theme="dark"] .card-title span { color: #a0aec0; } [data-bs-theme="dark"] .card-body { color: #c8cdd6; } [data-bs-theme="dark"] .card-img-overlay { background-color: rgba(0, 0, 0, 0.6); } /* Accordion */ [data-bs-theme="dark"] .accordion-item { border-color: #2d3748; } [data-bs-theme="dark"] .accordion-button:not(.collapsed) { color: #e2e8f0; background-color: #1e2235; } [data-bs-theme="dark"] .accordion-flush .accordion-body { color: #a0aec0; } /* Bordered Tabs */ [data-bs-theme="dark"] .nav-tabs-bordered { border-bottom-color: #2d3748; } [data-bs-theme="dark"] .nav-tabs-bordered .nav-link { color: #a0aec0; } [data-bs-theme="dark"] .nav-tabs-bordered .nav-link:hover, [data-bs-theme="dark"] .nav-tabs-bordered .nav-link:focus { color: #818cf8; } [data-bs-theme="dark"] .nav-tabs-bordered .nav-link.active { background-color: #1c1c2e; color: #818cf8; border-bottom-color: #818cf8; } /* Dropdown */ [data-bs-theme="dark"] .dropdown-menu .dropdown-footer a { color: #c8cdd6; } [data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover { background-color: #1e2235; } [data-bs-theme="dark"] .dropdown-menu-arrow::before { background: #1c1c2e; border-color: #2d3748; } /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ [data-bs-theme="dark"] .header { background-color: #1c1c2e; box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.4); } [data-bs-theme="dark"] .logo span { color: #e2e8f0; } [data-bs-theme="dark"] .header .toggle-sidebar-btn { color: #a0aec0; } [data-bs-theme="dark"] .header .search-bar { background: #1c1c2e; } [data-bs-theme="dark"] .header .search-form input { color: #c8cdd6; border-color: rgba(255, 255, 255, 0.1); background-color: #0f1117; } [data-bs-theme="dark"] .header .search-form input:focus, [data-bs-theme="dark"] .header .search-form input:hover { border-color: rgba(129, 140, 248, 0.4); box-shadow: 0 0 10px 0 rgba(129, 140, 248, 0.15); } [data-bs-theme="dark"] .header .search-form button i { color: #a0aec0; } /*-------------------------------------------------------------- # Header Nav --------------------------------------------------------------*/ [data-bs-theme="dark"] .header-nav .nav-icon { color: #a0aec0; } [data-bs-theme="dark"] .header-nav .nav-profile { color: #c8cdd6; } [data-bs-theme="dark"] .header-nav .notifications .notification-item:hover { background-color: #1e2235; } [data-bs-theme="dark"] .header-nav .notifications .notification-item p { color: #6c7a96; } [data-bs-theme="dark"] .header-nav .messages .message-item h4 { color: #c8cdd6; } [data-bs-theme="dark"] .header-nav .messages .message-item p { color: #6c7a96; } [data-bs-theme="dark"] .header-nav .messages .message-item:hover { background-color: #1e2235; } [data-bs-theme="dark"] .header-nav .profile .dropdown-header h6 { color: #c8cdd6; } [data-bs-theme="dark"] .header-nav .profile .dropdown-item:hover { background-color: #1e2235; } [data-bs-theme="dark"] .nav-profile img { filter: invert(1) hue-rotate(180deg) brightness(1.2); } /*-------------------------------------------------------------- # Sidebar --------------------------------------------------------------*/ [data-bs-theme="dark"] .sidebar { background-color: #1c1c2e; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4); scrollbar-color: #2d3748 transparent; } [data-bs-theme="dark"] .sidebar::-webkit-scrollbar { background-color: #1c1c2e; } [data-bs-theme="dark"] .sidebar::-webkit-scrollbar-thumb { background-color: #2d3748; } [data-bs-theme="dark"] .sidebar-nav .nav-heading { color: #4a5568; } [data-bs-theme="dark"] .sidebar-nav .nav-link { color: #818cf8; background: #1e2235; } [data-bs-theme="dark"] .sidebar-nav .nav-link i { color: #818cf8; } [data-bs-theme="dark"] .sidebar-nav .nav-link.collapsed { color: #c8cdd6; background: #1c1c2e; } [data-bs-theme="dark"] .sidebar-nav .nav-link.collapsed i { color: #6c7a96; } [data-bs-theme="dark"] .sidebar-nav .nav-link:hover { color: #818cf8; background: #1e2235; } [data-bs-theme="dark"] .sidebar-nav .nav-link:hover i { color: #818cf8; } [data-bs-theme="dark"] .sidebar-nav .nav-content a { color: #a0aec0; } [data-bs-theme="dark"] .sidebar-nav .nav-content a:hover, [data-bs-theme="dark"] .sidebar-nav .nav-content a.active { color: #818cf8; } [data-bs-theme="dark"] .sidebar-nav .nav-content a.active i { background-color: #818cf8; } /*-------------------------------------------------------------- # Dashboard --------------------------------------------------------------*/ [data-bs-theme="dark"] .dashboard .info-card h6 { color: #e2e8f0; } [data-bs-theme="dark"] .dashboard .info-card { color: #c8cdd6; } [data-bs-theme="dark"] .dashboard .filter .icon { color: #a0aec0; } [data-bs-theme="dark"] .dashboard .filter .dropdown-header h6 { color: #6c7a96; } [data-bs-theme="dark"] .dashboard .sales-card .card-icon { background: #1e2235; } [data-bs-theme="dark"] .dashboard .revenue-card .card-icon { background: #1a2e22; } [data-bs-theme="dark"] .dashboard .customers-card .card-icon { background: #2e1f10; } [data-bs-theme="dark"] .dashboard .recent-sales .table thead, [data-bs-theme="dark"] .dashboard .top-selling .table thead { background: #16213e; } [data-bs-theme="dark"] .dashboard .news h4 a { color: #e2e8f0; } [data-bs-theme="dark"] .dashboard .news p { color: #6c7a96; } [data-bs-theme="dark"] .dashboard .activity .activity-item .activite-label { color: #6c7a96; } [data-bs-theme="dark"] .dashboard .activity .activity-item .activite-label::before { background-color: #2d3748; } [data-bs-theme="dark"] .dashboard .activity .activity-item .activity-badge { border-color: #1c1c2e; } /*-------------------------------------------------------------- # Icons List --------------------------------------------------------------*/ [data-bs-theme="dark"] .iconslist .icon { background-color: #1c1c2e; color: #e2e8f0; } [data-bs-theme="dark"] .iconslist .label { color: #6c7a96; } /*-------------------------------------------------------------- # Profile Page --------------------------------------------------------------*/ [data-bs-theme="dark"] .profile .profile-card h2 { color: #e2e8f0; } [data-bs-theme="dark"] .profile .profile-card .social-links a { color: rgba(160, 174, 192, 0.5); } [data-bs-theme="dark"] .profile .profile-card .social-links a:hover { color: #e2e8f0; } [data-bs-theme="dark"] .profile .profile-overview .card-title { color: #e2e8f0; } [data-bs-theme="dark"] .profile .profile-overview .label { color: rgba(160, 174, 192, 0.7); } [data-bs-theme="dark"] .profile .profile-edit label { color: rgba(160, 174, 192, 0.7); } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ [data-bs-theme="dark"] .footer { border-top-color: #2d3748; } [data-bs-theme="dark"] .footer .copyright, [data-bs-theme="dark"] .footer .credits { color: #a0aec0; } /*-------------------------------------------------------------- # Dark Mode Toggle Button --------------------------------------------------------------*/ #dark-mode-toggle i { font-size: 20px; } /*-------------------------------------------------------------- # Dashboard Bencana (Inline CSS Variables Override) --------------------------------------------------------------*/ [data-bs-theme="dark"] { --glass-bg: rgba(28, 28, 46, 0.95); --glass-border: rgba(5, 150, 105, 0.15); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } [data-bs-theme="dark"] body { background: #0f1117; } [data-bs-theme="dark"] .kpi-info h6 { color: #a0aec0; } [data-bs-theme="dark"] .kpi-info h2 { color: #e2e8f0; } [data-bs-theme="dark"] .kpi-info p { color: #6c7a96; } [data-bs-theme="dark"] .filter-btn { background: #1c1c2e; color: #c8cdd6; border-color: #2d3748; } [data-bs-theme="dark"] .glass-card { color: #c8cdd6; } [data-bs-theme="dark"] .dashboard-container { color: #c8cdd6; } /*-------------------------------------------------------------- # Frontend (layouta) — Navbar --------------------------------------------------------------*/ [data-bs-theme="dark"] .modern-navbar.scrolled { background-color: rgba(15, 17, 23, 0.95); border-bottom-color: rgba(45, 55, 72, 0.8); } [data-bs-theme="dark"] .modern-navbar.scrolled .brand-text { color: #e2e8f0; } [data-bs-theme="dark"] .modern-navbar.scrolled .nav-link-modern { color: #c8cdd6; } [data-bs-theme="dark"] .modern-navbar.scrolled .nav-link-modern:hover, [data-bs-theme="dark"] .modern-navbar.scrolled .nav-link-modern.active { color: #34d399; } [data-bs-theme="dark"] .modern-navbar.scrolled .mobile-toggle { color: #e2e8f0; } [data-bs-theme="dark"] .modern-navbar.scrolled .lang-switcher { background: #1e2235; border-color: #2d3748; } [data-bs-theme="dark"] .modern-navbar.scrolled .lang-btn { color: #a0aec0; } /* Moon icon: green in light mode */ .modern-navbar.scrolled #dark-mode-toggle-frontend, .modern-navbar.scrolled #dark-mode-toggle-mobile { color: #059669; } .modern-navbar.transparent #dark-mode-toggle-frontend { color: #ffffff; } /* Sun icon: white in dark mode */ [data-bs-theme="dark"] #dark-mode-toggle-frontend, [data-bs-theme="dark"] #dark-mode-toggle-mobile, [data-bs-theme="dark"] #dark-mode-toggle { color: #ffffff; } [data-bs-theme="dark"] .mobile-menu { background-color: rgba(15, 17, 23, 0.98); } [data-bs-theme="dark"] .mobile-nav-link { color: #e2e8f0; border-bottom-color: #1e2235; } [data-bs-theme="dark"] .mobile-nav-link:hover, [data-bs-theme="dark"] .mobile-nav-link.active { color: #34d399; } [data-bs-theme="dark"] .mobile-lang-wrap .lang-switcher { background: #1e2235; border-color: #2d3748; } [data-bs-theme="dark"] .mobile-lang-wrap .lang-btn { color: #a0aec0; } /*-------------------------------------------------------------- # Frontend (layouta) — Content Elements --------------------------------------------------------------*/ [data-bs-theme="dark"] .feature .feature-item { background: #1c1c2e; } [data-bs-theme="dark"] .blog .blog-item { background: #1c1c2e; } [data-bs-theme="dark"] .team .team-item { background: #1c1c2e; } [data-bs-theme="dark"] #searchModal .modal-content { background: rgba(15, 17, 23, 0.85); } /*-------------------------------------------------------------- # Frontend lang-btn used as a button element (reset defaults) --------------------------------------------------------------*/ button.lang-btn { background: none; border: none; cursor: pointer; line-height: 1; } /*-------------------------------------------------------------- # Peta — Map Toolbar --------------------------------------------------------------*/ [data-bs-theme="dark"] .map-toolbar { background: rgba(20, 24, 36, 0.96); border-color: rgba(45, 55, 72, 0.6); } [data-bs-theme="dark"] .map-toolbar button { background: #1c1c2e; color: #a0aec0; border-color: rgba(255, 255, 255, 0.06); } [data-bs-theme="dark"] .map-toolbar button#toggleLayerControl { background: #1a2e22; color: #34d399; border-color: #1a3628; } [data-bs-theme="dark"] .map-toolbar hr { border-top-color: #2d3748; } /*-------------------------------------------------------------- # Peta — Layer Control Panel --------------------------------------------------------------*/ [data-bs-theme="dark"] .custom-layer-control { background: rgba(20, 24, 36, 0.96); border-color: rgba(45, 55, 72, 0.5); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5); } [data-bs-theme="dark"] .layer-body::-webkit-scrollbar-track { background: #1e2235; } [data-bs-theme="dark"] .layer-body::-webkit-scrollbar-thumb { background: #2d3748; } [data-bs-theme="dark"] .search-box, [data-bs-theme="dark"] .date-range-container { background: #1e2235; border-color: #2d3748; } [data-bs-theme="dark"] .search-box h6, [data-bs-theme="dark"] .date-range-container h6 { color: #ffffff; } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] input[type="date"] { background: #16213e; color: #ffffff; border-color: #2d3748; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] input[type="date"]:focus { border-color: #059669; box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2); } [data-bs-theme="dark"] .layer-group h5 { color: #e2e8f0; background: #1a2e22; border-color: #1a3628; } [data-bs-theme="dark"] .layer-group h5:hover { background: #1a3628; border-color: #166534; } [data-bs-theme="dark"] .layer-group ul { background: #1c1c2e; border-color: #2d3748; } [data-bs-theme="dark"] .layer-group ul li label { color: #dfe4eb; } [data-bs-theme="dark"] .layer-group ul li label:hover { background: #1e2235; color: #e3e8ee; } [data-bs-theme="dark"] .layer-group ul li input[type="checkbox"]:checked + label, [data-bs-theme="dark"] .layer-group ul li input[type="radio"]:checked + label { background: #1a2e22; color: #34d399; } [data-bs-theme="dark"] .layer-separator { background: #2d3748; } [data-bs-theme="dark"] #cctvToggle, [data-bs-theme="dark"] #penghijauanToggle { background: #1e2235 !important; border-color: #2d3748 !important; border-left-color: #059669 !important; color: #e2e8f0 !important; } /*-------------------------------------------------------------- # Frontend — Berita / Artikel page --------------------------------------------------------------*/ [data-bs-theme="dark"] .artikel-hero { background-color: #0f1117; } [data-bs-theme="dark"] .artikel-hero h1 { color: #e2e8f0 !important; } [data-bs-theme="dark"] .artikel-hero p { color: #8b95a9 !important; } [data-bs-theme="dark"] .breadcrumb-modern, [data-bs-theme="dark"] .breadcrumb-modern a { color: #34d399 !important; }