/** * BuildManager Pro - Dark Mode Theme * * This file overrides the default light theme colors when dark mode is enabled. * Applied via data-theme="dark" on the element. */ /* Dark mode CSS variables */ [data-theme="dark"] { --bg-primary: #1a1a2e; --bg-secondary: #16213e; --bg-tertiary: #0f0f23; --bg-card: #1e1e3f; --bg-hover: #2a2a4a; --bg-input: #252545; --text-primary: #e4e4e7; --text-secondary: #a1a1aa; --text-muted: #71717a; --border-color: #3f3f5a; --border-light: #2a2a4a; --shadow-color: rgba(0, 0, 0, 0.4); /* Keep brand colors but slightly adjust for dark mode */ --primary: #3b82f6; --primary-hover: #2563eb; --secondary: #6b7280; --success: #22c55e; --danger: #ef4444; --warning: #f59e0b; --info: #06b6d4; } /* Body and main background */ [data-theme="dark"] body { background: var(--bg-tertiary); color: var(--text-primary); } /* Login page - keep gradient but darken */ [data-theme="dark"] .login-wrapper { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); } [data-theme="dark"] .login-container { background: var(--bg-card); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .login-container .logo h1 { color: var(--text-primary); } [data-theme="dark"] .login-container .form-control { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .login-container .form-control:focus { background: var(--bg-input); border-color: var(--primary); color: var(--text-primary); } /* Navbar - keep gradient but darken slightly */ [data-theme="dark"] .navbar-custom { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* Sidebar */ [data-theme="dark"] .sidebar { background: var(--bg-secondary); border-right-color: var(--border-color); } [data-theme="dark"] .sidebar .nav-item { color: var(--text-secondary); } [data-theme="dark"] .sidebar .nav-item:hover { background: var(--bg-hover); color: var(--text-primary); } [data-theme="dark"] .sidebar .nav-item.active { background: var(--bg-hover); color: var(--primary); border-left-color: var(--primary); } [data-theme="dark"] .sidebar .sidebar-section { color: var(--text-muted); border-bottom-color: var(--border-color); } [data-theme="dark"] .sidebar-divider { background: var(--border-color); } /* Main content area */ [data-theme="dark"] .main-content { background: var(--bg-tertiary); } /* Cards */ [data-theme="dark"] .card { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 1px 3px var(--shadow-color); } [data-theme="dark"] .card-header { background: var(--bg-secondary); border-bottom-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .card-body { color: var(--text-primary); } [data-theme="dark"] .card-footer { background: var(--bg-secondary); border-top-color: var(--border-color); } /* Stat cards */ [data-theme="dark"] .stat-card { background: var(--bg-card); border-left-color: var(--primary); } [data-theme="dark"] .stat-card:hover { box-shadow: 0 4px 12px var(--shadow-color); } /* Tables */ [data-theme="dark"] .table { color: var(--text-primary); } [data-theme="dark"] .table thead th { background: var(--bg-secondary); border-bottom-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .table td, [data-theme="dark"] .table th { border-color: var(--border-color); } [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background: var(--bg-hover); } [data-theme="dark"] .table-hover tbody tr:hover { background: var(--bg-hover); } /* Modals */ [data-theme="dark"] .modal-content { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .modal-header { background: var(--bg-secondary); border-bottom-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .modal-body { background: var(--bg-card); color: var(--text-primary); } [data-theme="dark"] .modal-footer { background: var(--bg-secondary); border-top-color: var(--border-color); } /* Form controls */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: var(--bg-input); border-color: var(--primary); color: var(--text-primary); box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25); } [data-theme="dark"] .form-control::placeholder { color: var(--text-muted); } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-select:disabled { background: var(--bg-tertiary); color: var(--text-muted); } [data-theme="dark"] .form-label { color: var(--text-primary); } [data-theme="dark"] .form-text { color: var(--text-muted); } [data-theme="dark"] .input-group-text { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); } /* Buttons - keep primary colors, adjust others */ [data-theme="dark"] .btn-light { background: var(--bg-hover); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .btn-light:hover { background: var(--bg-secondary); border-color: var(--border-light); color: var(--text-primary); } [data-theme="dark"] .btn-outline-secondary { border-color: var(--border-color); color: var(--text-secondary); } [data-theme="dark"] .btn-outline-secondary:hover { background: var(--bg-hover); border-color: var(--text-secondary); color: var(--text-primary); } [data-theme="dark"] .btn-outline-light { border-color: var(--border-color); color: var(--text-secondary); } /* Dropdowns */ [data-theme="dark"] .dropdown-menu { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 4px 12px var(--shadow-color); } [data-theme="dark"] .dropdown-item { color: var(--text-primary); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background: var(--bg-hover); color: var(--text-primary); } [data-theme="dark"] .dropdown-divider { border-color: var(--border-color); } /* List groups */ [data-theme="dark"] .list-group-item { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .list-group-item:hover { background: var(--bg-hover); } [data-theme="dark"] .list-group-item.active { background: var(--primary); border-color: var(--primary); } /* Alerts */ [data-theme="dark"] .alert { border-color: var(--border-color); } [data-theme="dark"] .alert-info { background: rgba(6, 182, 212, 0.15); color: #67e8f9; border-color: rgba(6, 182, 212, 0.3); } [data-theme="dark"] .alert-success { background: rgba(34, 197, 94, 0.15); color: #86efac; border-color: rgba(34, 197, 94, 0.3); } [data-theme="dark"] .alert-warning { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border-color: rgba(245, 158, 11, 0.3); } [data-theme="dark"] .alert-danger { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); } /* Badges - keep colors but adjust for dark bg */ [data-theme="dark"] .badge.bg-light { background: var(--bg-hover) !important; color: var(--text-primary) !important; } [data-theme="dark"] .badge.bg-secondary { background: var(--secondary) !important; } /* Tabs and nav pills */ [data-theme="dark"] .nav-tabs { border-bottom-color: var(--border-color); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--text-secondary); } [data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .nav-tabs .nav-link.active { background: var(--bg-card); border-color: var(--border-color) var(--border-color) var(--bg-card); color: var(--text-primary); } [data-theme="dark"] .nav-pills .nav-link { color: var(--text-secondary); } [data-theme="dark"] .nav-pills .nav-link.active { background: var(--primary); color: white; } /* Pagination */ [data-theme="dark"] .page-link { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .page-link:hover { background: var(--bg-hover); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .page-item.active .page-link { background: var(--primary); border-color: var(--primary); } [data-theme="dark"] .page-item.disabled .page-link { background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-muted); } /* Progress bars */ [data-theme="dark"] .progress { background: var(--bg-secondary); } /* Breadcrumbs */ [data-theme="dark"] .breadcrumb { background: var(--bg-secondary); } [data-theme="dark"] .breadcrumb-item a { color: var(--primary); } [data-theme="dark"] .breadcrumb-item.active { color: var(--text-secondary); } /* Tooltips */ [data-theme="dark"] .tooltip-inner { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); } /* Popovers */ [data-theme="dark"] .popover { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .popover-header { background: var(--bg-secondary); border-bottom-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .popover-body { color: var(--text-primary); } /* Text utilities override */ [data-theme="dark"] .text-dark { color: var(--text-primary) !important; } [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] .text-body { color: var(--text-primary) !important; } /* Background utilities override */ [data-theme="dark"] .bg-white { background: var(--bg-card) !important; } [data-theme="dark"] .bg-light { background: var(--bg-secondary) !important; } /* Border utilities override */ [data-theme="dark"] .border { border-color: var(--border-color) !important; } [data-theme="dark"] .border-bottom { border-bottom-color: var(--border-color) !important; } [data-theme="dark"] .border-top { border-top-color: var(--border-color) !important; } /* Code blocks */ [data-theme="dark"] code { background: var(--bg-secondary); color: #f472b6; } [data-theme="dark"] pre { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); } /* Scrollbar styling for dark mode */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-tertiary); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Project selector dropdown */ [data-theme="dark"] .project-dropdown-menu { background: var(--bg-card); } [data-theme="dark"] .project-dropdown-item { color: var(--text-primary); } [data-theme="dark"] .project-dropdown-item:hover { background: var(--bg-hover); } /* Dashboard widgets */ [data-theme="dark"] .dashboard-widget { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .widget-header { border-bottom-color: var(--border-color); } /* Activity feed */ [data-theme="dark"] .activity-item { border-bottom-color: var(--border-color); } [data-theme="dark"] .activity-item:hover { background: var(--bg-hover); } /* Timeline */ [data-theme="dark"] .timeline-item::before { background: var(--border-color); } /* File upload areas */ [data-theme="dark"] .upload-zone { background: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .upload-zone:hover { border-color: var(--primary); background: var(--bg-hover); } /* Drawing viewer */ [data-theme="dark"] .drawing-toolbar { background: var(--bg-secondary); border-color: var(--border-color); } /* Report cards */ [data-theme="dark"] .report-card { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .report-card:hover { background: var(--bg-hover); } /* Spec sections in bid packages */ [data-theme="dark"] .spec-section-item { background: var(--bg-secondary); border-color: var(--border-color); } /* Comment bubbles */ [data-theme="dark"] .comment-bubble { background: var(--bg-secondary); border-color: var(--border-color); } /* Toast notifications - keep visible */ [data-theme="dark"] .toast { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); } /* Calendar/datepicker */ [data-theme="dark"] .datepicker { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .datepicker td, [data-theme="dark"] .datepicker th { color: var(--text-primary); } [data-theme="dark"] .datepicker td:hover { background: var(--bg-hover); } /* Accordion */ [data-theme="dark"] .accordion-item { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .accordion-button { background: var(--bg-card); color: var(--text-primary); } [data-theme="dark"] .accordion-button:not(.collapsed) { background: var(--bg-secondary); color: var(--primary); } [data-theme="dark"] .accordion-button::after { filter: invert(1); } [data-theme="dark"] .accordion-body { background: var(--bg-card); } /* Select2 dropdowns if used */ [data-theme="dark"] .select2-container--default .select2-selection--single, [data-theme="dark"] .select2-container--default .select2-selection--multiple { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .select2-dropdown { background: var(--bg-card); border-color: var(--border-color); } [data-theme="dark"] .select2-results__option { color: var(--text-primary); } [data-theme="dark"] .select2-results__option--highlighted { background: var(--bg-hover); } /* Transitions for smooth theme switching */ body, .sidebar, .card, .modal-content, .dropdown-menu, .form-control, .btn { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }