/* * Dark Mode Override for Metronic Demo7 * Scoped under [data-theme="dark"] on * Color values sourced from style.dark.bundle (Metronic official dark palette) */ /* ─── CSS Variable Overrides ─── */ [data-theme="dark"] { --bs-gray: #6D6D80; --bs-gray-dark: #CDCDDE; --bs-gray-100: #1b1b29; --bs-gray-200: #2B2B40; --bs-gray-300: #323248; --bs-gray-400: #474761; --bs-gray-500: #565674; --bs-gray-600: #6D6D80; --bs-gray-700: #92929F; --bs-gray-800: #CDCDDE; --bs-gray-900: #FFFFFF; --bs-light: #1b1b29; --bs-secondary: #323248; --bs-dark: #FFFFFF; --bs-light-rgb: 27, 27, 41; --bs-secondary-rgb: 50, 50, 72; --bs-dark-rgb: 255, 255, 255; --bs-body-color: #FFFFFF; --bs-body-bg: #1E1E2D; --bs-body-color-rgb: 255, 255, 255; --bs-body-bg-rgb: 30, 30, 45; color-scheme: dark; } /* ─── Body & Root ─── */ [data-theme="dark"] body { color: #FFFFFF; background-color: #1E1E2D; } /* ─── Text Gray Utilities ─── */ [data-theme="dark"] .text-gray-100 { color: #1b1b29 !important; } [data-theme="dark"] .text-gray-200 { color: #2B2B40 !important; } [data-theme="dark"] .text-gray-300 { color: #323248 !important; } [data-theme="dark"] .text-gray-400 { color: #474761 !important; } [data-theme="dark"] .text-gray-500 { color: #565674 !important; } [data-theme="dark"] .text-gray-600 { color: #6D6D80 !important; } [data-theme="dark"] .text-gray-700 { color: #92929F !important; } [data-theme="dark"] .text-gray-800 { color: #CDCDDE !important; } [data-theme="dark"] .text-gray-900 { color: #FFFFFF !important; } [data-theme="dark"] .text-dark { color: #FFFFFF !important; } [data-theme="dark"] .text-muted { color: #A3AAC4 !important; } /* Keep muted utility readable on dark surfaces for generic span/div/p text */ [data-theme="dark"] span.text-muted, [data-theme="dark"] div.text-muted, [data-theme="dark"] p.text-muted, [data-theme="dark"] small.text-muted { color: #A3AAC4 !important; } /* ─── Background Utilities ─── */ [data-theme="dark"] .bg-white { background-color: #1E1E2D !important; } [data-theme="dark"] .bg-light { background-color: #1b1b29 !important; } [data-theme="dark"] .bg-body { background-color: #1E1E2D !important; } [data-theme="dark"] .bg-dark { background-color: #FFFFFF !important; } /* BG Gray Utilities */ [data-theme="dark"] .bg-gray-100 { background-color: #1b1b29 !important; } [data-theme="dark"] .bg-gray-200 { background-color: #2B2B40 !important; } [data-theme="dark"] .bg-gray-300 { background-color: #323248 !important; } /* Light Background Variants */ [data-theme="dark"] .bg-light-primary { background-color: #1C3238 !important; } [data-theme="dark"] .bg-light-success { background-color: #212E48 !important; } [data-theme="dark"] .bg-light-info { background-color: #2F264F !important; } [data-theme="dark"] .bg-light-warning { background-color: #392F28 !important; } [data-theme="dark"] .bg-light-danger { background-color: #3A2434 !important; } [data-theme="dark"] .bg-light-dark { background-color: #323248 !important; } /* ─── Headings ─── */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .h1, [data-theme="dark"] .h2, [data-theme="dark"] .h3, [data-theme="dark"] .h4, [data-theme="dark"] .h5, [data-theme="dark"] .h6 { color: #FFFFFF; } /* ─── Card ─── */ [data-theme="dark"] .card { background-color: #1E1E2D; box-shadow: none; border-color: #2B2B40; } [data-theme="dark"] .card-header { border-bottom-color: #2B2B40; } [data-theme="dark"] .card-footer { border-top-color: #2B2B40; } /* ─── Modal ─── */ [data-theme="dark"] .modal-content { background-color: #1E1E2D; border-color: #2B2B40; color: #FFFFFF; } [data-theme="dark"] .modal-header { border-bottom-color: #2B2B40; } [data-theme="dark"] .modal-footer { border-top-color: #2B2B40; } /* ─── Forms ─── */ [data-theme="dark"] .form-control { color: #FFFFFF; background-color: #1E1E2D; border-color: #323248; } [data-theme="dark"] .form-control:focus { color: #FFFFFF; background-color: #1E1E2D; border-color: #474761; } [data-theme="dark"] .form-control::placeholder { color: #565674; } [data-theme="dark"] .form-control-solid { background-color: #1b1b29; border-color: #1b1b29; color: #FFFFFF; } [data-theme="dark"] .form-control-solid:focus { background-color: #171723; border-color: #171723; } [data-theme="dark"] .form-select { color: #FFFFFF; background-color: #1E1E2D; border-color: #323248; } [data-theme="dark"] .form-select:focus { border-color: #474761; } [data-theme="dark"] .form-label { color: #CDCDDE; } [data-theme="dark"] .form-check-input { background-color: #1b1b29; border-color: #323248; } /* Improve input readability contrast in dark mode across Metronic forms */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .form-control-solid { color: #F5F8FF !important; background-color: #2B2B40 !important; border-color: #565674 !important; } [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] .form-control-solid::placeholder, [data-theme="dark"] .form-select::placeholder { color: #AEB4CC !important; opacity: 1; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] .form-control-solid:focus { color: #FFFFFF !important; background-color: #323248 !important; border-color: #0BB783 !important; box-shadow: 0 0 0 0.15rem rgba(11, 183, 131, 0.2); } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly], [data-theme="dark"] .form-select:disabled { color: #CDCDDE !important; background-color: #323248 !important; border-color: #474761 !important; opacity: 1; } [data-theme="dark"] .input-group-text { color: #D5D8E8; background-color: #323248; border-color: #565674; } [data-theme="dark"] .form-text { color: #9EA6C0 !important; } [data-theme="dark"] .form-floating>label { color: #AEB4CC; } /* Select2 dark mode readability */ [data-theme="dark"] .select2-container--default .select2-selection--single, [data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: #2B2B40 !important; border: 1px solid #565674 !important; color: #F5F8FF !important; } [data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, [data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered, [data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { color: #F5F8FF !important; } [data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single, [data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple, [data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single, [data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--multiple { border-color: #0BB783 !important; box-shadow: 0 0 0 0.15rem rgba(11, 183, 131, 0.2); } [data-theme="dark"] .select2-dropdown { background-color: #1E1E2D; border-color: #565674; } [data-theme="dark"] .select2-search--dropdown .select2-search__field { background-color: #2B2B40; border-color: #565674; color: #F5F8FF; } [data-theme="dark"] .select2-results__option { color: #CDCDDE; } [data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected], [data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background-color: #323248; color: #FFFFFF; } /* ─── Aside / Sidebar ─── */ [data-theme="dark"] .aside { background-color: #1E1E2D; box-shadow: none; } [data-theme="dark"] .aside .aside-secondary { background-color: #1a1a27; } /* ─── Menu ─── */ [data-theme="dark"] .menu-title { color: #9D9DA6 !important; } [data-theme="dark"] .menu-link:hover .menu-title, [data-theme="dark"] .menu-link.active .menu-title { color: #FFFFFF !important; } [data-theme="dark"] .menu-section { color: #474761 !important; } [data-theme="dark"] .menu-sub { background-color: #1E1E2D; } [data-theme="dark"] .menu-sub-dropdown { background-color: #1E1E2D; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.3); } /* Ensure dropdown menu links remain readable in dark mode */ [data-theme="dark"] .menu-sub-dropdown .menu-item .menu-link, [data-theme="dark"] .menu-gray-800 .menu-item .menu-link { color: #D5DBEE !important; border-radius: 0.475rem; } [data-theme="dark"] .menu-sub-dropdown .menu-item .menu-link .menu-title, [data-theme="dark"] .menu-gray-800 .menu-item .menu-link .menu-title, [data-theme="dark"] .menu-gray-800 .menu-item .menu-link .menu-icon i { color: #D5DBEE !important; } [data-theme="dark"] .menu-gray-800 .menu-item .menu-link .menu-bullet .bullet { background-color: #D5DBEE; } [data-theme="dark"] .menu-gray-800 .menu-item .menu-link .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) { fill: #D5DBEE !important; } [data-theme="dark"] .menu-sub-dropdown .menu-item .menu-link:hover, [data-theme="dark"] .menu-sub-dropdown .menu-item .menu-link.active, [data-theme="dark"] .menu-gray-800 .menu-item .menu-link:hover, [data-theme="dark"] .menu-gray-800 .menu-item .menu-link.active { color: #FFFFFF !important; background-color: #34344A; } [data-theme="dark"] .menu-sub-dropdown .menu-item .menu-link:hover .menu-title, [data-theme="dark"] .menu-sub-dropdown .menu-item .menu-link:hover .menu-icon i, [data-theme="dark"] .menu-sub-dropdown .menu-item .menu-link.active .menu-title, [data-theme="dark"] .menu-sub-dropdown .menu-item .menu-link.active .menu-icon i, [data-theme="dark"] .menu-gray-800 .menu-item .menu-link:hover .menu-title, [data-theme="dark"] .menu-gray-800 .menu-item .menu-link:hover .menu-icon i, [data-theme="dark"] .menu-gray-800 .menu-item .menu-link.active .menu-title, [data-theme="dark"] .menu-gray-800 .menu-item .menu-link.active .menu-icon i { color: #FFFFFF !important; } [data-theme="dark"] .menu-sub-dropdown .menu-item .menu-link:hover .menu-icon .svg-icon svg [fill]:not(.permanent):not(g), [data-theme="dark"] .menu-sub-dropdown .menu-item .menu-link.active .menu-icon .svg-icon svg [fill]:not(.permanent):not(g), [data-theme="dark"] .menu-gray-800 .menu-item .menu-link:hover .menu-icon .svg-icon svg [fill]:not(.permanent):not(g), [data-theme="dark"] .menu-gray-800 .menu-item .menu-link.active .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) { fill: #FFFFFF !important; } /* Neutralize Metronic light-primary menu state in dark dropdowns */ [data-theme="dark"] .menu-state-bg-light-primary .menu-item .menu-link:hover:not(.disabled):not(.active), [data-theme="dark"] .menu-state-bg-light-primary .menu-item.hover>.menu-link:not(.disabled):not(.active), [data-theme="dark"] .menu-state-bg-light-primary .menu-item .menu-link.active, [data-theme="dark"] .menu-state-bg-light-primary .menu-item.here>.menu-link, [data-theme="dark"] .menu-state-bg-light-primary .menu-item.show>.menu-link { background-color: #34344A !important; } [data-theme="dark"] .menu-state-bg-light-primary .menu-item .menu-link .menu-title, [data-theme="dark"] .menu-state-bg-light-primary .menu-item .menu-link .menu-icon i { color: #D5DBEE !important; } [data-theme="dark"] .menu-state-bg-light-primary .menu-item .menu-link:hover .menu-title, [data-theme="dark"] .menu-state-bg-light-primary .menu-item .menu-link:hover .menu-icon i, [data-theme="dark"] .menu-state-bg-light-primary .menu-item .menu-link.active .menu-title, [data-theme="dark"] .menu-state-bg-light-primary .menu-item .menu-link.active .menu-icon i, [data-theme="dark"] .menu-state-bg-light-primary .menu-item.here>.menu-link .menu-title, [data-theme="dark"] .menu-state-bg-light-primary .menu-item.here>.menu-link .menu-icon i, [data-theme="dark"] .menu-state-bg-light-primary .menu-item.show>.menu-link .menu-title, [data-theme="dark"] .menu-state-bg-light-primary .menu-item.show>.menu-link .menu-icon i { color: #EEF2FF !important; } [data-theme="dark"] .menu-state-bg-light-primary .menu-item .menu-link .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) { fill: #D5DBEE !important; } [data-theme="dark"] .menu-state-bg-light-primary .menu-item .menu-link:hover .menu-icon .svg-icon svg [fill]:not(.permanent):not(g), [data-theme="dark"] .menu-state-bg-light-primary .menu-item .menu-link.active .menu-icon .svg-icon svg [fill]:not(.permanent):not(g), [data-theme="dark"] .menu-state-bg-light-primary .menu-item.here>.menu-link .menu-icon .svg-icon svg [fill]:not(.permanent):not(g), [data-theme="dark"] .menu-state-bg-light-primary .menu-item.show>.menu-link .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) { fill: #EEF2FF !important; } [data-theme="dark"] .menu-gray-800 .menu-item .menu-link .menu-arrow:after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='%23D5DBEE'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.06463 4.42111C1.96161 4.22088 1.9809 3.9637 2.12863 3.78597L5.12847 0.177181C5.31402 -0.046034 5.63049 -0.060261 5.83532 0.145404C6.04015 0.351069 6.05578 0.698744 5.87023 0.921959L3.19406 4.14137L5.84414 7.06417C6.03896 7.27904 6.03835 7.62686 5.84278 7.84105C5.64721 8.05524 5.33073 8.05469 5.13591 7.83982L2.14806 4.54449C2.1141 4.50704 2.08629 4.46541 2.06463 4.42111Z'/%3e%3c/svg%3e"); } [data-theme="dark"] .menu-state-bg-light-primary .menu-item .menu-link .menu-arrow:after, [data-theme="dark"] .menu-state-bg-light-primary .menu-item.here>.menu-link .menu-arrow:after, [data-theme="dark"] .menu-state-bg-light-primary .menu-item.show>.menu-link .menu-arrow:after, [data-theme="dark"] .menu-state-bg-light-primary .menu-item .menu-link.active .menu-arrow:after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' fill='%23D5DBEE'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.06463 4.42111C1.96161 4.22088 1.9809 3.9637 2.12863 3.78597L5.12847 0.177181C5.31402 -0.046034 5.63049 -0.060261 5.83532 0.145404C6.04015 0.351069 6.05578 0.698744 5.87023 0.921959L3.19406 4.14137L5.84414 7.06417C6.03896 7.27904 6.03835 7.62686 5.84278 7.84105C5.64721 8.05524 5.33073 8.05469 5.13591 7.83982L2.14806 4.54449C2.1141 4.50704 2.08629 4.46541 2.06463 4.42111Z'/%3e%3c/svg%3e"); } [data-theme="dark"] .menu-link:hover { background-color: rgba(27, 27, 41, 0.8); } [data-theme="dark"] .menu-state-primary .menu-item .menu-link.active { background-color: rgba(27, 27, 41, 0.8); } /* ─── Header ─── */ [data-theme="dark"] .header { background-color: #1E1E2D; } /* ─── Table ─── */ [data-theme="dark"] .table { color: #CDCDDE; border-color: #2B2B40; } [data-theme="dark"] .table>thead>tr>th { color: #B8BFD8; border-bottom-color: #323248; } [data-theme="dark"] .table thead th.text-muted, [data-theme="dark"] thead .text-muted { color: #B8BFD8 !important; } [data-theme="dark"] .table>tbody>tr>td { border-bottom-color: #2B2B40; } [data-theme="dark"] .table.table-row-dashed tr { border-bottom-color: #2B2B40; } [data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>* { color: #CDCDDE; background-color: rgba(27, 27, 41, 0.5); } [data-theme="dark"] .table-hover>tbody>tr:hover>* { color: #CDCDDE; background-color: rgba(27, 27, 41, 0.7); } /* ─── Badges ─── */ [data-theme="dark"] .badge-light { color: #E3E8F8; background-color: #323248; border: 1px solid #565674; } [data-theme="dark"] .badge[class*="badge-light-"] { border: 1px solid rgba(205, 213, 235, 0.18); } [data-theme="dark"] .badge-light-primary { color: #0BB783; background-color: #1C3238; } [data-theme="dark"] .badge-light-success { color: #3699FF; background-color: #212E48; } [data-theme="dark"] .badge-light-info { color: #8950FC; background-color: #2F264F; } [data-theme="dark"] .badge-light-warning { color: #FFA800; background-color: #392F28; } [data-theme="dark"] .badge-light-danger { color: #F64E60; background-color: #3A2434; } [data-theme="dark"] .badge-light-secondary { color: #D6DBED; background-color: #2B2B40; border-color: #5B5B77; } /* ─── Light Theme Readability Fixes ─── */ [data-theme="light"] .badge-light, [data-bs-theme="light"] .badge-light { color: #3F4254 !important; background-color: #EEF2F7 !important; border: 1px solid #D4DCE8; } [data-theme="light"] .badge-light-secondary, [data-bs-theme="light"] .badge-light-secondary { color: #5E6278 !important; background-color: #E4E6EF !important; border: 1px solid #CDD2E1; } [data-theme="light"] .badge[class*="badge-light-"], [data-bs-theme="light"] .badge[class*="badge-light-"] { border: 1px solid rgba(63, 66, 84, 0.14); } /* ─── Buttons ─── */ [data-theme="dark"] .btn-light { color: #FFFFFF; background-color: #1b1b29; border-color: #1b1b29; } [data-theme="dark"] .btn.btn-color-gray-400, [data-theme="dark"] .btn.btn-color-gray-400 i { color: #BDC5DE !important; } [data-theme="dark"] .btn.btn-color-gray-400 .svg-icon svg [fill]:not(.permanent):not(g) { fill: #BDC5DE !important; } [data-theme="dark"] .btn.btn-active-light { color: #DCE3F9 !important; background-color: #2B2B40 !important; border-color: #565674 !important; } [data-theme="dark"] .btn.btn-active-light i, [data-theme="dark"] .btn.btn-active-light.dropdown-toggle:after { color: #DCE3F9 !important; } [data-theme="dark"] .btn.btn-active-light .svg-icon svg [fill]:not(.permanent):not(g) { fill: #DCE3F9 !important; } [data-theme="dark"] .btn.btn-icon.btn-active-light { color: #BDC5DE !important; background-color: #2B2B40; border-color: #565674; } [data-theme="dark"] .btn.btn-icon.btn-active-light .svg-icon svg [fill]:not(.permanent):not(g) { fill: #BDC5DE !important; } /* Improve readability for Metronic btn-active-light states in dark mode */ [data-theme="dark"] .btn-check:active+.btn.btn-active-light, [data-theme="dark"] .btn-check:checked+.btn.btn-active-light, [data-theme="dark"] .btn.btn-active-light.active, [data-theme="dark"] .btn.btn-active-light.show, [data-theme="dark"] .btn.btn-active-light:active:not(.btn-active), [data-theme="dark"] .btn.btn-active-light:focus:not(.btn-active), [data-theme="dark"] .btn.btn-active-light:hover:not(.btn-active), [data-theme="dark"] .show>.btn.btn-active-light { color: #E3E8F8 !important; border-color: #565674 !important; background-color: #323248 !important; } [data-theme="dark"] .btn-check:active+.btn.btn-active-light i, [data-theme="dark"] .btn-check:checked+.btn.btn-active-light i, [data-theme="dark"] .btn.btn-active-light.active i, [data-theme="dark"] .btn.btn-active-light.show i, [data-theme="dark"] .btn.btn-active-light:active:not(.btn-active) i, [data-theme="dark"] .btn.btn-active-light:focus:not(.btn-active) i, [data-theme="dark"] .btn.btn-active-light:hover:not(.btn-active) i, [data-theme="dark"] .show>.btn.btn-active-light i, [data-theme="dark"] .btn.btn-active-light.dropdown-toggle:after { color: #E3E8F8 !important; } [data-theme="dark"] .btn.btn-active-light .svg-icon svg [fill]:not(.permanent):not(g), [data-theme="dark"] .btn.btn-active-light .svg-icon svg:hover [fill]:not(.permanent):not(g) { fill: #E3E8F8 !important; } [data-theme="dark"] .btn-light:hover { color: #FFFFFF; background-color: #171723; border-color: #161621; } [data-theme="dark"] .btn-light-primary { color: #0BB783; background-color: #1C3238; } [data-theme="dark"] .btn-light-primary:hover { color: #fff; background-color: #0BB783; } [data-theme="dark"] .btn-light-success { color: #3699FF; background-color: #212E48; } [data-theme="dark"] .btn-light-success:hover { color: #fff; background-color: #3699FF; } [data-theme="dark"] .btn-light-warning { color: #FFA800; background-color: #392F28; } [data-theme="dark"] .btn-light-warning:hover { color: #fff; background-color: #FFA800; } [data-theme="dark"] .btn-light-danger { color: #F64E60; background-color: #3A2434; } [data-theme="dark"] .btn-light-danger:hover { color: #fff; background-color: #F64E60; } [data-theme="dark"] .btn-light-info { color: #8950FC; background-color: #2F264F; } [data-theme="dark"] .btn-light-info:hover { color: #fff; background-color: #8950FC; } [data-theme="dark"] .btn-active-light-primary.active, [data-theme="dark"] .btn-active-light-primary:active { color: #0BB783; background-color: #1C3238; } /* ─── Border / Separator ─── */ [data-theme="dark"] .border { border-color: #2B2B40 !important; } [data-theme="dark"] .border-dashed { border-color: #323248 !important; } [data-theme="dark"] .border-gray-300 { border-color: #323248 !important; } [data-theme="dark"] .separator { border-bottom-color: #2B2B40; } [data-theme="dark"] .separator.separator-dotted { border-bottom-color: #323248; } /* ─── Dropdown ─── */ [data-theme="dark"] .dropdown-menu { background-color: #1E1E2D; border-color: #2B2B40; color: #CDCDDE; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.3); } [data-theme="dark"] .dropdown-item { color: #CDCDDE; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: #1b1b29; color: #FFFFFF; } [data-theme="dark"] .dropdown-divider { border-color: #2B2B40; } /* ─── Breadcrumb ─── */ [data-theme="dark"] .breadcrumb-item.text-muted, [data-theme="dark"] .breadcrumb-item+.breadcrumb-item::before { color: #565674 !important; } /* ─── Alert ─── */ [data-theme="dark"] .alert-info { background-color: #2F264F; border-color: #2F264F; color: #8950FC; } [data-theme="dark"] .alert-success { background-color: #212E48; border-color: #212E48; color: #3699FF; } [data-theme="dark"] .alert-warning { background-color: #392F28; border-color: #392F28; color: #FFA800; } [data-theme="dark"] .alert-danger { background-color: #3A2434; border-color: #3A2434; color: #F64E60; } /* ─── Tooltip / Popover ─── */ [data-theme="dark"] .tooltip-inner { background-color: #2B2B40; color: #FFFFFF; } [data-theme="dark"] .popover { background-color: #1E1E2D; border-color: #2B2B40; } [data-theme="dark"] .popover-body { color: #CDCDDE; } /* ─── SweetAlert2 ─── */ [data-theme="dark"] .swal2-popup { background-color: #1E1E2D !important; color: #CDCDDE !important; } [data-theme="dark"] .swal2-title { color: #FFFFFF !important; } [data-theme="dark"] .swal2-html-container { color: #92929F !important; } [data-theme="dark"] .swal2-popup .swal2-actions .btn-active-light, [data-theme="dark"] .swal2-popup .swal2-actions .swal2-styled.btn-active-light, [data-theme="dark"] .swal2-popup .swal2-actions .swal2-confirm.btn-active-light { color: #DCE3F9 !important; background-color: #2B2B40 !important; border: 1px solid #565674 !important; box-shadow: none !important; } [data-theme="dark"] .swal2-popup .swal2-actions .btn-active-light:hover, [data-theme="dark"] .swal2-popup .swal2-actions .swal2-styled.btn-active-light:hover, [data-theme="dark"] .swal2-popup .swal2-actions .swal2-confirm.btn-active-light:hover { color: #FFFFFF !important; background-color: #34344A !important; border-color: #72729A !important; } [data-theme="dark"] .swal2-popup .swal2-actions .swal2-styled:not(.swal2-cancel):not(.swal2-deny):not(.swal2-confirm) { color: #DCE3F9 !important; background-color: #2B2B40 !important; border: 1px solid #565674 !important; } [data-theme="dark"] .swal2-popup .swal2-actions .swal2-cancel, [data-theme="dark"] .swal2-popup .swal2-actions .swal2-styled.swal2-cancel { color: #F5F8FF !important; background-color: #4E5A70 !important; border: 1px solid #7E8AA3 !important; box-shadow: none !important; } [data-theme="dark"] .swal2-popup .swal2-actions .swal2-cancel:hover, [data-theme="dark"] .swal2-popup .swal2-actions .swal2-styled.swal2-cancel:hover { color: #FFFFFF !important; background-color: #627089 !important; border-color: #9AA6BF !important; } [data-theme="dark"] .swal2-popup .swal2-actions .swal2-cancel:focus, [data-theme="dark"] .swal2-popup .swal2-actions .swal2-styled.swal2-cancel:focus { box-shadow: 0 0 0 0.2rem rgba(154, 166, 191, 0.35) !important; } /* ─── Scrollbar ─── */ [data-theme="dark"] ::-webkit-scrollbar-track { background: #1b1b29; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #323248; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #474761; } /* ─── Flatpickr ─── */ [data-theme="dark"] .flatpickr-calendar { background: #1E1E2D; border-color: #2B2B40; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.3); } [data-theme="dark"] .flatpickr-months .flatpickr-month, [data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months { background: #1E1E2D; color: #CDCDDE; } [data-theme="dark"] .flatpickr-weekdays, [data-theme="dark"] span.flatpickr-weekday { background: #1E1E2D; color: #6D6D80; } [data-theme="dark"] .flatpickr-day { color: #CDCDDE; } [data-theme="dark"] .flatpickr-day:hover { background: #2B2B40; border-color: #2B2B40; } [data-theme="dark"] .flatpickr-day.prevMonthDay, [data-theme="dark"] .flatpickr-day.nextMonthDay { color: #474761; } /* ─── Pagination ─── */ [data-theme="dark"] .page-link { color: #92929F; background-color: #1E1E2D; border-color: #2B2B40; } [data-theme="dark"] .page-link:hover { background-color: #2B2B40; color: #FFFFFF; } [data-theme="dark"] .page-item.active .page-link { background-color: #0BB783; border-color: #0BB783; } /* ─── Footer ─── */ [data-theme="dark"] .footer { background-color: #1b1b29; } [data-theme="dark"] .footer .text-gray-800 { color: #CDCDDE !important; } /* ─── Misc Overrides ─── */ [data-theme="dark"] .fw-bolder.text-dark, [data-theme="dark"] .fw-bold.text-dark { color: #FFFFFF !important; } [data-theme="dark"] .text-hover-primary:hover { color: #0BB783 !important; } [data-theme="dark"] a.text-gray-600:hover { color: #CDCDDE !important; } /* ─── Search ─── */ [data-theme="dark"] [data-kt-search-element="content"] { background-color: #1E1E2D; } /* ─── Toggle Button ─── */ .theme-toggle-btn { cursor: pointer; transition: all 0.2s ease; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 0.475rem; border: 1px solid transparent; } .theme-mode-menu-btn { width: 28px; height: 35px; border-radius: 0.475rem; border: 1px solid transparent; transition: all 0.2s ease; } .theme-toggle-btn:hover { background-color: rgba(0, 0, 0, 0.05); } [data-theme="dark"] .theme-mode-menu-btn:hover { background-color: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .theme-toggle-btn:hover { background-color: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .theme-toggle-btn { background-color: #2B2B40; border-color: #323248; color: #FFFFFF; } [data-theme="dark"] .theme-mode-menu-btn { background-color: #2B2B40; border-color: #323248; color: #FFFFFF; } .theme-toggle-btn:focus-visible { outline: 2px solid rgba(11, 183, 131, 0.45); outline-offset: 2px; } .theme-mode-option.active { background-color: rgba(11, 183, 131, 0.12); } [data-theme="dark"] .theme-mode-option.active { background-color: rgba(11, 183, 131, 0.2); } [data-theme="dark"] .theme-mode-option .menu-title, [data-theme="dark"] .theme-mode-option .menu-icon { color: #CDCDDE; } /* ─── Smooth Transition ─── */ [data-theme="dark"] body, [data-theme="dark"] .aside, [data-theme="dark"] .card, [data-theme="dark"] .modal-content, [data-theme="dark"] .form-control, [data-theme="dark"] .form-control-solid, [data-theme="dark"] .form-select, [data-theme="dark"] .btn-light, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .table { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }