/* * Dark theme overlay for the (light-only) Sneat template. * Applied when has class "theme-dark". Layers a dark palette over the * existing light base so we don't depend on the paid dark stylesheet. */ html.theme-dark { --bs-body-bg: #232333; --bs-body-color: #cfd3ec; --bs-border-color: #44445f; --bs-heading-color: #e7e9f6; color-scheme: dark; } /* Page + generic surfaces */ html.theme-dark body, html.theme-dark .layout-wrapper, html.theme-dark .layout-container, html.theme-dark .content-wrapper { background-color: #232333 !important; color: #cfd3ec; } html.theme-dark .card, html.theme-dark .menu, html.theme-dark .bg-menu-theme, html.theme-dark .navbar-detached, html.theme-dark .bg-navbar-theme, html.theme-dark .dropdown-menu, html.theme-dark .modal-content, html.theme-dark .offcanvas, html.theme-dark .list-group-item, html.theme-dark .accordion-item, html.theme-dark .toast, html.theme-dark .popover { background-color: #2b2b40 !important; color: #cfd3ec !important; border-color: #44445f !important; } html.theme-dark .card, html.theme-dark .navbar-detached { box-shadow: 0 2px 6px rgba(0, 0, 0, .3) !important; } /* Text */ html.theme-dark h1, html.theme-dark h2, html.theme-dark h3, html.theme-dark h4, html.theme-dark h5, html.theme-dark h6, html.theme-dark .h1, html.theme-dark .h2, html.theme-dark .h3, html.theme-dark .h4, html.theme-dark .h5, html.theme-dark .h6, html.theme-dark .text-dark, html.theme-dark .card-title, html.theme-dark .fw-bold, html.theme-dark .menu-link, html.theme-dark .navbar .nav-item, html.theme-dark label { color: #e7e9f6 !important; } html.theme-dark .text-muted, html.theme-dark small, html.theme-dark .text-secondary { color: #8f93b3 !important; } html.theme-dark a:not(.btn):not(.menu-link):not(.page-link):not(.dropdown-item) { color: #8a9cff; } /* Sidebar menu */ html.theme-dark .menu-item .menu-link { color: #b8bcd9 !important; } html.theme-dark .menu-item.active > .menu-link { background-color: #383a52 !important; color: #fff !important; } html.theme-dark .menu-item .menu-link:hover, html.theme-dark .menu-sub .menu-link:hover { background-color: #34364d !important; } html.theme-dark .menu-inner > .menu-item.open > .menu-toggle { background-color: #2f3145 !important; } html.theme-dark .menu-header-text { color: #6f739a !important; } html.theme-dark .menu-divider, html.theme-dark hr, html.theme-dark .dropdown-divider { border-color: #44445f !important; } /* Tables */ html.theme-dark .table { --bs-table-bg: transparent; --bs-table-color: #cfd3ec; --bs-table-border-color: #3d3d57; --bs-table-striped-color: #cfd3ec; --bs-table-striped-bg: rgba(255, 255, 255, .03); --bs-table-hover-color: #fff; --bs-table-hover-bg: rgba(255, 255, 255, .06); color: #cfd3ec; } html.theme-dark .table thead th, html.theme-dark .table-light, html.theme-dark .table > :not(caption) > * > * { border-color: #3d3d57; } html.theme-dark .table thead th { color: #a9adcf; background-color: #30314a; } /* Forms */ html.theme-dark .form-control, html.theme-dark .form-select, html.theme-dark .input-group-text, html.theme-dark .form-check-input:not(:checked) { background-color: #2f3048 !important; border-color: #44445f !important; color: #dfe2f5 !important; } html.theme-dark .form-control::placeholder { color: #7a7f9a !important; } html.theme-dark .form-control:focus, html.theme-dark .form-select:focus { border-color: #696cff !important; } /* Dropdowns / list items */ html.theme-dark .dropdown-item { color: #cfd3ec; } html.theme-dark .dropdown-item:hover, html.theme-dark .dropdown-item:focus { background-color: #383a52; color: #fff; } html.theme-dark .dropdown-item.active { background-color: #696cff; } /* Misc */ html.theme-dark .breadcrumb, html.theme-dark .breadcrumb-item, html.theme-dark .breadcrumb-item a { color: #9a9fc0; } html.theme-dark .breadcrumb-item.active { color: #cfd3ec; } html.theme-dark .nav-tabs .nav-link, html.theme-dark .nav-pills .nav-link { color: #b8bcd9; } html.theme-dark .nav-tabs .nav-link.active { background-color: #2b2b40; border-color: #44445f #44445f #2b2b40; color: #fff; } html.theme-dark .border, html.theme-dark .border-top, html.theme-dark .border-bottom, html.theme-dark .border-start, html.theme-dark .border-end { border-color: #44445f !important; } html.theme-dark .btn-outline-secondary { color: #b8bcd9; border-color: #55597a; } html.theme-dark .page-link { background-color: #2b2b40; border-color: #44445f; color: #b8bcd9; } html.theme-dark .page-item.active .page-link { background-color: #696cff; border-color: #696cff; color: #fff; } html.theme-dark code { color: #ff7eb6; } html.theme-dark ::-webkit-scrollbar-thumb { background: #44445f; } /* Theme switch button active state */ .theme-option.active { color: #696cff; font-weight: 600; } /* ===================================================================== * Dark theme — library components the base overlay missed * (select2, bootstrap-table, daterangepicker), footer & faint text. * ===================================================================== */ /* Footer */ html.theme-dark .footer, html.theme-dark .bg-footer-theme, html.theme-dark .content-footer { background-color: #2b2b40 !important; color: #9a9fc0 !important; } html.theme-dark .footer a { color: #8a9cff !important; } /* Strengthen faint headings / page titles */ html.theme-dark .content-wrapper h1, html.theme-dark .content-wrapper h2, html.theme-dark .content-wrapper h3, html.theme-dark .content-wrapper h4, html.theme-dark .content-wrapper h5, html.theme-dark .fw-bold, html.theme-dark .fw-semibold, html.theme-dark .card-header, html.theme-dark .page-title, html.theme-dark .text-heading { color: #e7e9f6 !important; } html.theme-dark .content-wrapper { color: #cfd3ec; } /* ---------- Select2 ---------- */ /* Outer container: custom.css styles it as a white form-control (the white halo seen in dark mode). Recolor it so the whole control is dark. */ html.theme-dark .select2.select2-container.select2-container--default:not(#global-search + .select2-container) { background-color: #2f3048 !important; border-color: #44445f !important; color: #dfe2f5 !important; } html.theme-dark .select2.select2-container.select2-container--default:not(#global-search + .select2-container):focus-within { border-color: #696cff !important; } html.theme-dark .select2-container--default .select2-selection--single, html.theme-dark .select2-container--default .select2-selection--multiple, html.theme-dark .select2-selection { background-color: transparent !important; border-color: #44445f !important; color: #dfe2f5 !important; } html.theme-dark .select2-container--default .select2-selection__rendered, html.theme-dark .select2-selection__rendered { color: #dfe2f5 !important; } html.theme-dark .select2-container--default .select2-selection__placeholder, html.theme-dark .select2-selection__placeholder { color: #8f93b3 !important; } html.theme-dark .select2-container--default .select2-selection__arrow b { border-color: #8f93b3 transparent transparent transparent; } html.theme-dark .select2-dropdown { background-color: #2b2b40 !important; border-color: #44445f !important; } html.theme-dark .select2-results__option { color: #cfd3ec; } html.theme-dark .select2-container--default .select2-results__option--highlighted[aria-selected], html.theme-dark .select2-results__option--highlighted { background-color: #696cff !important; color: #fff !important; } html.theme-dark .select2-container--default .select2-results__option[aria-selected="true"] { background-color: #383a52; } html.theme-dark .select2-search__field { background-color: #2f3048 !important; color: #dfe2f5 !important; border-color: #44445f !important; } html.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #383a52 !important; border-color: #55597a !important; color: #e7e9f6 !important; } html.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #cfd3ec !important; } /* ---------- Bootstrap-table ---------- */ html.theme-dark .bootstrap-table .fixed-table-container, html.theme-dark .fixed-table-container { border-color: #44445f !important; } html.theme-dark .fixed-table-body, html.theme-dark .fixed-table-body .table, html.theme-dark .fixed-table-toolbar, html.theme-dark .fixed-table-pagination, html.theme-dark .fixed-table-footer { background-color: #2b2b40 !important; color: #cfd3ec !important; } html.theme-dark .fixed-table-body td, html.theme-dark .fixed-table-body th { background-color: #2b2b40 !important; color: #cfd3ec; border-color: #3d3d57 !important; } html.theme-dark .fixed-table-container thead th, html.theme-dark .fixed-table-header thead th { background-color: #30314a !important; color: #c3c6e6 !important; border-color: #3d3d57 !important; } html.theme-dark .fixed-table-body tr:hover > td { background-color: #34364d !important; } html.theme-dark .fixed-table-pagination .pagination-detail, html.theme-dark .fixed-table-pagination .pagination-info, html.theme-dark .pagination-detail { color: #9a9fc0 !important; } html.theme-dark .fixed-table-toolbar .search input, html.theme-dark .bootstrap-table .search .form-control { background-color: #2f3048 !important; border-color: #44445f !important; color: #dfe2f5 !important; } html.theme-dark .fixed-table-toolbar .btn, html.theme-dark .fixed-table-pagination .btn { background-color: #2f3048; border-color: #44445f; color: #cfd3ec; } html.theme-dark .bootstrap-table .fixed-table-toolbar .dropdown-menu { background-color: #2b2b40; border-color: #44445f; } html.theme-dark .page-item.disabled .page-link { background-color: #262636; color: #6f739a; border-color: #44445f; } /* ---------- Daterangepicker (Date Between popups) ---------- */ html.theme-dark .daterangepicker { background-color: #2b2b40; border-color: #44445f; color: #cfd3ec; } html.theme-dark .daterangepicker:after { border-bottom-color: #2b2b40; } html.theme-dark .daterangepicker:before { border-bottom-color: #44445f; } html.theme-dark .daterangepicker .calendar-table { background-color: #2b2b40; border-color: #2b2b40; } html.theme-dark .daterangepicker td.available:hover, html.theme-dark .daterangepicker th.available:hover { background-color: #383a52; } html.theme-dark .daterangepicker td.off { background-color: #262636; color: #6f739a; } html.theme-dark .daterangepicker td.active, html.theme-dark .daterangepicker td.active:hover { background-color: #696cff; } html.theme-dark .daterangepicker .ranges li:hover { background-color: #383a52; } html.theme-dark .daterangepicker .drp-buttons { border-color: #44445f; } html.theme-dark .daterangepicker .drp-calendar.left, html.theme-dark .daterangepicker .drp-calendar.right { border-color: #44445f; } /* Stray light containers that leave light text unreadable */ html.theme-dark .bg-white, html.theme-dark .bg-light, html.theme-dark .card-header, html.theme-dark .card-footer, html.theme-dark .tab-content, html.theme-dark .nav-tabs, html.theme-dark .table-responsive { background-color: #2b2b40 !important; color: #cfd3ec !important; } html.theme-dark .bg-lighter, html.theme-dark .bg-lightest { background-color: #30314a !important; } /* White-leak catch — component surfaces that default to white (complements the inline-white sweep below): modals, dropdowns, popovers, offcanvas, accordions. */ html.theme-dark .modal-content, html.theme-dark .dropdown-menu:not(.language-dropdown), html.theme-dark .list-group-item, html.theme-dark .popover, html.theme-dark .popover-body, html.theme-dark .offcanvas, html.theme-dark .accordion-button, html.theme-dark .accordion-body, html.theme-dark .tooltip-inner { background-color: #1b1b29 !important; color: #cfd3ec !important; } html.theme-dark .dropdown-item { color: #cfd3ec !important; } html.theme-dark .dropdown-item:hover, html.theme-dark .dropdown-item:focus { background-color: #2f3048 !important; color: #fff !important; } html.theme-dark .list-group-item { border-color: #3d3d57 !important; } html.theme-dark .accordion-button { border-color: #3d3d57 !important; } html.theme-dark .accordion-button:not(.collapsed) { background-color: #2f3048 !important; color: #fff !important; } /* Nav-tabs bar bottom border in dark */ html.theme-dark .nav-tabs { border-bottom-color: #44445f !important; } /* Inputs autofilled by Chrome shouldn't flash white */ html.theme-dark input:-webkit-autofill, html.theme-dark textarea:-webkit-autofill, html.theme-dark select:-webkit-autofill { -webkit-text-fill-color: #dfe2f5 !important; -webkit-box-shadow: 0 0 0 1000px #2f3048 inset !important; } /* Muted/secondary text that must stay readable (>= AA on #2b2b40) */ html.theme-dark .text-muted, html.theme-dark .text-secondary, html.theme-dark small { color: #9296b8 !important; } /* ===================================================================== * White-leak sweep — anything still painted white in dark mode becomes * #1b1b29 so light text stays readable. * Rule: white bg (+ would-be light text) -> bg #1b1b29. * ===================================================================== */ /* 1) Inline white backgrounds set directly on an element's style attribute * (chart tooltips, stray widgets, etc.). Email-template previews are the * only side effect, and the emails themselves are unaffected. */ html.theme-dark [style*="background:#fff"], html.theme-dark [style*="background: #fff"], html.theme-dark [style*="background:#FFF"], html.theme-dark [style*="background: #FFF"], html.theme-dark [style*="background-color:#fff"], html.theme-dark [style*="background-color: #fff"], html.theme-dark [style*="background-color:#FFF"], html.theme-dark [style*="background-color: #FFF"], html.theme-dark [style*="background:white"], html.theme-dark [style*="background: white"], html.theme-dark [style*="background-color:white"], html.theme-dark [style*="background-color: white"] { background-color: #1b1b29 !important; color: #cfd3ec !important; } /* 2) FullCalendar (appointments / leave / task calendars render white cells) */ html.theme-dark .fc, html.theme-dark .fc .fc-scrollgrid, html.theme-dark .fc-theme-standard td, html.theme-dark .fc-theme-standard th, html.theme-dark .fc .fc-daygrid-day, html.theme-dark .fc .fc-col-header-cell, html.theme-dark .fc-list, html.theme-dark .fc-list-table, html.theme-dark .fc-list-table td { background-color: #1b1b29 !important; border-color: #3d3d57 !important; color: #cfd3ec !important; } html.theme-dark .fc .fc-daygrid-day.fc-day-today, html.theme-dark .fc .fc-timegrid-col.fc-day-today { background-color: #26263c !important; } html.theme-dark .fc a, html.theme-dark .fc .fc-col-header-cell-cushion, html.theme-dark .fc .fc-daygrid-day-number, html.theme-dark .fc .fc-list-day-text, html.theme-dark .fc .fc-list-event-title a, html.theme-dark .fc .fc-toolbar-title { color: #dfe2f5 !important; } html.theme-dark .fc-theme-standard .fc-list-day-cushion { background-color: #30314a !important; } html.theme-dark .fc-list-event:hover td { background-color: #2b2b40 !important; } html.theme-dark .fc .fc-button { background-color: #2f3048 !important; border-color: #44445f !important; color: #cfd3ec !important; } html.theme-dark .fc .fc-button-primary:not(:disabled).fc-button-active, html.theme-dark .fc .fc-button-primary:not(:disabled):hover { background-color: #696cff !important; border-color: #696cff !important; color: #fff !important; } /* 3) Dropzone file-upload areas */ html.theme-dark .dropzone, html.theme-dark .dz-preview .dz-image { background-color: #1b1b29 !important; border-color: #44445f !important; color: #cfd3ec !important; } html.theme-dark .dropzone .dz-message, html.theme-dark .dropzone .dz-message .note { color: #9296b8 !important; } /* 4) Modal header/footer + any remaining well/inset panels */ html.theme-dark .modal-header, html.theme-dark .modal-footer, html.theme-dark .well, html.theme-dark .bg-body, html.theme-dark .bg-body-tertiary { background-color: #1b1b29 !important; border-color: #44445f !important; color: #cfd3ec !important; } /* ===================================================================== * Full-page audit — app & vendor light surfaces still leaking in dark mode. * (theme-dark.css now loads LAST, so these reliably override vendor CSS.) * ===================================================================== */ /* Activity/timeline event cards (custom.css paints them white). The small timeline point/dot is left light on purpose — it reads fine on a dark line. */ html.theme-dark .timeline .timeline-item .timeline-event { background-color: #1b1b29 !important; color: #cfd3ec !important; } html.theme-dark .timeline .timeline-item .timeline-event::before { border-right-color: #1b1b29 !important; } html.theme-dark .timeline .timeline-item .timeline-event::after { border-left-color: #1b1b29 !important; } /* Comment action buttons & attachment previews */ html.theme-dark .comment-body button { background-color: #2f3048 !important; color: #cfd3ec !important; border-color: #44445f !important; } html.theme-dark .attachment-preview { background-color: #1b1b29 !important; color: #cfd3ec !important; border-color: #44445f !important; } /* Sticky table header/footer */ html.theme-dark .fixed-header, html.theme-dark .fixed-footer { background: #1b1b29 !important; color: #cfd3ec !important; } /* @mention autocomplete (tribute.js) */ html.theme-dark .tribute-container { background-color: #1b1b29 !important; border: 1px solid #44445f !important; color: #cfd3ec !important; } html.theme-dark .tribute-container li { color: #cfd3ec !important; } html.theme-dark .tribute-container li.highlight, html.theme-dark .tribute-container li:hover { background-color: #2f3048 !important; color: #fff !important; } /* intl-tel-input country dropdown */ html.theme-dark .iti__dropdown-content, html.theme-dark .iti__country-list { background-color: #1b1b29 !important; color: #cfd3ec !important; border-color: #44445f !important; } html.theme-dark .iti__country.iti__highlight, html.theme-dark .iti__country:hover { background-color: #2f3048 !important; } html.theme-dark .iti__dial-code { color: #9296b8 !important; } /* Bootstrap datetimepicker dropdown */ html.theme-dark .bootstrap-datetimepicker-widget.dropdown-menu { background-color: #1b1b29 !important; color: #cfd3ec !important; } html.theme-dark .bootstrap-datetimepicker-widget td, html.theme-dark .bootstrap-datetimepicker-widget th { color: #cfd3ec !important; } html.theme-dark .bootstrap-datetimepicker-widget td.day:hover, html.theme-dark .bootstrap-datetimepicker-widget th:hover, html.theme-dark .bootstrap-datetimepicker-widget td span:hover { background-color: #2f3048 !important; } html.theme-dark .bootstrap-datetimepicker-widget td.active, html.theme-dark .bootstrap-datetimepicker-widget td.active:hover, html.theme-dark .bootstrap-datetimepicker-widget td span.active { background-color: #696cff !important; color: #fff !important; } html.theme-dark .bootstrap-datetimepicker-widget td.old, html.theme-dark .bootstrap-datetimepicker-widget td.new { color: #6f739a !important; } /* Kanban board columns & jsMind nodes (page-specific boards) */ html.theme-dark .kanban-column { background: #17171f !important; } html.theme-dark jmnode { background-color: #2b2b40 !important; color: #dfe2f5 !important; border-color: #44445f !important; } html.theme-dark jmnode.selected { background-color: #696cff !important; color: #fff !important; }