/* ----------------------------------------------------------------------------- FreelancerDashboard Dark Mode ----------------------------------------------------------------------------- Activation model: theme.js resolves the user's preference (light | dark | auto) and sets `data-theme="light"` or `data-theme="dark"` on before paint. This file only has to target [data-theme="dark"] — the "auto" case is resolved in JS against prefers-color-scheme. Strategy: 1. Override the CSS custom properties defined in styles.css so every existing `var(--foo)` reference flips without touching styles.css. 2. Introduce new dark-only surface/text tokens for things that were previously hardcoded in styles.css or inline in templates. 3. Patch Bootstrap 4.5 components (cards, tables, forms, nav, modals, dropdowns, alerts) that ship only a light palette. ----------------------------------------------------------------------------- */ html[data-theme="dark"] { /* Keep --white as actual white. styles.css uses var(--white) both as a surface color (card/modal backgrounds — we override those selectors explicitly below) AND as text-on-colored-button contrast. Flipping --white would make every button's label invisible. */ --light-gray: #12141a; /* was #f8f9fa — page background */ /* Override brand.css --fd-* design tokens for dark mode. brand.css defines these as light-mode values; any template or page CSS that uses var(--fd-*) directly will get dark values here. */ --fd-bg-page: #12141a; --fd-bg-surface: #242832; --fd-text-primary: #e8e9ed; --fd-text-secondary: #9a9ea8; --fd-text-muted: #6b6f7a; --fd-border: #2f3340; --fd-gray-900: #e8e9ed; --fd-gray-800: #c8cad0; --fd-gray-700: #9a9ea8; --fd-gray-600: #6b6f7a; --fd-gray-50: #1a1d24; --fd-gray-100: #242832; --dark-gray: #e8e9ed; /* was #343a40 — used as heading text */ --purple: #7b5fff; /* brand purple brightened for contrast */ --green-light: #98fd6a; --green-dark: #3d550c; --hover-green: #9fd23c; /* lifted for AA on dark */ --pale-green: #ecf87f; --green: #8ac54a; /* brightened */ --bright-green: #8ac54a; --danger: #ff5a51; /* brightened for legibility */ --warning: #f2d94a; --info: #3fb8c9; /* Dark-mode-only tokens */ --surface-bg: #1a1d24; --surface-bg-alt: #242832; --surface-bg-raised: #2a2e38; --text-primary: #e8e9ed; --text-muted: #9a9ea8; --text-subtle: #6b6f7a; --border-color: #2f3340; --input-bg: #1a1d24; --input-bg-focus: #242832; --input-border: #3a3f4d; --shadow-color: rgba(0, 0, 0, 0.55); color-scheme: dark; } /* Light theme also exposes surface tokens so CSS elsewhere can use the same variable names without branching. */ html[data-theme="light"] { --surface-bg: #ffffff; --surface-bg-alt: #f8f9fa; --surface-bg-raised: #ffffff; --text-primary: #212529; --text-muted: #6c757d; --text-subtle: #adb5bd; --border-color: #dee2e6; --input-bg: #ffffff; --input-bg-focus: #ffffff; --input-border: #ced4da; --shadow-color: rgba(0, 0, 0, 0.1); color-scheme: light; } /* ============================================================================= Dark mode: overrides ============================================================================= */ html[data-theme="dark"] body { background-color: var(--light-gray); color: var(--text-primary); } /* brand.css uses var(--fd-white) (not var(--fd-bg-surface)) for nav, header, and modal backgrounds. --fd-white is intentionally kept white so button text stays readable, so we must patch these element classes explicitly. */ html[data-theme="dark"] .nav, html[data-theme="dark"] .sidebar, html[data-theme="dark"] .sidenav, html[data-theme="dark"] [role="navigation"] { background-color: var(--surface-bg); border-right-color: var(--border-color); } html[data-theme="dark"] .header, html[data-theme="dark"] .topbar, html[data-theme="dark"] .app-header, html[data-theme="dark"] [role="banner"] { background-color: var(--surface-bg); border-bottom-color: var(--border-color); } html[data-theme="dark"] .modal, html[data-theme="dark"] [role="dialog"], html[data-theme="dark"] .dialog { background-color: var(--surface-bg); color: var(--text-primary); } html[data-theme="dark"] a { color: #9b82ff; } html[data-theme="dark"] a:hover, html[data-theme="dark"] a:focus { color: var(--hover-green); } /* Anchor-as-button: keep white text on colored backgrounds. Needs higher specificity than the generic anchor rule above. */ html[data-theme="dark"] .btn, html[data-theme="dark"] a.btn, html[data-theme="dark"] button.btn { color: #ffffff; } html[data-theme="dark"] .btn.btn-purple, html[data-theme="dark"] .btn.btn-primary, html[data-theme="dark"] .btn.btn-success, html[data-theme="dark"] .btn.btn-danger, html[data-theme="dark"] .btn.btn-warning, html[data-theme="dark"] .btn.btn-info { color: #ffffff; } html[data-theme="dark"] .btn-purple:hover, html[data-theme="dark"] .btn-purple:focus, html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn-primary:focus { color: #ffffff; } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--text-primary); } html[data-theme="dark"] hr, html[data-theme="dark"] .sidebar-divider { border-color: var(--border-color); background-color: var(--border-color); } /* ---- Bootstrap 4: cards, panels, containers ---- */ html[data-theme="dark"] .card, html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer, html[data-theme="dark"] .card-body { background-color: var(--surface-bg); border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .card-header { background-color: var(--surface-bg-alt); } html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--surface-bg) !important; color: var(--text-primary); } html[data-theme="dark"] .text-dark { color: var(--text-primary) !important; } html[data-theme="dark"] .text-muted { color: var(--text-muted) !important; } html[data-theme="dark"] .text-body { color: var(--text-primary) !important; } /* ---- Bootstrap 4: tables ---- */ html[data-theme="dark"] .table { color: var(--text-primary); border-color: var(--border-color); } html[data-theme="dark"] .table thead th { background-color: var(--surface-bg-alt); color: var(--text-primary); border-color: var(--border-color); } html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { border-color: var(--border-color); } html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03); } html[data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.06); color: var(--text-primary); } html[data-theme="dark"] .table-bordered, html[data-theme="dark"] .table-bordered td, html[data-theme="dark"] .table-bordered th { border-color: var(--border-color); } /* ---- Bootstrap 4: forms & inputs ---- */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] input.form-control, html[data-theme="dark"] textarea.form-control, html[data-theme="dark"] select.form-control, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="time"], html[data-theme="dark"] input[type="datetime-local"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: var(--input-bg-focus); border-color: var(--purple); color: var(--text-primary); box-shadow: 0 0 0 0.2rem rgba(123, 95, 255, 0.25); } html[data-theme="dark"] .form-control::placeholder { color: var(--text-subtle); } html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly] { background-color: var(--surface-bg-alt); color: var(--text-muted); } html[data-theme="dark"] .form-check-input { background-color: var(--input-bg); border-color: var(--input-border); } html[data-theme="dark"] .input-group-text { background-color: var(--surface-bg-alt); border-color: var(--input-border); color: var(--text-primary); } html[data-theme="dark"] label, html[data-theme="dark"] .form-label { color: var(--text-primary); } /* ---- Bootstrap 4: buttons ---- */ html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-outline-secondary { background-color: var(--surface-bg-alt); border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .btn-light:hover, html[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--surface-bg-raised); border-color: var(--text-subtle); color: var(--text-primary); } html[data-theme="dark"] .btn-outline-dark { color: var(--text-primary); border-color: var(--border-color); } html[data-theme="dark"] .btn-outline-dark:hover { background-color: var(--surface-bg-raised); color: var(--text-primary); } /* ---- Bootstrap 4: dropdowns ---- */ html[data-theme="dark"] .dropdown-menu { background-color: var(--surface-bg-alt); border-color: var(--border-color); color: var(--text-primary); box-shadow: 0 0.5rem 1rem var(--shadow-color); } html[data-theme="dark"] .dropdown-item { color: var(--text-primary); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--surface-bg-raised); color: var(--text-primary); } html[data-theme="dark"] .dropdown-divider { border-color: var(--border-color); } /* ---- Bootstrap 4: modals ---- */ html[data-theme="dark"] .modal-content { background-color: var(--surface-bg); border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--border-color); } html[data-theme="dark"] .modal-backdrop.show { opacity: 0.7; } html[data-theme="dark"] .close { color: var(--text-primary); text-shadow: none; } /* ---- Bootstrap 4: alerts ---- */ html[data-theme="dark"] .alert-primary { background-color: rgba(123, 95, 255, 0.15); border-color: rgba(123, 95, 255, 0.35); color: #c2b3ff; } html[data-theme="dark"] .alert-secondary { background-color: var(--surface-bg-alt); border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .alert-success { background-color: rgba(138, 197, 74, 0.15); border-color: rgba(138, 197, 74, 0.35); color: #b5e68a; } html[data-theme="dark"] .alert-danger { background-color: rgba(255, 90, 81, 0.15); border-color: rgba(255, 90, 81, 0.35); color: #ff8a84; } html[data-theme="dark"] .alert-warning { background-color: rgba(242, 217, 74, 0.15); border-color: rgba(242, 217, 74, 0.35); color: #f4e389; } html[data-theme="dark"] .alert-info { background-color: rgba(63, 184, 201, 0.15); border-color: rgba(63, 184, 201, 0.35); color: #85d6df; } /* ---- Bootstrap 4: badges & pills ---- */ html[data-theme="dark"] .badge.bg-secondary { background-color: var(--surface-bg-raised) !important; color: var(--text-primary); } html[data-theme="dark"] .badge.bg-light { background-color: var(--surface-bg-alt) !important; color: var(--text-primary); } /* ---- Bootstrap 4: list groups & breadcrumbs ---- */ html[data-theme="dark"] .list-group-item { background-color: var(--surface-bg); border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .list-group-item.active { background-color: var(--purple); border-color: var(--purple); color: var(--white); } html[data-theme="dark"] .breadcrumb { background-color: var(--surface-bg-alt); } html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } /* ---- Bootstrap 4: pagination ---- */ html[data-theme="dark"] .page-link { background-color: var(--surface-bg); border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .page-link:hover { background-color: var(--surface-bg-alt); border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .page-item.active .page-link { background-color: var(--purple); border-color: var(--purple); color: var(--white); } html[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--surface-bg); border-color: var(--border-color); color: var(--text-subtle); } /* ---- App-specific: sidebar & nav ---- */ html[data-theme="dark"] #left-nav, html[data-theme="dark"] .left-nav, html[data-theme="dark"] nav#left-nav { background-color: var(--sidebar-dark-bg, #0b0d12); border-right: 1px solid var(--border-color); } html[data-theme="dark"] #main-content { background-color: var(--light-gray); color: var(--text-primary); } html[data-theme="dark"] .nav-link { color: var(--text-primary); } /* brand.css: .nav-item:hover { background: #F5F3FF } and .nav-item.active { background: #EDE9FE } These light purple tints are invisible-on-dark. The sidebar overrides these with !important rules, so only non-sidebar nav (bookkeeping tabs, etc.) is affected. */ html[data-theme="dark"] .nav-item:hover, html[data-theme="dark"] .nav-link:hover { background-color: rgba(123, 95, 255, 0.15); color: var(--purple); } html[data-theme="dark"] .nav-item.active, html[data-theme="dark"] .nav-link.active, html[data-theme="dark"] [aria-current="page"] { background-color: rgba(123, 95, 255, 0.25); color: var(--purple); } /* brand.css: thead th { background-color: #F9FAFB } applies to ALL tables globally. darkmode.css only had .table thead th (Bootstrap class). Cover all tables. */ html[data-theme="dark"] thead th { background-color: var(--surface-bg-alt); color: var(--text-primary); border-color: var(--border-color); } /* brand.css: tbody tr:hover { background-color: #F9FAFB } applies to ALL table row hovers. */ html[data-theme="dark"] tbody tr:hover { background-color: var(--surface-bg-raised); } /* ---- Footer ---- */ html[data-theme="dark"] footer.footer, html[data-theme="dark"] .footer { background-color: #0b0d12; color: var(--text-muted); border-top: 1px solid var(--border-color); } /* ---- Code & pre blocks ---- */ html[data-theme="dark"] code, html[data-theme="dark"] pre { background-color: var(--surface-bg-alt); color: #f0a5d4; border-color: var(--border-color); } /* ---- Quill rich-text editor ---- */ html[data-theme="dark"] .ql-toolbar, html[data-theme="dark"] .ql-container { background-color: var(--surface-bg); border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .ql-editor { background-color: var(--input-bg); color: var(--text-primary); } html[data-theme="dark"] .ql-editor.ql-blank::before { color: var(--text-subtle); } html[data-theme="dark"] .ql-toolbar .ql-stroke { stroke: var(--text-primary); } html[data-theme="dark"] .ql-toolbar .ql-fill { fill: var(--text-primary); } html[data-theme="dark"] .ql-toolbar .ql-picker-label { color: var(--text-primary); } /* ---- App-specific: Google sign-in button (keeps near-white bg for brand) ---- */ html[data-theme="dark"] .google-sign-in-button { background-color: #ffffff; color: #212529; border: 1px solid var(--border-color); } /* ---- App-specific: status pills — intentionally keep light bg for clarity ---- */ html[data-theme="dark"] .status-pill.client-status { background-color: var(--surface-bg-raised); color: var(--text-primary) !important; border-color: var(--border-color); } html[data-theme="dark"] .status-pill.client-status option { background-color: var(--surface-bg-raised); color: var(--text-primary); } /* ---- App-specific: first-run onboarding modal ---- */ html[data-theme="dark"] .new-user-modal { background-color: var(--surface-bg); box-shadow: 0 8px 32px var(--shadow-color); } html[data-theme="dark"] .new-user-content h2 { color: #b9a6ff; } html[data-theme="dark"] .new-user-content p { color: var(--text-primary); } /* Theme toggle control ----------------------------------------------------------------------------- */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.35rem 0.6rem; border: 1px solid transparent; border-radius: 0.375rem; background: transparent; color: inherit; cursor: pointer; font-size: 0.95rem; line-height: 1; transition: background-color 0.15s ease, border-color 0.15s ease; } .theme-toggle-btn:hover, .theme-toggle-btn:focus { background-color: rgba(128, 128, 128, 0.12); outline: none; } .theme-toggle-btn .theme-icon-light, .theme-toggle-btn .theme-icon-dark, .theme-toggle-btn .theme-icon-auto { display: none; } html[data-theme-pref="light"] .theme-toggle-btn .theme-icon-light { display: inline-block; } html[data-theme-pref="dark"] .theme-toggle-btn .theme-icon-dark { display: inline-block; } html[data-theme-pref="auto"] .theme-toggle-btn .theme-icon-auto { display: inline-block; } /* Sidebar variant matches the other nav items visually */ .nav-item .theme-toggle-btn { width: 100%; justify-content: flex-start; padding: 0.5rem 0.75rem; border-radius: 0; gap: 0.75rem; } .nav-item .theme-toggle-btn i { width: 1.25rem; text-align: center; } /* ============================================================================= BRAND.CSS DARK MODE GAPS brand.css sets direct color rules on p and tbody td that are not inherited from body and therefore are not overridden by darkmode.css body rule. ============================================================================= */ /* brand.css: p { color: var(--fd-text-primary) } = #111827 (near-black) Without this override, paragraph text is unreadable on dark surfaces. */ html[data-theme="dark"] p { color: var(--text-primary); } /* brand.css: tbody td { color: var(--fd-text-primary) } = #111827 darkmode.css patches .table color but that is inherited; the brand.css direct tbody td rule has higher specificity and wins. Override directly. */ html[data-theme="dark"] tbody td { color: var(--text-primary); } /* Ensure spans and divs inside cards/tables also get light text in dark mode */ html[data-theme="dark"] .card-body, html[data-theme="dark"] .card-footer { color: var(--text-primary); } /* APP COLOR TOKEN DARK MODE OVERRIDES base.css defines these variables for light mode. Flip them for dark mode so template