/* ============================================================================= Accountix CRM Admin Template - Dark Mode Stylesheet ============================================================================= Activates when [data-theme="dark"] is set on the element. Color palette: Body bg: #0F172A Card bg: #1E293B Border: #334155 Text primary: #E2E8F0 Text secondary:#94A3B8 Text muted: #64748B Input bg: #0F172A Table stripe: #1a2537 Primary: #818CF8 Success: #34D399 Warning: #FBBF24 Danger: #F87171 Info: #22D3EE ========================================================================== */ /* --------------------------------------------------------------------------- 1. CSS Custom Properties (Design Tokens) ------------------------------------------------------------------------ */ [data-theme="dark"] { --ax-body-bg: #0F172A; --ax-card-bg: #1E293B; --ax-sidebar-bg: #1E293B; --ax-topbar-bg: #1E293B; --ax-border-color: #334155; --ax-text-primary: #E2E8F0; --ax-text-secondary: #94A3B8; --ax-text-muted: #64748B; --ax-input-bg: #0F172A; --ax-input-border: #334155; --ax-table-stripe-bg: #1a2537; --ax-dropdown-bg: #1E293B; --ax-hover-bg: #253347; --ax-active-bg: #2d3d54; --ax-shadow-color: rgba(0, 0, 0, 0.4); --ax-primary: #818CF8; --ax-success: #34D399; --ax-warning: #FBBF24; --ax-danger: #F87171; --ax-info: #22D3EE; --ax-primary-soft: rgba(129, 140, 248, 0.15); --ax-success-soft: rgba(52, 211, 153, 0.15); --ax-warning-soft: rgba(251, 191, 36, 0.15); --ax-danger-soft: rgba(248, 113, 113, 0.15); --ax-info-soft: rgba(34, 211, 238, 0.15); --ax-elevated-bg: #253347; /* Bootstrap 5.3 CSS variable overrides */ --bs-body-bg: #0F172A; --bs-body-color: #E2E8F0; --bs-border-color: #334155; --bs-tertiary-bg: #1a2537; --bs-secondary-bg: #1E293B; --bs-emphasis-color: #F1F5F9; --bs-heading-color: #F1F5F9; --bs-link-color: #818CF8; --bs-link-hover-color: #a5b4fc; --bs-code-color: #F0ABFC; --bs-primary: #818CF8; --bs-primary-rgb: 129, 140, 248; --bs-success-rgb: 52, 211, 153; --bs-warning-rgb: 251, 191, 36; --bs-danger-rgb: 248, 113, 113; --bs-info-rgb: 34, 211, 238; } /* --------------------------------------------------------------------------- 2. Body & HTML Base ------------------------------------------------------------------------ */ [data-theme="dark"] body, [data-theme="dark"] { background-color: #0F172A; color: #E2E8F0; } [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: #F1F5F9; } [data-theme="dark"] p { color: #CBD5E1; } [data-theme="dark"] a:not(.btn) { color: #818CF8; } [data-theme="dark"] a:not(.btn):hover { color: #a5b4fc; } [data-theme="dark"] hr { border-color: #334155; opacity: 0.5; } [data-theme="dark"] code { color: #F0ABFC; } [data-theme="dark"] pre { background-color: #0F172A; border: 1px solid #334155; color: #E2E8F0; } [data-theme="dark"] mark, [data-theme="dark"] .mark { background-color: rgba(251, 191, 36, 0.2); color: #FBBF24; } /* --------------------------------------------------------------------------- 3. Sidebar ------------------------------------------------------------------------ */ [data-theme="dark"] .sidebar, [data-theme="dark"] .app-sidebar, [data-theme="dark"] .side-nav, [data-theme="dark"] #sidebar, [data-theme="dark"] .left-sidebar { background-color: #1E293B; border-right-color: #334155; box-shadow: 1px 0 0 0 #334155; } [data-theme="dark"] .sidebar .nav-link, [data-theme="dark"] .app-sidebar .nav-link, [data-theme="dark"] .side-nav .nav-link { color: #94A3B8; } [data-theme="dark"] .sidebar .nav-link:hover, [data-theme="dark"] .app-sidebar .nav-link:hover, [data-theme="dark"] .side-nav .nav-link:hover { color: #E2E8F0; background-color: #253347; } [data-theme="dark"] .sidebar .nav-link.active, [data-theme="dark"] .app-sidebar .nav-link.active, [data-theme="dark"] .side-nav .nav-link.active { color: #818CF8; background-color: rgba(129, 140, 248, 0.12); } [data-theme="dark"] .sidebar .nav-link.active::before, [data-theme="dark"] .app-sidebar .nav-link.active::before { background-color: #818CF8; } [data-theme="dark"] .sidebar .sidebar-header, [data-theme="dark"] .sidebar .sidebar-brand, [data-theme="dark"] .app-sidebar .sidebar-header { border-bottom-color: #334155; } [data-theme="dark"] .sidebar .sidebar-heading, [data-theme="dark"] .sidebar .menu-title, [data-theme="dark"] .sidebar .nav-section-title { color: #64748B; } [data-theme="dark"] .sidebar .sidebar-footer { border-top-color: #334155; background-color: #1E293B; } [data-theme="dark"] .sidebar .nav-link i, [data-theme="dark"] .sidebar .nav-link svg, [data-theme="dark"] .sidebar .nav-link .feather { color: #64748B; } [data-theme="dark"] .sidebar .nav-link:hover i, [data-theme="dark"] .sidebar .nav-link:hover svg, [data-theme="dark"] .sidebar .nav-link:hover .feather { color: #94A3B8; } [data-theme="dark"] .sidebar .nav-link.active i, [data-theme="dark"] .sidebar .nav-link.active svg, [data-theme="dark"] .sidebar .nav-link.active .feather { color: #818CF8; } [data-theme="dark"] .sidebar-divider, [data-theme="dark"] .sidebar hr { border-color: #334155; } /* Sidebar sub-menu */ [data-theme="dark"] .sidebar .collapse .nav-link, [data-theme="dark"] .sidebar .submenu .nav-link { color: #94A3B8; } [data-theme="dark"] .sidebar .collapse .nav-link:hover, [data-theme="dark"] .sidebar .submenu .nav-link:hover { color: #E2E8F0; } /* Sidebar scrollbar */ [data-theme="dark"] .sidebar .ps__rail-y, [data-theme="dark"] .sidebar .ps__thumb-y { background-color: #334155 !important; } /* --------------------------------------------------------------------------- 4. Topbar / Navbar ------------------------------------------------------------------------ */ [data-theme="dark"] .topbar, [data-theme="dark"] .app-topbar, [data-theme="dark"] .top-navbar, [data-theme="dark"] #topbar, [data-theme="dark"] .navbar-custom { background-color: #1E293B; border-bottom-color: #334155; box-shadow: 0 1px 0 0 #334155; } [data-theme="dark"] .topbar .nav-link, [data-theme="dark"] .app-topbar .nav-link, [data-theme="dark"] .navbar-custom .nav-link { color: #94A3B8; } [data-theme="dark"] .topbar .nav-link:hover, [data-theme="dark"] .app-topbar .nav-link:hover { color: #E2E8F0; } [data-theme="dark"] .topbar .nav-link i, [data-theme="dark"] .topbar .nav-link svg, [data-theme="dark"] .topbar .nav-link .feather { color: #94A3B8; } [data-theme="dark"] .topbar .nav-link:hover i, [data-theme="dark"] .topbar .nav-link:hover svg, [data-theme="dark"] .topbar .nav-link:hover .feather { color: #E2E8F0; } [data-theme="dark"] .navbar-brand, [data-theme="dark"] .topbar .brand-text { color: #F1F5F9; } /* Hamburger / toggler */ [data-theme="dark"] .navbar-toggler { border-color: #334155; } [data-theme="dark"] .navbar-toggler-icon { filter: invert(1) grayscale(100%) brightness(200%); } /* Topbar buttons and dropdowns */ [data-theme="dark"] .topbar-btn { color: #94A3B8; } [data-theme="dark"] .topbar-btn:hover { color: #E2E8F0; background-color: #253347; } [data-theme="dark"] .topbar-search .form-control { background-color: #0F172A; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .topbar-search .search-shortcut { background-color: #0F172A; border-color: #334155; color: #64748B; } [data-theme="dark"] .notification-avatar { opacity: 0.9; } [data-theme="dark"] .notification-content .notification-text { color: #CBD5E1; } [data-theme="dark"] .notification-content .notification-time { color: #64748B; } [data-theme="dark"] .user-name { color: #F1F5F9; } [data-theme="dark"] .user-role { color: #64748B; } [data-theme="dark"] .user-avatar { opacity: 0.9; } [data-theme="dark"] .user-dropdown-header { border-bottom-color: #334155; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(124, 58, 237, 0.06)); } [data-theme="dark"] .user-dropdown-info h6 { color: #F1F5F9; } [data-theme="dark"] .user-dropdown-info span { color: #64748B; } [data-theme="dark"] .user-dropdown-stats { border-bottom-color: #334155; } [data-theme="dark"] .user-stat-item + .user-stat-item { border-left-color: #334155; } [data-theme="dark"] .user-stat-value { color: #F1F5F9; } [data-theme="dark"] .user-stat-label { color: #64748B; } [data-theme="dark"] .user-dropdown .dropdown-logout { background: rgba(239, 68, 68, 0.1); color: #F87171; } [data-theme="dark"] .user-dropdown .dropdown-logout:hover { background: #EF4444; color: #FFF; } /* Settings panel offcanvas */ [data-theme="dark"] .settings-section { border-bottom-color: #334155; } [data-theme="dark"] .settings-section-title { color: #F1F5F9; } /* Footer links */ [data-theme="dark"] .footer-link { color: #64748B; } [data-theme="dark"] .footer-link:hover { color: #818CF8; } [data-theme="dark"] .footer-copyright { color: #64748B; } /* Page header */ [data-theme="dark"] .page-subtitle { color: #94A3B8; } /* Settings toggle button */ [data-theme="dark"] .settings-toggle-btn { background-color: #818CF8; } /* Nav section headers in sidebar */ [data-theme="dark"] .nav-section-header { color: #475569; } /* --------------------------------------------------------------------------- 5. Cards ------------------------------------------------------------------------ */ [data-theme="dark"] .card { background-color: #1E293B; border-color: #334155; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); color: #E2E8F0; } [data-theme="dark"] .card-header { background-color: #1E293B; border-bottom-color: #334155; color: #F1F5F9; } [data-theme="dark"] .card-footer { background-color: #1E293B; border-top-color: #334155; } [data-theme="dark"] .card-body { color: #E2E8F0; } [data-theme="dark"] .card-title { color: #F1F5F9; } [data-theme="dark"] .card-subtitle { color: #94A3B8; } [data-theme="dark"] .card-text { color: #CBD5E1; } [data-theme="dark"] .card-link { color: #818CF8; } [data-theme="dark"] .card-link:hover { color: #a5b4fc; } /* Stats cards with gradient overlays */ [data-theme="dark"] .card.bg-primary, [data-theme="dark"] .card.bg-success, [data-theme="dark"] .card.bg-warning, [data-theme="dark"] .card.bg-danger, [data-theme="dark"] .card.bg-info { border-color: transparent; } [data-theme="dark"] .card .card-img-overlay { color: #F1F5F9; } [data-theme="dark"] .stats-card, [data-theme="dark"] .stat-card, [data-theme="dark"] .widget-card { background-color: #1E293B; border-color: #334155; } [data-theme="dark"] .stats-card .stats-value, [data-theme="dark"] .stat-card .stat-value, [data-theme="dark"] .stat-card-value { color: #F1F5F9; } [data-theme="dark"] .stats-card .stats-label, [data-theme="dark"] .stat-card .stat-label, [data-theme="dark"] .stat-card-label { color: #94A3B8; } [data-theme="dark"] .stat-card-icon { opacity: 0.85; } [data-theme="dark"] .stat-card-change { color: inherit; } [data-theme="dark"] .stat-card-sparkline { opacity: 0.8; } /* --------------------------------------------------------------------------- 6. Tables ------------------------------------------------------------------------ */ [data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: #E2E8F0; --bs-table-border-color: #334155; --bs-table-striped-bg: #1a2537; --bs-table-striped-color: #E2E8F0; --bs-table-hover-bg: #253347; --bs-table-hover-color: #E2E8F0; --bs-table-active-bg: #2d3d54; --bs-table-active-color: #E2E8F0; color: #E2E8F0; border-color: #334155; } [data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; border-bottom-color: #334155; color: #E2E8F0; box-shadow: none; } [data-theme="dark"] .table > thead { border-bottom-color: #334155; } [data-theme="dark"] .table > thead > tr > th { background-color: #0F172A; border-bottom-color: #334155; color: #94A3B8; font-weight: 600; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #1a2537; color: #E2E8F0; } [data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: #253347; color: #E2E8F0; } [data-theme="dark"] .table-bordered > :not(caption) > * > * { border-color: #334155; } [data-theme="dark"] .table-dark { --bs-table-bg: #0F172A; --bs-table-border-color: #334155; } [data-theme="dark"] .table-light { --bs-table-bg: #1E293B; --bs-table-border-color: #334155; --bs-table-color: #E2E8F0; } /* DataTables integration */ [data-theme="dark"] .dataTables_wrapper .dataTables_length select, [data-theme="dark"] .dataTables_wrapper .dataTables_filter input { background-color: #0F172A; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .dataTables_wrapper .dataTables_info { color: #94A3B8; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { background-color: #1E293B; border-color: #334155; color: #94A3B8 !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background-color: #253347; border-color: #334155; color: #E2E8F0 !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current { background-color: #818CF8; border-color: #818CF8; color: #fff !important; } /* --------------------------------------------------------------------------- 7. Forms ------------------------------------------------------------------------ */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #0F172A; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .form-control::placeholder { color: #64748B; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #0F172A; border-color: #818CF8; color: #E2E8F0; box-shadow: 0 0 0 0.25rem rgba(129, 140, 248, 0.25); } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly], [data-theme="dark"] .form-select:disabled { background-color: #1a2537; border-color: #334155; color: #64748B; } [data-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 5 6 6 6-6'/%3e%3c/svg%3e"); } [data-theme="dark"] .form-label { color: #E2E8F0; } [data-theme="dark"] .form-text { color: #64748B; } [data-theme="dark"] .form-check-input { background-color: #0F172A; border-color: #334155; } [data-theme="dark"] .form-check-input:checked { background-color: #818CF8; border-color: #818CF8; } [data-theme="dark"] .form-check-input:focus { box-shadow: 0 0 0 0.25rem rgba(129, 140, 248, 0.25); border-color: #818CF8; } [data-theme="dark"] .form-check-label { color: #E2E8F0; } [data-theme="dark"] .form-switch .form-check-input { background-color: #334155; } [data-theme="dark"] .form-switch .form-check-input:checked { background-color: #818CF8; } [data-theme="dark"] .form-floating > .form-control, [data-theme="dark"] .form-floating > .form-select { background-color: #0F172A; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .form-floating > label { color: #64748B; } [data-theme="dark"] .form-range::-webkit-slider-runnable-track { background-color: #334155; } [data-theme="dark"] .form-range::-webkit-slider-thumb { background-color: #818CF8; } [data-theme="dark"] .input-group-text { background-color: #1E293B; border-color: #334155; color: #94A3B8; } [data-theme="dark"] .form-control.is-invalid, [data-theme="dark"] .was-validated .form-control:invalid { border-color: #F87171; } [data-theme="dark"] .form-control.is-valid, [data-theme="dark"] .was-validated .form-control:valid { border-color: #34D399; } [data-theme="dark"] .invalid-feedback { color: #F87171; } [data-theme="dark"] .valid-feedback { color: #34D399; } /* --------------------------------------------------------------------------- 8. Modals ------------------------------------------------------------------------ */ [data-theme="dark"] .modal-content { background-color: #1E293B; border-color: #334155; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); color: #E2E8F0; } [data-theme="dark"] .modal-header { border-bottom-color: #334155; } [data-theme="dark"] .modal-header .modal-title { color: #F1F5F9; } [data-theme="dark"] .modal-footer { border-top-color: #334155; } [data-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .modal-backdrop { background-color: rgba(0, 0, 0, 0.65); } /* --------------------------------------------------------------------------- 9. Dropdowns ------------------------------------------------------------------------ */ [data-theme="dark"] .dropdown-menu { background-color: #1E293B; border-color: #334155; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); color: #E2E8F0; } [data-theme="dark"] .dropdown-item { color: #CBD5E1; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: #253347; color: #E2E8F0; } [data-theme="dark"] .dropdown-item.active, [data-theme="dark"] .dropdown-item:active { background-color: #818CF8; color: #fff; } [data-theme="dark"] .dropdown-item.disabled, [data-theme="dark"] .dropdown-item:disabled { color: #64748B; } [data-theme="dark"] .dropdown-divider { border-top-color: #334155; } [data-theme="dark"] .dropdown-header { color: #94A3B8; } /* Notification dropdown */ [data-theme="dark"] .notification-list .dropdown-item, [data-theme="dark"] .notification-dropdown .dropdown-item { border-bottom-color: #334155; } [data-theme="dark"] .notification-list .notification-title, [data-theme="dark"] .notification-dropdown .notification-title { color: #E2E8F0; } [data-theme="dark"] .notification-list .notification-text, [data-theme="dark"] .notification-dropdown .notification-text { color: #94A3B8; } /* Topbar dropdown panels - dark mode */ [data-theme="dark"] .topbar-dropdown > .dropdown-menu { border-color: #334155; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .topbar-dropdown .dropdown-header { border-bottom-color: #334155; } [data-theme="dark"] .topbar-dropdown .dropdown-footer { border-top-color: #334155; background: rgba(15, 23, 42, 0.5); } /* Messages dropdown - dark mode */ [data-theme="dark"] .message-item.unread { background: rgba(99, 102, 241, 0.06); border-left-color: #818CF8; } [data-theme="dark"] .message-item:hover { background: rgba(99, 102, 241, 0.08); } [data-theme="dark"] .message-sender { color: #F1F5F9; } [data-theme="dark"] .message-time { color: #64748B; } [data-theme="dark"] .message-preview { color: #94A3B8; } [data-theme="dark"] .message-item.unread .message-preview { color: #CBD5E1; } [data-theme="dark"] .message-avatar .online-dot { border-color: #1E293B; } [data-theme="dark"] .message-avatar .offline-dot { border-color: #1E293B; background: #475569; } [data-theme="dark"] .messages-dropdown .compose-btn { color: #818CF8; } [data-theme="dark"] .messages-dropdown .compose-btn:hover { background: rgba(99, 102, 241, 0.1); } /* Notification item dark mode tweaks */ [data-theme="dark"] .notification-item.unread { background: rgba(99, 102, 241, 0.06); border-left-color: #818CF8; } [data-theme="dark"] .notification-item:hover { background: rgba(99, 102, 241, 0.08); } /* --------------------------------------------------------------------------- 10. Buttons - Soft / Light Variants ------------------------------------------------------------------------ */ [data-theme="dark"] .btn-light { background-color: #253347; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .btn-light:hover { background-color: #2d3d54; border-color: #475569; color: #F1F5F9; } [data-theme="dark"] .btn-outline-light { border-color: #334155; color: #94A3B8; } [data-theme="dark"] .btn-outline-light:hover { background-color: #253347; border-color: #475569; color: #E2E8F0; } [data-theme="dark"] .btn-dark { background-color: #E2E8F0; border-color: #E2E8F0; color: #0F172A; } [data-theme="dark"] .btn-dark:hover { background-color: #F1F5F9; border-color: #F1F5F9; color: #0F172A; } /* Soft button variants */ [data-theme="dark"] .btn-soft-primary, [data-theme="dark"] .btn-primary-soft { background-color: rgba(129, 140, 248, 0.15); color: #818CF8; border-color: transparent; } [data-theme="dark"] .btn-soft-primary:hover, [data-theme="dark"] .btn-primary-soft:hover { background-color: rgba(129, 140, 248, 0.25); color: #a5b4fc; } [data-theme="dark"] .btn-soft-success, [data-theme="dark"] .btn-success-soft { background-color: rgba(52, 211, 153, 0.15); color: #34D399; border-color: transparent; } [data-theme="dark"] .btn-soft-success:hover, [data-theme="dark"] .btn-success-soft:hover { background-color: rgba(52, 211, 153, 0.25); color: #6EE7B7; } [data-theme="dark"] .btn-soft-danger, [data-theme="dark"] .btn-danger-soft { background-color: rgba(248, 113, 113, 0.15); color: #F87171; border-color: transparent; } [data-theme="dark"] .btn-soft-danger:hover, [data-theme="dark"] .btn-danger-soft:hover { background-color: rgba(248, 113, 113, 0.25); color: #FCA5A5; } [data-theme="dark"] .btn-soft-warning, [data-theme="dark"] .btn-warning-soft { background-color: rgba(251, 191, 36, 0.15); color: #FBBF24; border-color: transparent; } [data-theme="dark"] .btn-soft-warning:hover, [data-theme="dark"] .btn-warning-soft:hover { background-color: rgba(251, 191, 36, 0.25); color: #FCD34D; } [data-theme="dark"] .btn-soft-info, [data-theme="dark"] .btn-info-soft { background-color: rgba(34, 211, 238, 0.15); color: #22D3EE; border-color: transparent; } [data-theme="dark"] .btn-soft-info:hover, [data-theme="dark"] .btn-info-soft:hover { background-color: rgba(34, 211, 238, 0.25); color: #67E8F9; } [data-theme="dark"] .btn-soft-secondary, [data-theme="dark"] .btn-secondary-soft { background-color: rgba(148, 163, 184, 0.15); color: #94A3B8; border-color: transparent; } [data-theme="dark"] .btn-soft-secondary:hover, [data-theme="dark"] .btn-secondary-soft:hover { background-color: rgba(148, 163, 184, 0.25); color: #CBD5E1; } /* Close button */ [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* --------------------------------------------------------------------------- 11. Badges - Soft Variants ------------------------------------------------------------------------ */ [data-theme="dark"] .badge.bg-light { background-color: #253347 !important; color: #E2E8F0; } [data-theme="dark"] .badge.bg-dark { background-color: #E2E8F0 !important; color: #0F172A; } [data-theme="dark"] .badge-soft-primary, [data-theme="dark"] .badge.bg-primary-soft { background-color: rgba(129, 140, 248, 0.18) !important; color: #818CF8; } [data-theme="dark"] .badge-soft-success, [data-theme="dark"] .badge.bg-success-soft { background-color: rgba(52, 211, 153, 0.18) !important; color: #34D399; } [data-theme="dark"] .badge-soft-danger, [data-theme="dark"] .badge.bg-danger-soft { background-color: rgba(248, 113, 113, 0.18) !important; color: #F87171; } [data-theme="dark"] .badge-soft-warning, [data-theme="dark"] .badge.bg-warning-soft { background-color: rgba(251, 191, 36, 0.18) !important; color: #FBBF24; } [data-theme="dark"] .badge-soft-info, [data-theme="dark"] .badge.bg-info-soft { background-color: rgba(34, 211, 238, 0.18) !important; color: #22D3EE; } [data-theme="dark"] .badge-soft-secondary, [data-theme="dark"] .badge.bg-secondary-soft { background-color: rgba(148, 163, 184, 0.18) !important; color: #94A3B8; } /* --------------------------------------------------------------------------- 12. Tabs & Pills ------------------------------------------------------------------------ */ [data-theme="dark"] .nav-tabs { border-bottom-color: #334155; } [data-theme="dark"] .nav-tabs .nav-link { color: #94A3B8; } [data-theme="dark"] .nav-tabs .nav-link:hover, [data-theme="dark"] .nav-tabs .nav-link:focus { border-color: #334155 #334155 transparent; color: #E2E8F0; } [data-theme="dark"] .nav-tabs .nav-link.active, [data-theme="dark"] .nav-tabs .nav-item.show .nav-link { background-color: #1E293B; border-color: #334155 #334155 #1E293B; color: #818CF8; } [data-theme="dark"] .nav-pills .nav-link { color: #94A3B8; } [data-theme="dark"] .nav-pills .nav-link:hover { background-color: #253347; color: #E2E8F0; } [data-theme="dark"] .nav-pills .nav-link.active, [data-theme="dark"] .nav-pills .show > .nav-link { background-color: #818CF8; color: #fff; } [data-theme="dark"] .tab-content { color: #E2E8F0; } /* --------------------------------------------------------------------------- 13. Alerts ------------------------------------------------------------------------ */ [data-theme="dark"] .alert-primary { background-color: rgba(129, 140, 248, 0.15); border-color: rgba(129, 140, 248, 0.3); color: #a5b4fc; } [data-theme="dark"] .alert-success { background-color: rgba(52, 211, 153, 0.15); border-color: rgba(52, 211, 153, 0.3); color: #6EE7B7; } [data-theme="dark"] .alert-danger { background-color: rgba(248, 113, 113, 0.15); border-color: rgba(248, 113, 113, 0.3); color: #FCA5A5; } [data-theme="dark"] .alert-warning { background-color: rgba(251, 191, 36, 0.15); border-color: rgba(251, 191, 36, 0.3); color: #FCD34D; } [data-theme="dark"] .alert-info { background-color: rgba(34, 211, 238, 0.15); border-color: rgba(34, 211, 238, 0.3); color: #67E8F9; } [data-theme="dark"] .alert-secondary { background-color: rgba(148, 163, 184, 0.15); border-color: rgba(148, 163, 184, 0.3); color: #CBD5E1; } [data-theme="dark"] .alert-light { background-color: #253347; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .alert-dark { background-color: rgba(241, 245, 249, 0.1); border-color: rgba(241, 245, 249, 0.2); color: #F1F5F9; } [data-theme="dark"] .alert .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .alert a { color: inherit; text-decoration: underline; } /* --------------------------------------------------------------------------- 14. List Groups ------------------------------------------------------------------------ */ [data-theme="dark"] .list-group-item { background-color: #1E293B; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .list-group-item:hover { background-color: #253347; } [data-theme="dark"] .list-group-item.active { background-color: #818CF8; border-color: #818CF8; color: #fff; } [data-theme="dark"] .list-group-item.disabled, [data-theme="dark"] .list-group-item:disabled { background-color: #1a2537; color: #64748B; } [data-theme="dark"] .list-group-item-action:hover, [data-theme="dark"] .list-group-item-action:focus { background-color: #253347; color: #E2E8F0; } [data-theme="dark"] .list-group-item-primary { background-color: rgba(129, 140, 248, 0.15); color: #818CF8; } [data-theme="dark"] .list-group-item-success { background-color: rgba(52, 211, 153, 0.15); color: #34D399; } [data-theme="dark"] .list-group-item-danger { background-color: rgba(248, 113, 113, 0.15); color: #F87171; } [data-theme="dark"] .list-group-item-warning { background-color: rgba(251, 191, 36, 0.15); color: #FBBF24; } [data-theme="dark"] .list-group-item-info { background-color: rgba(34, 211, 238, 0.15); color: #22D3EE; } /* --------------------------------------------------------------------------- 15. Breadcrumbs ------------------------------------------------------------------------ */ [data-theme="dark"] .breadcrumb { background-color: transparent; } [data-theme="dark"] .breadcrumb-item { color: #94A3B8; } [data-theme="dark"] .breadcrumb-item a { color: #818CF8; } [data-theme="dark"] .breadcrumb-item a:hover { color: #a5b4fc; } [data-theme="dark"] .breadcrumb-item.active { color: #64748B; } [data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: #64748B; } /* --------------------------------------------------------------------------- 16. Pagination ------------------------------------------------------------------------ */ [data-theme="dark"] .page-link { background-color: #1E293B; border-color: #334155; color: #94A3B8; } [data-theme="dark"] .page-link:hover { background-color: #253347; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .page-link:focus { box-shadow: 0 0 0 0.25rem rgba(129, 140, 248, 0.25); } [data-theme="dark"] .page-item.active .page-link { background-color: #818CF8; border-color: #818CF8; color: #fff; } [data-theme="dark"] .page-item.disabled .page-link { background-color: #1a2537; border-color: #334155; color: #64748B; } /* --------------------------------------------------------------------------- 17. Progress Bars ------------------------------------------------------------------------ */ [data-theme="dark"] .progress { background-color: #0F172A; border: 1px solid #334155; } [data-theme="dark"] .progress-bar { color: #fff; } /* --------------------------------------------------------------------------- 18. Timeline ------------------------------------------------------------------------ */ [data-theme="dark"] .timeline, [data-theme="dark"] .activity-timeline { border-left-color: #334155; } [data-theme="dark"] .timeline-item, [data-theme="dark"] .activity-item { color: #E2E8F0; } [data-theme="dark"] .timeline-item::before, [data-theme="dark"] .activity-item::before { border-color: #334155; background-color: #1E293B; } [data-theme="dark"] .timeline-content, [data-theme="dark"] .activity-content { background-color: #1E293B; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .timeline-title, [data-theme="dark"] .activity-title { color: #F1F5F9; } [data-theme="dark"] .timeline-text, [data-theme="dark"] .activity-text { color: #94A3B8; } [data-theme="dark"] .timeline-time, [data-theme="dark"] .activity-time { color: #64748B; } /* --------------------------------------------------------------------------- 19. Kanban Board ------------------------------------------------------------------------ */ [data-theme="dark"] .kanban-board, [data-theme="dark"] .kanban-container { background-color: #0F172A; } [data-theme="dark"] .kanban-column, [data-theme="dark"] .kanban-board-column { background-color: #1a2537; border-color: #334155; border-radius: 0.5rem; } [data-theme="dark"] .kanban-column-header, [data-theme="dark"] .kanban-board-header { border-bottom-color: #334155; color: #F1F5F9; } [data-theme="dark"] .kanban-card, [data-theme="dark"] .kanban-item { background-color: #1E293B; border-color: #334155; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); color: #E2E8F0; } [data-theme="dark"] .kanban-card:hover, [data-theme="dark"] .kanban-item:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .kanban-card .card-title, [data-theme="dark"] .kanban-item .item-title { color: #F1F5F9; } [data-theme="dark"] .kanban-card .card-text, [data-theme="dark"] .kanban-item .item-text { color: #94A3B8; } /* Sortable ghost (drag state) */ [data-theme="dark"] .sortable-ghost { opacity: 0.5; background-color: #253347 !important; } /* --------------------------------------------------------------------------- 20. Email / Inbox ------------------------------------------------------------------------ */ [data-theme="dark"] .email-list, [data-theme="dark"] .inbox-list { border-color: #334155; } [data-theme="dark"] .email-item, [data-theme="dark"] .inbox-item { background-color: #1E293B; border-bottom-color: #334155; color: #E2E8F0; } [data-theme="dark"] .email-item:hover, [data-theme="dark"] .inbox-item:hover { background-color: #253347; } [data-theme="dark"] .email-item.active, [data-theme="dark"] .inbox-item.active { background-color: rgba(129, 140, 248, 0.1); } [data-theme="dark"] .email-item.unread, [data-theme="dark"] .inbox-item.unread { background-color: #0F172A; } [data-theme="dark"] .email-subject, [data-theme="dark"] .inbox-subject { color: #F1F5F9; } [data-theme="dark"] .email-sender, [data-theme="dark"] .inbox-sender { color: #E2E8F0; } [data-theme="dark"] .email-preview, [data-theme="dark"] .inbox-preview { color: #64748B; } [data-theme="dark"] .email-time, [data-theme="dark"] .inbox-time { color: #64748B; } [data-theme="dark"] .email-sidebar, [data-theme="dark"] .inbox-sidebar { background-color: #1E293B; border-right-color: #334155; } [data-theme="dark"] .email-detail, [data-theme="dark"] .inbox-detail { background-color: #1E293B; } [data-theme="dark"] .email-detail-header { border-bottom-color: #334155; } /* --------------------------------------------------------------------------- 21. Calendar (FullCalendar) ------------------------------------------------------------------------ */ [data-theme="dark"] .fc { --fc-border-color: #334155; --fc-page-bg-color: #1E293B; --fc-neutral-bg-color: #1a2537; --fc-list-event-hover-bg-color: #253347; --fc-today-bg-color: rgba(129, 140, 248, 0.08); --fc-event-bg-color: #818CF8; --fc-event-border-color: #818CF8; --fc-event-text-color: #fff; --fc-button-bg-color: #1E293B; --fc-button-border-color: #334155; --fc-button-text-color: #E2E8F0; --fc-button-hover-bg-color: #253347; --fc-button-hover-border-color: #475569; --fc-button-active-bg-color: #818CF8; --fc-button-active-border-color: #818CF8; } [data-theme="dark"] .fc .fc-col-header-cell { background-color: #0F172A; } [data-theme="dark"] .fc .fc-col-header-cell-cushion { color: #94A3B8; } [data-theme="dark"] .fc .fc-daygrid-day-number { color: #E2E8F0; } [data-theme="dark"] .fc .fc-day-today { background-color: rgba(129, 140, 248, 0.08) !important; } [data-theme="dark"] .fc .fc-toolbar-title { color: #F1F5F9; } [data-theme="dark"] .fc .fc-button { background-color: #1E293B; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .fc .fc-button:hover { background-color: #253347; } [data-theme="dark"] .fc .fc-button-active, [data-theme="dark"] .fc .fc-button:active { background-color: #818CF8 !important; border-color: #818CF8 !important; color: #fff !important; } [data-theme="dark"] .fc .fc-list { border-color: #334155; } [data-theme="dark"] .fc .fc-list-day-cushion { background-color: #0F172A; } [data-theme="dark"] .fc .fc-list-event:hover td { background-color: #253347; } /* --------------------------------------------------------------------------- 22. Text Utility Overrides ------------------------------------------------------------------------ */ [data-theme="dark"] .text-dark { color: #E2E8F0 !important; } [data-theme="dark"] .text-body { color: #E2E8F0 !important; } [data-theme="dark"] .text-muted { color: #64748B !important; } [data-theme="dark"] .text-secondary { color: #94A3B8 !important; } [data-theme="dark"] .text-black-50 { color: rgba(226, 232, 240, 0.5) !important; } [data-theme="dark"] .text-white-50 { color: rgba(255, 255, 255, 0.5) !important; } [data-theme="dark"] .text-light { color: #94A3B8 !important; } [data-theme="dark"] .link-dark { color: #E2E8F0 !important; } [data-theme="dark"] .link-dark:hover { color: #F1F5F9 !important; } /* Background utility overrides */ [data-theme="dark"] .bg-light { background-color: #253347 !important; } [data-theme="dark"] .bg-white { background-color: #1E293B !important; } [data-theme="dark"] .bg-body { background-color: #0F172A !important; } [data-theme="dark"] .bg-body-secondary { background-color: #1E293B !important; } [data-theme="dark"] .bg-body-tertiary { background-color: #1a2537 !important; } [data-theme="dark"] .border { border-color: #334155 !important; } [data-theme="dark"] .border-top { border-top-color: #334155 !important; } [data-theme="dark"] .border-bottom { border-bottom-color: #334155 !important; } [data-theme="dark"] .border-start { border-left-color: #334155 !important; /* stylelint-disable-line property-no-unknown */ } [data-theme="dark"] .border-end { border-right-color: #334155 !important; /* stylelint-disable-line property-no-unknown */ } [data-theme="dark"] .border-light { border-color: #334155 !important; } [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow-lg { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important; } /* --------------------------------------------------------------------------- 23. Chat Bubbles ------------------------------------------------------------------------ */ [data-theme="dark"] .chat-container, [data-theme="dark"] .chat-wrapper { background-color: #0F172A; } [data-theme="dark"] .chat-sidebar, [data-theme="dark"] .chat-contacts { background-color: #1E293B; border-right-color: #334155; } [data-theme="dark"] .chat-contact-item, [data-theme="dark"] .chat-user-item { border-bottom-color: #334155; color: #E2E8F0; } [data-theme="dark"] .chat-contact-item:hover, [data-theme="dark"] .chat-user-item:hover { background-color: #253347; } [data-theme="dark"] .chat-contact-item.active, [data-theme="dark"] .chat-user-item.active { background-color: rgba(129, 140, 248, 0.1); } [data-theme="dark"] .chat-bubble, [data-theme="dark"] .chat-message { background-color: #253347; color: #E2E8F0; border-color: #334155; } [data-theme="dark"] .chat-bubble.sent, [data-theme="dark"] .chat-message.sent, [data-theme="dark"] .chat-bubble-right, [data-theme="dark"] .chat-message-right { background-color: #818CF8; color: #fff; border-color: #818CF8; } [data-theme="dark"] .chat-bubble.received, [data-theme="dark"] .chat-message.received, [data-theme="dark"] .chat-bubble-left, [data-theme="dark"] .chat-message-left { background-color: #253347; color: #E2E8F0; } [data-theme="dark"] .chat-time { color: #64748B; } [data-theme="dark"] .chat-header, [data-theme="dark"] .chat-detail-header { background-color: #1E293B; border-bottom-color: #334155; } [data-theme="dark"] .chat-footer, [data-theme="dark"] .chat-input-area { background-color: #1E293B; border-top-color: #334155; } [data-theme="dark"] .chat-footer input, [data-theme="dark"] .chat-input-area input, [data-theme="dark"] .chat-footer textarea, [data-theme="dark"] .chat-input-area textarea { background-color: #0F172A; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .chat-name { color: #F1F5F9; } [data-theme="dark"] .chat-status { color: #64748B; } /* --------------------------------------------------------------------------- 24. Settings Panel ------------------------------------------------------------------------ */ [data-theme="dark"] .settings-panel, [data-theme="dark"] .theme-settings, [data-theme="dark"] .right-sidebar { background-color: #1E293B; border-left-color: #334155; box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .settings-panel .settings-header, [data-theme="dark"] .theme-settings .settings-header { border-bottom-color: #334155; color: #F1F5F9; } [data-theme="dark"] .settings-panel .settings-item, [data-theme="dark"] .theme-settings .settings-item { border-bottom-color: #334155; color: #E2E8F0; } [data-theme="dark"] .settings-panel .settings-label, [data-theme="dark"] .theme-settings .settings-label { color: #E2E8F0; } [data-theme="dark"] .settings-panel .settings-description, [data-theme="dark"] .theme-settings .settings-description { color: #64748B; } /* --------------------------------------------------------------------------- 25. Charts - ApexCharts Text & Axis Overrides ------------------------------------------------------------------------ */ [data-theme="dark"] .apexcharts-text, [data-theme="dark"] .apexcharts-title-text { fill: #94A3B8 !important; } [data-theme="dark"] .apexcharts-xaxis-label, [data-theme="dark"] .apexcharts-yaxis-label { fill: #94A3B8 !important; } [data-theme="dark"] .apexcharts-legend-text { color: #94A3B8 !important; } [data-theme="dark"] .apexcharts-gridline { stroke: #334155 !important; } [data-theme="dark"] .apexcharts-grid-borders line { stroke: #334155 !important; } [data-theme="dark"] .apexcharts-xaxis line, [data-theme="dark"] .apexcharts-yaxis line { stroke: #334155 !important; } [data-theme="dark"] .apexcharts-tooltip { background: #1E293B !important; border-color: #334155 !important; color: #E2E8F0 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .apexcharts-tooltip-title { background: #0F172A !important; border-bottom-color: #334155 !important; color: #F1F5F9 !important; } [data-theme="dark"] .apexcharts-tooltip-text { color: #E2E8F0 !important; } [data-theme="dark"] .apexcharts-tooltip-series-group { color: #E2E8F0 !important; } [data-theme="dark"] .apexcharts-xaxistooltip, [data-theme="dark"] .apexcharts-yaxistooltip { background: #1E293B !important; border-color: #334155 !important; color: #E2E8F0 !important; } [data-theme="dark"] .apexcharts-xaxistooltip-bottom::before, [data-theme="dark"] .apexcharts-xaxistooltip-bottom::after { border-bottom-color: #334155 !important; } [data-theme="dark"] .apexcharts-menu { background: #1E293B !important; border-color: #334155 !important; } [data-theme="dark"] .apexcharts-menu-item { color: #E2E8F0 !important; } [data-theme="dark"] .apexcharts-menu-item:hover { background: #253347 !important; } [data-theme="dark"] .apexcharts-canvas svg { background: transparent !important; } [data-theme="dark"] .apexcharts-datalabel, [data-theme="dark"] .apexcharts-data-labels text { fill: #E2E8F0 !important; } [data-theme="dark"] .apexcharts-radialbar-track .apexcharts-radialbar-area { stroke: #334155 !important; } /* --------------------------------------------------------------------------- 26. Search Bar ------------------------------------------------------------------------ */ [data-theme="dark"] .search-bar, [data-theme="dark"] .topbar-search, [data-theme="dark"] .header-search { background-color: #0F172A; border-color: #334155; } [data-theme="dark"] .search-bar input, [data-theme="dark"] .topbar-search input, [data-theme="dark"] .header-search input { background-color: #0F172A; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .search-bar input::placeholder, [data-theme="dark"] .topbar-search input::placeholder, [data-theme="dark"] .header-search input::placeholder { color: #64748B; } [data-theme="dark"] .search-bar input:focus, [data-theme="dark"] .topbar-search input:focus, [data-theme="dark"] .header-search input:focus { border-color: #818CF8; box-shadow: 0 0 0 0.25rem rgba(129, 140, 248, 0.2); } [data-theme="dark"] .search-bar .search-icon, [data-theme="dark"] .topbar-search .search-icon, [data-theme="dark"] .header-search .search-icon { color: #64748B; } [data-theme="dark"] .search-results, [data-theme="dark"] .search-dropdown { background-color: #1E293B; border-color: #334155; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .search-results .search-item:hover, [data-theme="dark"] .search-dropdown .search-item:hover { background-color: #253347; } /* --------------------------------------------------------------------------- 27. Avatar & Status Dots ------------------------------------------------------------------------ */ [data-theme="dark"] .avatar { border-color: #334155; } [data-theme="dark"] .avatar-group .avatar { border-color: #1E293B; } [data-theme="dark"] .avatar-placeholder, [data-theme="dark"] .avatar-initials { background-color: #253347; color: #94A3B8; } [data-theme="dark"] .status-dot, [data-theme="dark"] .avatar-status { border-color: #1E293B; } /* Status colors remain visible in dark mode */ [data-theme="dark"] .status-online { background-color: #34D399; } [data-theme="dark"] .status-offline { background-color: #64748B; } [data-theme="dark"] .status-busy { background-color: #F87171; } [data-theme="dark"] .status-away { background-color: #FBBF24; } /* --------------------------------------------------------------------------- 28. Tooltips ------------------------------------------------------------------------ */ [data-theme="dark"] .tooltip-inner { background-color: #F1F5F9; color: #0F172A; } [data-theme="dark"] .bs-tooltip-top .tooltip-arrow::before, [data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: #F1F5F9; } [data-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before, [data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: #F1F5F9; } [data-theme="dark"] .bs-tooltip-start .tooltip-arrow::before, [data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: #F1F5F9; } [data-theme="dark"] .bs-tooltip-end .tooltip-arrow::before, [data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: #F1F5F9; } /* Popover */ [data-theme="dark"] .popover { background-color: #1E293B; border-color: #334155; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .popover-header { background-color: #0F172A; border-bottom-color: #334155; color: #F1F5F9; } [data-theme="dark"] .popover-body { color: #E2E8F0; } [data-theme="dark"] .bs-popover-top > .popover-arrow::after, [data-theme="dark"] .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after { border-top-color: #1E293B; } [data-theme="dark"] .bs-popover-bottom > .popover-arrow::after, [data-theme="dark"] .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after { border-bottom-color: #1E293B; } [data-theme="dark"] .bs-popover-start > .popover-arrow::after, [data-theme="dark"] .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after { border-left-color: #1E293B; } [data-theme="dark"] .bs-popover-end > .popover-arrow::after, [data-theme="dark"] .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after { border-right-color: #1E293B; } /* --------------------------------------------------------------------------- 29. Accordion / Collapse ------------------------------------------------------------------------ */ [data-theme="dark"] .accordion { --bs-accordion-bg: #1E293B; --bs-accordion-border-color: #334155; --bs-accordion-color: #E2E8F0; --bs-accordion-btn-color: #E2E8F0; --bs-accordion-btn-bg: #1E293B; --bs-accordion-active-bg: #253347; --bs-accordion-active-color: #818CF8; --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(129, 140, 248, 0.25); } [data-theme="dark"] .accordion-item { background-color: #1E293B; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .accordion-button { background-color: #1E293B; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: #253347; color: #818CF8; box-shadow: inset 0 -1px 0 #334155; } [data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .accordion-body { background-color: #1E293B; color: #E2E8F0; } [data-theme="dark"] .accordion-flush .accordion-item { border-color: #334155; } /* --------------------------------------------------------------------------- 30. Offcanvas ------------------------------------------------------------------------ */ [data-theme="dark"] .offcanvas, [data-theme="dark"] .offcanvas-start, [data-theme="dark"] .offcanvas-end, [data-theme="dark"] .offcanvas-top, [data-theme="dark"] .offcanvas-bottom { background-color: #1E293B; border-color: #334155; color: #E2E8F0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .offcanvas-header { border-bottom-color: #334155; color: #F1F5F9; } [data-theme="dark"] .offcanvas-title { color: #F1F5F9; } [data-theme="dark"] .offcanvas-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .offcanvas-body { color: #E2E8F0; } [data-theme="dark"] .offcanvas-backdrop { background-color: rgba(0, 0, 0, 0.6); } /* --------------------------------------------------------------------------- 31. Scrollbar Colors ------------------------------------------------------------------------ */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #0F172A; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #334155; border-radius: 4px; border: 2px solid #0F172A; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: #475569; } [data-theme="dark"] ::-webkit-scrollbar-corner { background: #0F172A; } /* Firefox scrollbar */ [data-theme="dark"] * { scrollbar-color: #334155 #0F172A; scrollbar-width: thin; } /* Perfect Scrollbar overrides */ [data-theme="dark"] .ps__rail-x, [data-theme="dark"] .ps__rail-y { background-color: transparent !important; } [data-theme="dark"] .ps__thumb-x, [data-theme="dark"] .ps__thumb-y { background-color: #334155 !important; } [data-theme="dark"] .ps__thumb-x:hover, [data-theme="dark"] .ps__thumb-y:hover { background-color: #475569 !important; } /* --------------------------------------------------------------------------- 32. Flatpickr (Date Picker) ------------------------------------------------------------------------ */ [data-theme="dark"] .flatpickr-calendar { background: #1E293B; border-color: #334155; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .flatpickr-months { background: #1E293B; } [data-theme="dark"] .flatpickr-months .flatpickr-month { background: #1E293B; color: #E2E8F0; } [data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months { background: #1E293B; color: #E2E8F0; } [data-theme="dark"] .flatpickr-current-month input.cur-year { color: #E2E8F0; } [data-theme="dark"] .flatpickr-months .flatpickr-prev-month, [data-theme="dark"] .flatpickr-months .flatpickr-next-month { color: #94A3B8; fill: #94A3B8; } [data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover, [data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover { color: #E2E8F0; fill: #E2E8F0; } [data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg, [data-theme="dark"] .flatpickr-months .flatpickr-next-month svg { fill: #94A3B8; } [data-theme="dark"] .flatpickr-weekdays { background: #1E293B; } [data-theme="dark"] .flatpickr-weekday { background: #1E293B; color: #64748B; } [data-theme="dark"] .flatpickr-day { color: #E2E8F0; } [data-theme="dark"] .flatpickr-day:hover { background: #253347; border-color: #253347; } [data-theme="dark"] .flatpickr-day.today { border-color: #818CF8; } [data-theme="dark"] .flatpickr-day.selected, [data-theme="dark"] .flatpickr-day.startRange, [data-theme="dark"] .flatpickr-day.endRange { background: #818CF8; border-color: #818CF8; color: #fff; } [data-theme="dark"] .flatpickr-day.inRange { background: rgba(129, 140, 248, 0.15); border-color: rgba(129, 140, 248, 0.15); color: #E2E8F0; box-shadow: -5px 0 0 rgba(129, 140, 248, 0.15), 5px 0 0 rgba(129, 140, 248, 0.15); } [data-theme="dark"] .flatpickr-day.prevMonthDay, [data-theme="dark"] .flatpickr-day.nextMonthDay { color: #64748B; } [data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: #475569; } [data-theme="dark"] .flatpickr-time { border-top-color: #334155; } [data-theme="dark"] .flatpickr-time input { color: #E2E8F0; } [data-theme="dark"] .flatpickr-time .flatpickr-time-separator { color: #94A3B8; } [data-theme="dark"] .flatpickr-time .flatpickr-am-pm { color: #E2E8F0; } [data-theme="dark"] .flatpickr-time input:hover, [data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover, [data-theme="dark"] .flatpickr-time input:focus, [data-theme="dark"] .flatpickr-time .flatpickr-am-pm:focus { background: #253347; } /* --------------------------------------------------------------------------- 33. Toasts ------------------------------------------------------------------------ */ [data-theme="dark"] .toast { background-color: #1E293B; border-color: #334155; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); color: #E2E8F0; } [data-theme="dark"] .toast-header { background-color: #253347; border-bottom-color: #334155; color: #F1F5F9; } [data-theme="dark"] .toast-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .toast-body { color: #E2E8F0; } /* --------------------------------------------------------------------------- 34. Carousel ------------------------------------------------------------------------ */ [data-theme="dark"] .carousel-caption { color: #F1F5F9; } [data-theme="dark"] .carousel-indicators [data-bs-target] { background-color: rgba(226, 232, 240, 0.5); } [data-theme="dark"] .carousel-indicators .active { background-color: #E2E8F0; } /* --------------------------------------------------------------------------- 35. Spinners & Placeholders ------------------------------------------------------------------------ */ [data-theme="dark"] .placeholder { background-color: #334155; opacity: 0.5; } [data-theme="dark"] .placeholder-glow .placeholder { background-color: #334155; } [data-theme="dark"] .placeholder-wave { -webkit-mask-image: linear-gradient(130deg, #1E293B 55%, rgba(30, 41, 59, 0) 75%, #1E293B 95%); mask-image: linear-gradient(130deg, #1E293B 55%, rgba(30, 41, 59, 0) 75%, #1E293B 95%); } /* --------------------------------------------------------------------------- 36. Page Wrappers & Layout Containers ------------------------------------------------------------------------ */ [data-theme="dark"] .main-content, [data-theme="dark"] .main-content-wrapper, [data-theme="dark"] .page-content, [data-theme="dark"] .page-content, [data-theme="dark"] #main-content { background-color: #0F172A; } [data-theme="dark"] .page-header, [data-theme="dark"] .page-title-box { color: #F1F5F9; } [data-theme="dark"] .page-title, [data-theme="dark"] .page-heading { color: #F1F5F9; } [data-theme="dark"] .content-header { border-bottom-color: #334155; } [data-theme="dark"] .footer, [data-theme="dark"] .app-footer { background-color: #1E293B; border-top-color: #334155; color: #64748B; } /* --------------------------------------------------------------------------- 37. Additional Bootstrap Components ------------------------------------------------------------------------ */ /* Spinner */ [data-theme="dark"] .spinner-border.text-dark { color: #E2E8F0 !important; } [data-theme="dark"] .spinner-grow.text-dark { color: #E2E8F0 !important; } /* Close button */ [data-theme="dark"] [data-bs-theme="dark"] .btn-close, [data-theme="dark"] .btn-close-white { filter: none; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .offcanvas { background-color: #1E293B; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .offcanvas-header { border-bottom-color: #334155; } [data-theme="dark"] .offcanvas-title { color: #F1F5F9; } /* Figure */ [data-theme="dark"] figure figcaption { color: #94A3B8; } /* Blockquote */ [data-theme="dark"] .blockquote { color: #E2E8F0; border-left-color: #818CF8; } [data-theme="dark"] .blockquote-footer { color: #64748B; } /* --------------------------------------------------------------------------- 38. Feather Icons ------------------------------------------------------------------------ */ [data-theme="dark"] .feather { color: inherit; } /* --------------------------------------------------------------------------- 39. Responsive / Mobile Adjustments ------------------------------------------------------------------------ */ @media (max-width: 991.98px) { [data-theme="dark"] .sidebar, [data-theme="dark"] .app-sidebar { box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .sidebar-backdrop, [data-theme="dark"] .sidebar-overlay { background-color: rgba(0, 0, 0, 0.6); } } /* --------------------------------------------------------------------------- 40. Print Override - Disable Dark Mode in Print ------------------------------------------------------------------------ */ @media print { [data-theme="dark"] body, [data-theme="dark"] .card, [data-theme="dark"] .table, [data-theme="dark"] .modal-content { background-color: #fff !important; color: #000 !important; box-shadow: none !important; } [data-theme="dark"] .sidebar, [data-theme="dark"] .app-sidebar, [data-theme="dark"] .topbar, [data-theme="dark"] .app-topbar { display: none !important; } [data-theme="dark"] * { border-color: #dee2e6 !important; } } /* --------------------------------------------------------------------------- 41. Transition for Theme Switching ------------------------------------------------------------------------ */ [data-theme="dark"] body, [data-theme="dark"] .card, [data-theme="dark"] .sidebar, [data-theme="dark"] .topbar, [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .btn, [data-theme="dark"] .list-group-item, [data-theme="dark"] .nav-link, [data-theme="dark"] .table, [data-theme="dark"] .offcanvas, [data-theme="dark"] .accordion-item, [data-theme="dark"] .accordion-button { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } /* --------------------------------------------------------------------------- 42. Image & Media Adjustments ------------------------------------------------------------------------ */ [data-theme="dark"] img.img-thumbnail { background-color: #1E293B; border-color: #334155; } [data-theme="dark"] .figure-caption { color: #94A3B8; } /* Slightly reduce brightness of decorative images */ [data-theme="dark"] .card-img-top, [data-theme="dark"] .card-img { opacity: 0.92; } /* --------------------------------------------------------------------------- 43. Invoice & Document Views ------------------------------------------------------------------------ */ [data-theme="dark"] .invoice-container, [data-theme="dark"] .document-view { background-color: #1E293B; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .invoice-header, [data-theme="dark"] .document-header { border-bottom-color: #334155; } [data-theme="dark"] .invoice-footer, [data-theme="dark"] .document-footer { border-top-color: #334155; color: #64748B; } /* --------------------------------------------------------------------------- 44. File Manager ------------------------------------------------------------------------ */ [data-theme="dark"] .file-manager, [data-theme="dark"] .file-list { background-color: #0F172A; } [data-theme="dark"] .file-item, [data-theme="dark"] .file-card { background-color: #1E293B; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .file-item:hover, [data-theme="dark"] .file-card:hover { background-color: #253347; border-color: #475569; } [data-theme="dark"] .file-item.selected, [data-theme="dark"] .file-card.selected { border-color: #818CF8; background-color: rgba(129, 140, 248, 0.08); } [data-theme="dark"] .file-name { color: #F1F5F9; } [data-theme="dark"] .file-meta, [data-theme="dark"] .file-size, [data-theme="dark"] .file-date { color: #64748B; } /* --------------------------------------------------------------------------- 45. Pricing Cards ------------------------------------------------------------------------ */ [data-theme="dark"] .pricing-card, [data-theme="dark"] .plan-card { background-color: #1E293B; border-color: #334155; } [data-theme="dark"] .pricing-card .price, [data-theme="dark"] .plan-card .price { color: #F1F5F9; } [data-theme="dark"] .pricing-card .pricing-features li, [data-theme="dark"] .plan-card .plan-features li { color: #94A3B8; border-bottom-color: #334155; } [data-theme="dark"] .pricing-card.featured, [data-theme="dark"] .plan-card.featured { border-color: #818CF8; } /* --------------------------------------------------------------------------- 46. Profile & User Pages ------------------------------------------------------------------------ */ [data-theme="dark"] .profile-header, [data-theme="dark"] .user-header { background-color: #1E293B; border-bottom-color: #334155; } [data-theme="dark"] .profile-info .name, [data-theme="dark"] .user-name { color: #F1F5F9; } [data-theme="dark"] .profile-info .role, [data-theme="dark"] .user-role { color: #94A3B8; } [data-theme="dark"] .profile-stats, [data-theme="dark"] .user-stats { border-color: #334155; } /* --------------------------------------------------------------------------- 47. Authentication Pages (Login, Register) ------------------------------------------------------------------------ */ [data-theme="dark"] .auth-wrapper, [data-theme="dark"] .auth-wrapper-centered, [data-theme="dark"] .auth-page { background-color: #0F172A; } [data-theme="dark"] .auth-right-panel { background-color: #1E293B; } [data-theme="dark"] .auth-form-card, [data-theme="dark"] .auth-centered-card { background-color: #1E293B; border-color: #334155; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .auth-form-title { color: #F1F5F9; } [data-theme="dark"] .auth-form-subtitle { color: #94A3B8; } [data-theme="dark"] .auth-footer { color: #64748B; border-top-color: #334155; } [data-theme="dark"] .auth-footer a, [data-theme="dark"] .auth-link { color: #818CF8; } [data-theme="dark"] .auth-input-group .input-group-text { background: transparent; border-color: #334155; color: #94A3B8; } [data-theme="dark"] .auth-input-group .form-control { background: #0F172A; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .auth-divider::before, [data-theme="dark"] .auth-divider::after { background: #334155; } [data-theme="dark"] .auth-centered-bg { background: linear-gradient(135deg, #1E293B, #0F172A); } [data-theme="dark"] .search-shortcut { background: #1E293B; border-color: #334155; color: #94A3B8; } [data-theme="dark"] .search-input { background: #1E293B; color: #E2E8F0; } [data-theme="dark"] .notification-item:hover { background: #1E293B; } [data-theme="dark"] .notification-item.unread { background: rgba(99, 102, 241, 0.05); } /* --------------------------------------------------------------------------- 48. Error / Status Pages ------------------------------------------------------------------------ */ [data-theme="dark"] .error-page, [data-theme="dark"] .status-page { background-color: #0F172A; color: #E2E8F0; } [data-theme="dark"] .error-code { color: #818CF8; } [data-theme="dark"] .error-message { color: #94A3B8; } /* --------------------------------------------------------------------------- 49. Contact / Customer Cards ------------------------------------------------------------------------ */ [data-theme="dark"] .contact-card, [data-theme="dark"] .customer-card { background-color: #1E293B; border-color: #334155; } [data-theme="dark"] .contact-card:hover, [data-theme="dark"] .customer-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .contact-name, [data-theme="dark"] .customer-name { color: #F1F5F9; } [data-theme="dark"] .contact-info, [data-theme="dark"] .customer-info { color: #94A3B8; } /* --------------------------------------------------------------------------- 50. Deal / Pipeline Stages ------------------------------------------------------------------------ */ [data-theme="dark"] .pipeline-stage, [data-theme="dark"] .deal-stage { background-color: #1a2537; border-color: #334155; } [data-theme="dark"] .pipeline-stage-header, [data-theme="dark"] .deal-stage-header { color: #F1F5F9; border-bottom-color: #334155; } [data-theme="dark"] .pipeline-deal, [data-theme="dark"] .deal-card { background-color: #1E293B; border-color: #334155; } [data-theme="dark"] .pipeline-deal:hover, [data-theme="dark"] .deal-card:hover { background-color: #253347; } [data-theme="dark"] .deal-value { color: #34D399; } /* --------------------------------------------------------------------------- 51. Selection & Focus States ------------------------------------------------------------------------ */ [data-theme="dark"] ::selection { background-color: rgba(129, 140, 248, 0.35); color: #F1F5F9; } [data-theme="dark"] ::-moz-selection { background-color: rgba(129, 140, 248, 0.35); color: #F1F5F9; } [data-theme="dark"] :focus-visible { outline-color: #818CF8; } /* --------------------------------------------------------------------------- 52. Misc Utilities & Edge Cases ------------------------------------------------------------------------ */ /* Dividers */ [data-theme="dark"] .divider, [data-theme="dark"] .separator { border-color: #334155; } /* Empty state */ [data-theme="dark"] .empty-state, [data-theme="dark"] .no-data { color: #64748B; } [data-theme="dark"] .empty-state h5, [data-theme="dark"] .no-data h5 { color: #94A3B8; } /* Loading overlay */ [data-theme="dark"] .loading-overlay, [data-theme="dark"] .spinner-overlay { background-color: rgba(15, 23, 42, 0.8); } /* Skeleton loader */ [data-theme="dark"] .skeleton, [data-theme="dark"] .skeleton-loader { background: linear-gradient(90deg, #1E293B 25%, #253347 50%, #1E293B 75%); background-size: 200% 100%; } /* Ribbon / Flag */ [data-theme="dark"] .ribbon { color: #fff; } /* Step indicator / Wizard */ [data-theme="dark"] .step-indicator .step, [data-theme="dark"] .wizard-step { border-color: #334155; color: #64748B; background-color: #1E293B; } [data-theme="dark"] .step-indicator .step.active, [data-theme="dark"] .wizard-step.active { border-color: #818CF8; color: #818CF8; background-color: rgba(129, 140, 248, 0.1); } [data-theme="dark"] .step-indicator .step.completed, [data-theme="dark"] .wizard-step.completed { border-color: #34D399; color: #fff; background-color: #34D399; } [data-theme="dark"] .step-connector, [data-theme="dark"] .wizard-connector { background-color: #334155; } [data-theme="dark"] .step-connector.active, [data-theme="dark"] .wizard-connector.active { background-color: #818CF8; } /* Tag / Chip */ [data-theme="dark"] .tag, [data-theme="dark"] .chip { background-color: #253347; border-color: #334155; color: #E2E8F0; } [data-theme="dark"] .tag:hover, [data-theme="dark"] .chip:hover { background-color: #2d3d54; } /* Drag handle */ [data-theme="dark"] .drag-handle { color: #64748B; } [data-theme="dark"] .drag-handle:hover { color: #94A3B8; } /* Context menu */ [data-theme="dark"] .context-menu { background-color: #1E293B; border-color: #334155; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .context-menu-item { color: #E2E8F0; } [data-theme="dark"] .context-menu-item:hover { background-color: #253347; } [data-theme="dark"] .context-menu-divider { border-color: #334155; } /* --------------------------------------------------------------------------- Settings Preview Cards — Dark Mode ------------------------------------------------------------------------ */ [data-theme="dark"] .settings-preview-card { border-color: #334155; background: #1E293B; } [data-theme="dark"] .settings-preview-card:hover { border-color: rgba(129, 140, 248, 0.3); background: rgba(129, 140, 248, 0.04); } [data-theme="dark"] .settings-preview-item input:checked + .settings-preview-card { border-color: #818CF8; background: rgba(129, 140, 248, 0.08); box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15); } [data-theme="dark"] .settings-preview-label { color: #94A3B8; } [data-theme="dark"] .settings-preview-item input:checked + .settings-preview-card .settings-preview-label { color: #818CF8; } [data-theme="dark"] .settings-preview-item input:checked + .settings-preview-card::after { background: #818CF8; } /* Theme preview cards */ [data-theme="dark"] .theme-preview-light { border-color: #334155; } [data-theme="dark"] .theme-preview-dark { border-color: #475569; } /* Layout & RTL previews */ [data-theme="dark"] .layout-preview, [data-theme="dark"] .rtl-preview { background: #0F172A; border-color: #334155; } [data-theme="dark"] .lp-topbar, [data-theme="dark"] .lp-card, [data-theme="dark"] .lp-hz-topbar, [data-theme="dark"] .lp-hz-card, [data-theme="dark"] .rp-topbar, [data-theme="dark"] .rp-line { background: #334155; } /* Color swatches */ [data-theme="dark"] .settings-color-swatch { border-color: #475569; } [data-theme="dark"] .swatch-light { background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%); }