/** * Dark Mode – Back Office * Load AFTER theme-elegant.css. Rules are inert unless . * * Strategy: theme-elegant.css drives the whole UI through CSS custom * properties, so the bulk of dark mode is just redefining those variables. * The remaining blocks fix components that ship hardcoded light colors * (Bootstrap forms/dropdowns/modals/tables, DataTables, Select2). * * Direction-agnostic (works for both LTR and RTL). */ /* ========== 1. Redefine the elegant palette for dark ========== */ html.theme-dark { color-scheme: dark; --elegant-sidebar-bg: #111827; --elegant-sidebar-hover: #1f2937; --elegant-sidebar-active: #030712; --elegant-sidebar-text: #cbd5e1; --elegant-sidebar-text-active: #f8fafc; --elegant-accent: #14b8a6; --elegant-accent-hover: #0d9488; --elegant-accent-light: rgba(20, 184, 166, 0.16); --elegant-surface: #0f172a; /* page background */ --elegant-card-bg: #1e293b; /* cards, topbar, modals */ --elegant-card-border: #334155; --elegant-text: #e2e8f0; --elegant-text-muted: #94a3b8; --elegant-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --elegant-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.40); --elegant-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.50), 0 4px 6px -4px rgba(0, 0, 0, 0.45); /* Field background a touch darker than cards for depth */ --dark-field-bg: #0b1220; } /* Sidebar already dark in light mode — deepen it so it reads distinctly against the now-dark page/cards. */ html.theme-dark .nav-bar-holder { background: linear-gradient(180deg, #111827 0%, #030712 100%) !important; } /* ========== 2. Bootstrap surfaces & utilities ========== */ html.theme-dark .bg-white, html.theme-dark .bg-light { background-color: var(--elegant-card-bg) !important; } html.theme-dark .text-dark, html.theme-dark .text-black, html.theme-dark .text-body { color: var(--elegant-text) !important; } html.theme-dark .text-muted, html.theme-dark .text-secondary { color: var(--elegant-text-muted) !important; } html.theme-dark .border, html.theme-dark .border-top, html.theme-dark .border-bottom, html.theme-dark .border-start, html.theme-dark .border-end, html.theme-dark .border-left, html.theme-dark .border-right { border-color: var(--elegant-card-border) !important; } html.theme-dark hr { border-color: var(--elegant-card-border); opacity: 0.5; } /* ========== 3. Dropdowns ========== */ html.theme-dark .dropdown-menu { background-color: var(--elegant-card-bg); border-color: var(--elegant-card-border); color: var(--elegant-text); box-shadow: var(--elegant-shadow-lg); } html.theme-dark .dropdown-item { color: var(--elegant-text); } html.theme-dark .dropdown-item:hover, html.theme-dark .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06); color: var(--elegant-sidebar-text-active); } html.theme-dark .dropdown-item.active, html.theme-dark .dropdown-item:active { background-color: var(--elegant-accent); color: #fff; } html.theme-dark .dropdown-divider { border-color: var(--elegant-card-border); } html.theme-dark .dropdown-item-text { color: var(--elegant-text-muted); } /* ========== 4. Form controls ========== */ html.theme-dark .form-control, html.theme-dark .form-select, html.theme-dark textarea, html.theme-dark select, html.theme-dark input[type="text"], html.theme-dark input[type="number"], html.theme-dark input[type="email"], html.theme-dark input[type="password"], html.theme-dark input[type="search"], html.theme-dark input[type="date"], html.theme-dark input[type="tel"], html.theme-dark .input-group-text { background-color: var(--dark-field-bg); border-color: var(--elegant-card-border); color: var(--elegant-text); } html.theme-dark .form-control::placeholder { color: var(--elegant-text-muted); opacity: 1; } html.theme-dark .form-control:focus, html.theme-dark .form-select:focus, html.theme-dark textarea:focus { background-color: var(--dark-field-bg); color: var(--elegant-text); border-color: var(--elegant-accent); box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.25); } html.theme-dark .form-control:disabled, html.theme-dark .form-control[readonly] { background-color: #0a0f1a; color: var(--elegant-text-muted); } /* Light chevron for selects (default SVG is dark and vanishes on dark bg) */ html.theme-dark .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); } html.theme-dark .form-check-input { background-color: var(--dark-field-bg); border-color: var(--elegant-card-border); } html.theme-dark .form-check-input:checked { background-color: var(--elegant-accent); border-color: var(--elegant-accent); } /* ========== 5. Tables (Bootstrap 5 CSS-var driven) ========== */ html.theme-dark .table { --bs-table-bg: transparent; --bs-table-color: var(--elegant-text); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-striped-color: var(--elegant-text); --bs-table-hover-bg: rgba(255, 255, 255, 0.06); --bs-table-hover-color: var(--elegant-text); --bs-table-border-color: var(--elegant-card-border); color: var(--elegant-text); border-color: var(--elegant-card-border); } html.theme-dark .table > :not(caption) > * > * { border-color: var(--elegant-card-border); } /* ========== 6. Modals ========== */ html.theme-dark .modal-content { background-color: var(--elegant-card-bg); color: var(--elegant-text); border-color: var(--elegant-card-border); } html.theme-dark .modal-header, html.theme-dark .modal-footer { border-color: var(--elegant-card-border); } html.theme-dark .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } /* ========== 7. List groups, tabs, pagination ========== */ html.theme-dark .list-group-item { background-color: var(--elegant-card-bg); border-color: var(--elegant-card-border); color: var(--elegant-text); } html.theme-dark .nav-tabs { border-color: var(--elegant-card-border); } html.theme-dark .nav-tabs .nav-link { color: var(--elegant-text-muted); } html.theme-dark .nav-tabs .nav-link.active { background-color: var(--elegant-card-bg); border-color: var(--elegant-card-border) var(--elegant-card-border) var(--elegant-card-bg); color: var(--elegant-text); } html.theme-dark .page-link { background-color: var(--elegant-card-bg); border-color: var(--elegant-card-border); color: var(--elegant-text); } html.theme-dark .page-link:hover { background-color: rgba(255, 255, 255, 0.06); color: var(--elegant-sidebar-text-active); } html.theme-dark .page-item.disabled .page-link { background-color: var(--elegant-card-bg); color: var(--elegant-text-muted); } /* ========== 8. DataTables controls ========== */ html.theme-dark .dataTables_wrapper .dataTables_filter input, html.theme-dark .dataTables_wrapper .dataTables_length select { background-color: var(--dark-field-bg); border-color: var(--elegant-card-border); color: var(--elegant-text); } html.theme-dark .dataTables_wrapper .dataTables_info, html.theme-dark .dataTables_wrapper .dataTables_filter, html.theme-dark .dataTables_wrapper .dataTables_length, html.theme-dark .dataTables_wrapper .dataTables_processing { color: var(--elegant-text) !important; } html.theme-dark .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--elegant-text) !important; } html.theme-dark .dataTables_wrapper .dataTables_processing { background-color: var(--elegant-card-bg); } /* ========== 9. Select2 ========== */ html.theme-dark .select2-container--default .select2-selection--single, html.theme-dark .select2-container--default .select2-selection--multiple, html.theme-dark .select2-dropdown { background-color: var(--dark-field-bg); border-color: var(--elegant-card-border); color: var(--elegant-text); } html.theme-dark .select2-container--default .select2-selection__rendered, html.theme-dark .select2-results__option { color: var(--elegant-text); } html.theme-dark .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--elegant-accent); color: #fff; } html.theme-dark .select2-search__field { background-color: var(--dark-field-bg) !important; color: var(--elegant-text); border-color: var(--elegant-card-border); } html.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--elegant-accent-light); border-color: var(--elegant-card-border); color: var(--elegant-text); } /* ========== 10. Date/time picker ========== */ html.theme-dark .xdsoft_datetimepicker { background: var(--elegant-card-bg) !important; border-color: var(--elegant-card-border) !important; color: var(--elegant-text); box-shadow: var(--elegant-shadow-lg) !important; } html.theme-dark .xdsoft_datetimepicker .xdsoft_calendar td, html.theme-dark .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time { background: var(--dark-field-bg) !important; color: var(--elegant-text) !important; } html.theme-dark .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, html.theme-dark .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time.xdsoft_current { background: var(--elegant-accent) !important; color: #fff !important; } /* ========== 11. Misc ========== */ html.theme-dark .toggle_mobile, html.theme-dark .topper-nav-togller { color: var(--elegant-text); } html.theme-dark code { color: #f9a8d4; } /* Subtle dark scrollbars */ html.theme-dark ::-webkit-scrollbar { width: 10px; height: 10px; } html.theme-dark ::-webkit-scrollbar-track { background: var(--dark-field-bg); } html.theme-dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; } html.theme-dark ::-webkit-scrollbar-thumb:hover { background: #475569; } /* ========== 12. Theme toggle button ========== */ .theme-toggle-btn { cursor: pointer; } .theme-toggle-btn .theme-icon-dark { display: none; } html.theme-dark .theme-toggle-btn .theme-icon-light { display: none; } html.theme-dark .theme-toggle-btn .theme-icon-dark { display: inline-block; }