/* Dark Theme for PPA Organizations * Applies when [data-bs-theme="dark"] is set on element */ [data-bs-theme="dark"] { /* Dark theme color palette - inverted versions of light theme */ --bs-primary: #2EB2CE; --bs-primary-rgb: 46, 178, 206; --bs-primary-bg-subtle: #1a4a56; --bs-primary-border-subtle: #255e6d; --bs-primary-text: #7dd4e8; --bs-secondary: #8891ab; --bs-secondary-rgb: 136, 145, 171; --bs-secondary-bg-subtle: #2a2f3d; --bs-secondary-border-subtle: #3d4353; --bs-secondary-text: #b8bfce; --bs-success: #6EB07E; --bs-success-rgb: 110, 176, 126; --bs-success-bg-subtle: #2a4032; --bs-success-border-subtle: #3d5d48; --bs-success-text: #a3d4ae; --bs-danger: #E4572E; --bs-danger-rgb: 228, 87, 46; --bs-danger-bg-subtle: #4d1f13; --bs-danger-border-subtle: #6e2e1c; --bs-danger-text: #f39c7f; --bs-warning: #ff8c5a; --bs-warning-rgb: 255, 140, 90; --bs-warning-bg-subtle: #553021; --bs-warning-border-subtle: #7a4631; --bs-warning-text: #ffc4a5; --bs-info: #5ec8e3; --bs-info-rgb: 94, 200, 227; --bs-info-bg-subtle: #224650; --bs-info-border-subtle: #336371; --bs-info-text: #a5e3f1; --bs-dark: #201E50; --bs-dark-rgb: 32, 30, 80; --bs-dark-bg-subtle: #0d0c20; --bs-dark-border-subtle: #16142f; --bs-dark-text: #7774a8; /* Background and surface colors */ --bs-body-bg: #1a1a1a; --bs-body-bg-rgb: 26, 26, 26; --bs-body-color: #e9ecef; --bs-body-color-rgb: 233, 236, 239; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color: rgba(233, 236, 239, 0.75); --bs-secondary-bg: #2b2b2b; --bs-secondary-bg-rgb: 43, 43, 43; --bs-tertiary-color: rgba(233, 236, 239, 0.5); --bs-tertiary-bg: #212121; --bs-tertiary-bg-rgb: 33, 33, 33; /* Border colors */ --bs-border-color: #404040; --bs-border-color-translucent: rgba(255, 255, 255, 0.15); /* Link colors */ --bs-link-color: #5ec8e3; --bs-link-hover-color: #7dd4e8; /* Code colors */ --bs-code-color: #ff8c5a; /* Heading colors */ --bs-heading-color: #ffffff; } /* Dark theme specific component adjustments */ /* Navbar - ensure proper contrast and visibility in dark mode */ [data-bs-theme="dark"] .navbar { background-color: var(--bs-dark) !important; border-bottom: 1px solid var(--bs-border-color); } [data-bs-theme="dark"] .navbar .nav-link { color: rgba(255, 255, 255, 0.85) !important; } [data-bs-theme="dark"] .navbar .nav-link:hover, [data-bs-theme="dark"] .navbar .nav-link:focus { color: rgba(255, 255, 255, 1) !important; } [data-bs-theme="dark"] .navbar-toggler { border-color: rgba(255, 255, 255, 0.2); } [data-bs-theme="dark"] .navbar-toggler-icon { filter: invert(1); } [data-bs-theme="dark"] .navbar .dropdown-toggle { color: rgba(255, 255, 255, 0.85) !important; } [data-bs-theme="dark"] .navbar .dropdown-toggle:hover { color: rgba(255, 255, 255, 1) !important; } [data-bs-theme="dark"] .card { background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255, 255, 255, 0.05); --bs-table-hover-bg: rgba(255, 255, 255, 0.075); color: var(--bs-body-color); border-color: var(--bs-border-color); } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: var(--bs-tertiary-bg); border-color: var(--bs-primary); color: var(--bs-body-color); } [data-bs-theme="dark"] .dropdown-menu { background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); } [data-bs-theme="dark"] .dropdown-item { color: var(--bs-body-color); } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); } [data-bs-theme="dark"] .modal-content { background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer { border-color: var(--bs-border-color); } [data-bs-theme="dark"] .list-group-item { background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-bs-theme="dark"] .breadcrumb { background-color: var(--bs-tertiary-bg); } [data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--bs-secondary-color); } /* Alert adjustments for dark theme */ [data-bs-theme="dark"] .alert-primary { background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text); } [data-bs-theme="dark"] .alert-success { background-color: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); color: var(--bs-success-text); } [data-bs-theme="dark"] .alert-danger { background-color: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text); } [data-bs-theme="dark"] .alert-warning { background-color: var(--bs-warning-bg-subtle); border-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text); } [data-bs-theme="dark"] .alert-info { background-color: var(--bs-info-bg-subtle); border-color: var(--bs-info-border-subtle); color: var(--bs-info-text); } /* Badge adjustments */ [data-bs-theme="dark"] .badge { color: #ffffff; } /* Button outline variants for dark theme */ [data-bs-theme="dark"] .btn-outline-primary { color: var(--bs-primary); border-color: var(--bs-primary); } [data-bs-theme="dark"] .btn-outline-primary:hover { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #ffffff; } /* Background color overrides for better contrast */ [data-bs-theme="dark"] .bg-light { background-color: var(--bs-secondary-bg) !important; } [data-bs-theme="dark"] .text-muted { color: var(--bs-secondary-color) !important; } /* Tabulator table styling for dark mode */ [data-bs-theme="dark"] .tabulator { background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-bs-theme="dark"] .tabulator .tabulator-header { background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col { background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col-title { color: var(--bs-emphasis-color); } [data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row { background-color: var(--bs-secondary-bg) !important; border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover { background-color: var(--bs-tertiary-bg) !important; } [data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-row-even { background-color: #323232 !important; } [data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-row-even:hover { background-color: var(--bs-tertiary-bg) !important; } [data-bs-theme="dark"] .tabulator .tabulator-footer { background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page { border-color: var(--bs-border-color); background-color: var(--bs-secondary-bg); color: var(--bs-body-color); } [data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page:hover { background-color: var(--bs-tertiary-bg); } [data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page.active { background-color: var(--bs-primary); color: #ffffff; } [data-bs-theme="dark"] .tabulator-row .tabulator-cell { border-color: var(--bs-border-color); } [data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-placeholder span { color: var(--bs-secondary-color); } /* Tabulator loader styling */ [data-bs-theme="dark"] .tabulator-loader { background-color: rgba(0, 0, 0, 0.6) !important; } [data-bs-theme="dark"] .tabulator-loader-msg { background-color: var(--bs-secondary-bg) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; }