/* ============================================================================ * Slowbooks Pro 2026 — Dark Mode Skin * Feature 12: Toggle between QB2003 Blue theme and dark mode * Overrides CSS custom properties when [data-theme="dark"] is set on * ============================================================================ */ [data-theme="dark"] { /* Navy becomes a bright readable blue in dark mode — used for headings, card values */ --qb-navy: #8ab4e0; --qb-navy-dark: #6a9cc8; --qb-navy-mid: #5b9bd5; --qb-blue: #4a7fb5; --qb-blue-light: #5b9bd5; --qb-blue-accent: #6bb3e8; --qb-teal: #7abfbf; --qb-green: #4caf7a; --qb-green-dark: #3d9065; --qb-gold: #e0a840; --qb-red: #e05555; --qb-orange: #e08050; --invoice-bg: #1e2028; --estimate-bg: #1a2520; --form-bg: #1a1c24; --toolbar-bg: #242830; --toolbar-border: #3a3e48; --content-bg: #14161c; --panel-bg: #1e2028; --panel-border: #2e3240; --input-border: #3a4050; --input-focus: #5b9bd5; --text-primary: #e0e4ec; --text-secondary: #a0a8b8; --text-muted: #7a8498; --text-light: #606878; --text-on-dark: #c8d0dc; --text-on-navy: #e0e4ec; --primary-light: #1e2838; --gray-200: #2e3240; --gray-400: #606878; --gray-500: #7a8498; --gray-600: #a0a8b8; --success: #4caf7a; --warning: #e0a840; --danger: #e05555; } /* Body and main content */ [data-theme="dark"] body { background: var(--content-bg); color: var(--text-primary); } [data-theme="dark"] #content { background: var(--content-bg); color: var(--text-primary); } /* Topbar */ [data-theme="dark"] #topbar { background: linear-gradient(180deg, #2a2e38 0%, #1e2028 100%); border-bottom-color: #3a3e48; } [data-theme="dark"] .topbar-brand { color: #e0e4ec; } [data-theme="dark"] .topbar-brand span { color: var(--qb-gold); } [data-theme="dark"] .tb-btn { color: var(--text-secondary); } [data-theme="dark"] .tb-btn:hover { background: rgba(255,255,255,0.08); border-color: #4a4e58; color: #e0e4ec; } [data-theme="dark"] .topbar-clock { color: var(--text-secondary); } /* Sidebar */ [data-theme="dark"] #sidebar { background: linear-gradient(180deg, #0d1520 0%, #080c14 100%); } [data-theme="dark"] .sidebar-header h1 { color: #e0e4ec; } [data-theme="dark"] .sidebar-edition { color: var(--qb-gold); } [data-theme="dark"] .nav-section { color: #7a8498; } [data-theme="dark"] .nav-link { color: #b0bcc8; } [data-theme="dark"] .nav-link:hover { color: #e0e4ec; background: rgba(255,255,255,0.05); } [data-theme="dark"] .nav-link.active { color: #ffffff; background: rgba(90,155,213,0.2); } [data-theme="dark"] .sidebar-footer { color: #505868; } /* Status bar */ [data-theme="dark"] #statusbar { background: linear-gradient(180deg, #242830 0%, #1a1c24 100%); border-top-color: #3a3e48; color: var(--text-secondary); } [data-theme="dark"] .status-section { color: var(--text-secondary); } /* Page header */ [data-theme="dark"] .page-header { background: linear-gradient(180deg, #242830 0%, #1e2028 100%); border-color: var(--panel-border); } [data-theme="dark"] .page-header h2 { color: #e0e4ec; } /* Tables */ [data-theme="dark"] thead th { background: linear-gradient(180deg, #2a2e38 0%, #222630 100%); color: var(--text-secondary); border-bottom-color: var(--panel-border); border-right-color: #2e3240; } [data-theme="dark"] tbody td { border-bottom-color: #252830; border-right-color: #1e2028; color: var(--text-primary); } [data-theme="dark"] tbody tr:nth-child(even) { background: #181a22; } [data-theme="dark"] tbody tr:hover { background: #222838; } /* Table group header rows (Chart of Accounts type headers) */ [data-theme="dark"] tbody tr[style*="background:linear-gradient"] td { color: #8ab4e0 !important; background: linear-gradient(180deg, #1e2838 0%, #182030 100%) !important; } /* Table strong text */ [data-theme="dark"] td strong { color: #e0e4ec; } /* Cards */ [data-theme="dark"] .card { background: var(--panel-bg); border-color: var(--panel-border); box-shadow: 1px 1px 4px rgba(0,0,0,0.3); } [data-theme="dark"] .card-header { border-bottom-color: #2e3240; color: var(--text-secondary); } [data-theme="dark"] .card-value { color: #e0e4ec; } /* Dashboard sections */ [data-theme="dark"] .dashboard-section h3 { color: #b0c4dc; } /* Empty state */ [data-theme="dark"] .empty-state { color: var(--text-secondary); } [data-theme="dark"] .empty-state p { color: var(--text-secondary); } /* Forms */ [data-theme="dark"] .form-group label { color: var(--text-secondary); } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select, [data-theme="dark"] .form-group textarea { background: #14161c; color: var(--text-primary); border-color: var(--input-border); box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3); } [data-theme="dark"] .form-group input:focus, [data-theme="dark"] .form-group select:focus, [data-theme="dark"] .form-group textarea:focus { background: #1a1e28; border-color: var(--input-focus); } [data-theme="dark"] .form-group select { background: linear-gradient(180deg, #1a1c24 0%, #14161c 100%); } /* Modal */ [data-theme="dark"] .modal { background: var(--form-bg); border-color: #3a4050; } [data-theme="dark"] .modal-header { background: linear-gradient(180deg, #2a3648 0%, #1a2332 100%); } [data-theme="dark"] .modal-header h2 { color: #e0e4ec; } [data-theme="dark"] .modal-close { color: var(--text-secondary); } /* Buttons */ [data-theme="dark"] .btn { background: linear-gradient(180deg, #2a2e38 0%, #1e2028 100%); color: var(--text-primary); border-color: #3a4050; } [data-theme="dark"] .btn:hover { background: linear-gradient(180deg, #323640 0%, #282c38 100%); color: #ffffff; } [data-theme="dark"] .btn-primary { background: linear-gradient(180deg, #2a5a8a 0%, #1e4470 100%); color: #e0e4ec; border-color: #3a6a9a; } [data-theme="dark"] .btn-primary:hover { background: linear-gradient(180deg, #3a6a9a 0%, #2a5a8a 100%); } [data-theme="dark"] .btn-secondary { background: linear-gradient(180deg, #2a2e38 0%, #1e2028 100%); border-color: #3a4050; color: var(--text-primary); } [data-theme="dark"] .btn-danger { background: linear-gradient(180deg, #8a2a2a 0%, #701e1e 100%); color: #f0c0c0; border-color: #9a3a3a; } /* Toolbar */ [data-theme="dark"] .toolbar { background: #242830; border-color: #3a3e48; } [data-theme="dark"] .toolbar input, [data-theme="dark"] .toolbar select { background: #14161c; color: var(--text-primary); border-color: var(--input-border); } /* Settings sections */ [data-theme="dark"] .settings-section { background: var(--panel-bg); border-color: var(--panel-border); } [data-theme="dark"] .settings-section h3 { color: #b0c4dc; } /* Search */ [data-theme="dark"] .tb-search { background: #14161c; color: var(--text-primary); border-color: var(--input-border); } [data-theme="dark"] .search-dropdown { background: var(--panel-bg); border-color: var(--panel-border); } [data-theme="dark"] .search-section { background: #14161c; color: var(--text-secondary); } [data-theme="dark"] .search-item { color: var(--text-primary); } [data-theme="dark"] .search-item:hover { background: #222838; } /* Scrollbar */ [data-theme="dark"] ::-webkit-scrollbar-track { background: #14161c; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3a3e48 0%, #2a2e38 100%); border-color: #4a4e58; } /* Splash */ [data-theme="dark"] .splash-box { background: linear-gradient(180deg, #0d1520 0%, #060a10 100%); } [data-theme="dark"] .splash-title { color: #e0e4ec; } [data-theme="dark"] .splash-subtitle { color: var(--qb-gold); } [data-theme="dark"] .splash-info { color: var(--text-secondary); } [data-theme="dark"] .splash-legal { color: var(--text-muted); } /* Line items table */ [data-theme="dark"] .line-items-table { border-color: var(--panel-border); } [data-theme="dark"] .line-items-table th { background: linear-gradient(180deg, #2a2e38 0%, #222630 100%); border-right-color: #2e3240; color: var(--text-secondary); } [data-theme="dark"] .line-items-table td { border-right-color: #252830; border-bottom-color: #252830; } [data-theme="dark"] .line-items-table input, [data-theme="dark"] .line-items-table select { background: #14161c; color: var(--text-primary); border-color: var(--input-border); } /* IIF sections */ [data-theme="dark"] .iif-section { background: var(--panel-bg); border-color: var(--panel-border); } [data-theme="dark"] .iif-dropzone { background: #14161c; border-color: var(--input-border); color: var(--text-secondary); } /* Form actions border */ [data-theme="dark"] .form-actions { border-top-color: #2e3240; } [data-theme="dark"] .invoice-totals { border-top-color: var(--panel-border); } [data-theme="dark"] .total-row { color: var(--text-primary); } [data-theme="dark"] .total-row .label { color: var(--text-secondary); } [data-theme="dark"] .total-row .value { color: var(--text-primary); } [data-theme="dark"] .total-row.grand-total { border-top-color: var(--qb-blue); } [data-theme="dark"] .total-row.grand-total .value { color: var(--qb-blue-accent); } /* Badges - keep readable in dark mode */ [data-theme="dark"] .badge-draft { background: #2a2e38; color: #a0a8b8; border-color: #3a4050; } [data-theme="dark"] .badge-sent { background: #1a3a5a; color: #6bb3e8; border-color: #2a5a8a; } [data-theme="dark"] .badge-paid { background: #1a3a2a; color: #4caf7a; border-color: #2a6a4a; } [data-theme="dark"] .badge-partial { background: #3a3010; color: #e0a840; border-color: #5a5020; } [data-theme="dark"] .badge-void { background: #3a1a1a; color: #e05555; border-color: #5a2a2a; } [data-theme="dark"] .badge-overdue { background: #3a1a1a; color: #e05555; border-color: #5a2a2a; } /* Amount columns */ [data-theme="dark"] .amount { color: var(--text-primary); } /* Quick entry info box */ [data-theme="dark"] .quick-entry-info { background: #1e2838 !important; border-color: #3a4a5a !important; color: var(--text-secondary) !important; } /* Disclaimer boxes (payroll, etc.) */ [data-theme="dark"] div[style*="background:#fef3c7"] { background: #2a2518 !important; border-color: #4a4020 !important; color: #c0a060 !important; } /* Inline styles that use hardcoded colors — override common patterns */ [data-theme="dark"] [style*="color:var(--qb-navy)"] { color: #8ab4e0 !important; } [data-theme="dark"] [style*="font-weight:700"] { color: var(--text-primary); }