tags, and painting those --mm-bg made them render * as a darker box inside the lighter panel — the "two-colour" job * page. The layout's own section/main sit inside these containers and * inherit the background, so dropping the bare element selectors * costs nothing. */ html.theme-dark body.page-template, html.theme-dark .main-panel, html.theme-dark .content-wrapper, html.theme-dark .container-fluid, html.theme-dark .container, html.theme-dark .page-body-wrapper, html.theme-dark section.section { background-color: var(--mm-bg) !important; color: var(--mm-text); } html.theme-dark p, html.theme-dark .text-dark, html.theme-dark .text-body, html.theme-dark .text-black { color: var(--mm-text) !important; } html.theme-dark .text-muted, html.theme-dark .text-secondary { color: var(--mm-text-muted) !important; } /* Content links go brand-orange. `:not(.btn)` keeps the rule off * link-styled BUTTONS (``) — those carry their own * fill + text colour, and the blanket rule (esp. its :visited arm) was * repainting a visited button's label orange-on-orange. */ html.theme-dark a:not(.btn), html.theme-dark a:not(.btn):visited { color: var(--mm-brand); } html.theme-dark a:not(.btn):hover, html.theme-dark a:not(.btn):focus { color: var(--mm-brand-hover); } /* Data-table links are content, not calls-to-action — the blanket * orange `a` rule above repaints things like the sales-report project * title (.proj-row-link, designed to inherit) and the project-list * manager/title cells. Restore them to normal text colour. */ html.theme-dark .proj-row-link, html.theme-dark .proj-row-link:visited, html.theme-dark .pro-section table td a:not(.btn), html.theme-dark .pro-section table td a:not(.btn):visited { color: inherit !important; } /* "Job is Locked" indicator (the lock icon + label that sits above the * proposals card). Page-scoped CSS pins the label to #2A2A2A (near * black) and the lock-icon.svg has a baked-in #08376A dark-blue fill — * both invisible on the dark background. Lift the label to muted * white; convert the dark SVG to muted white via the brightness(0)+ * invert(1)+opacity trick so it matches the text. */ html.theme-dark .lock_job_prop_desc > * { color: var(--mm-text-muted) !important; } html.theme-dark .lock_job_prop_desc .lock-icon { filter: brightness(0) invert(1) opacity(0.82) !important; } /* Keep "See Why" on brand orange — it already reads, but lift it from * #EF5537 to the dark-mode brand variant for consistency. */ html.theme-dark .lock_job_prop_desc .lock_see_why { color: var(--mm-brand) !important; } /* "Job Locked" speech-bubble tooltip (.see_why_block). Page-scoped CSS * in project/task.php + task/proposal.php hard-codes a white panel * (#FFFFFF + #FFFFFF tail), dark-ink title and grey desc — the title * reads on dark by coincidence but the desc is invisible on the white * panel showing through. Re-skin the whole tooltip for dark. */ html.theme-dark .see_why_block { background: var(--mm-surface-2) !important; box-shadow: 0 10px 60px rgba(0, 0, 0, 0.6) !important; color: var(--mm-text) !important; } html.theme-dark .see_why_block .see_why_box_title, html.theme-dark .see_why_block .see_why_box_title b { color: var(--mm-text) !important; } html.theme-dark .see_why_block .see_why_box_desc { color: var(--mm-text-muted) !important; } html.theme-dark .see_why_block .see_why_box_desc b { color: var(--mm-text) !important; } html.theme-dark .see_why_block .see_why_box_link { color: var(--mm-text-muted) !important; } html.theme-dark .see_why_block .see_why_box_link a { color: var(--mm-brand) !important; } html.theme-dark .see_why_block .close_see_why { color: var(--mm-text-muted) !important; } /* The little upward triangle tail that hangs off the top of the tooltip * — light mode draws it via border-bottom: 15px solid #FFFFFF. */ html.theme-dark .see_why_block::before { border-bottom-color: var(--mm-surface-2) !important; } /* Creator/freelancer name in the project Jobs table is the one * deliberate exception: light mode paints `.mm-table-name` brand-orange * (#EF5537) as the "assigned to" cue, and the blanket exemption above * just flattened it to inherited white. Re-pin it to the brand accent. * `:not(.btn)` lifts specificity over the exemption so it always wins. */ /* Mobile only — mirrors the light-mode rule which paints * `.mm-table-name` brand-orange (#EF5537) under * `@media (max-width:575px)`. On desktop those names are plain td * text in BOTH themes (light: inherits #5B5876 navy-grey; dark: * inherits --mm-text white) — we leave the column-link colouring * alone so it doesn't read as a sea of orange across every row. */ @media (max-width: 575px) { html.theme-dark .pro-section table td a.mm-table-name:not(.btn), html.theme-dark .pro-section table td a.mm-table-name:not(.btn):visited, html.theme-dark .pro-section table td.mm-table-name, html.theme-dark .pro-section table td.mm-table-name a:not(.btn) { color: var(--mm-brand) !important; } } /* The freelance sales-report earning value is `var(--purple)` — a * violet on dark; use plain white text. The desktop table uses * .row-amount--accent and the mobile project card uses .mob-proj__earn * — cover both so the value matches across viewports. */ html.theme-dark .row-amount--accent, html.theme-dark .mm-app .mob-proj__earn { color: var(--mm-text) !important; } /* Sales project-card status pills — on dark they all flattened to the * same dull grey. Colour them semantically so each status reads at a * glance: INITIAL neutral, EXTENSION purple, PENDING amber, APPROVED * green. (--ext / --yes are listed after the base rule so they win the * same-specificity tie.) */ html.theme-dark .mm-app .mob-proj__stage { background: var(--mm-surface-3) !important; color: var(--mm-text-muted) !important; } html.theme-dark .mm-app .mob-proj__stage--ext { background: rgba(180, 156, 240, 0.18) !important; color: #b89cf0 !important; } html.theme-dark .mm-app .mob-proj__chip--no { background: var(--mm-warning-soft) !important; color: var(--mm-warning) !important; } html.theme-dark .mm-app .mob-proj__chip--yes { background: var(--mm-success-soft) !important; color: var(--mm-success) !important; } /* Desktop sales table — same semantic colours as the mobile cards * above. The eligibility chip is PENDING (--no) / APPROVED (--yes); the * stage label is plain text and already reads neutral / purple. */ html.theme-dark .mm-app .elig-chip--no { background: var(--mm-warning-soft) !important; color: var(--mm-warning) !important; } html.theme-dark .mm-app .elig-chip--yes { background: var(--mm-success-soft) !important; color: var(--mm-success) !important; } /* Salesperson name (.sp-name) rendered brand-orange on dark: the * variant loses a specificity battle to the blanket `a:not(.btn)` * rule, and the

variant (mobile cards) inherits orange from a * clickable card ancestor. Match `.sp-name` directly — both element * types — and pin it to ink/white text. */ html.theme-dark .mm-app .sp-name { color: var(--mm-text) !important; } /* Proposal capacity tags (.pm-badge*) — the #54387F purple outline + * label barely register on the dark proposal card. Brighten both to a * clear, legible light purple. */ html.theme-dark .pm-badge, html.theme-dark .pm-badge-available, html.theme-dark .pm-badge-high, html.theme-dark .pm-badge-capacity { border-color: #9b82d6 !important; color: #9b82d6 !important; } /* The (i) glyph in the pill is an SVG with a hard-coded #54387F * stroke — it can't inherit the pill's `color`. brightness() preserves * the purple hue while lifting it to roughly match the #9b82d6 label; * saturate() trims the slight over-vividness. */ html.theme-dark .pm-badge-i img { filter: brightness(1.85) saturate(0.85); } /* "Inverse" buttons (.btn-inverse-* — tinted bg + solid-hue text, used * for Edit/Delete on the taxonomy admin tables). The text is the FULL * hue (e.g. #0069D9 blue), which is too dark on the dark tinted fill — * lift each to a light tint of its hue. Icons inherit `color`. */ html.theme-dark .btn-inverse-primary { color: #8ab4ff !important; } html.theme-dark .btn-inverse-info { color: #5fd3e6 !important; } html.theme-dark .btn-inverse-danger { color: var(--mm-danger) !important; } html.theme-dark .btn-inverse-success { color: var(--mm-success) !important; } html.theme-dark .btn-inverse-warning { color: var(--mm-warning) !important; } html.theme-dark .btn-inverse-secondary, html.theme-dark .btn-inverse-dark, html.theme-dark .btn-inverse-light { color: var(--mm-text) !important; } /* Amount pills on the Wallet page (`.badge.btn-inverse-{success,danger}`) * — the theme paints success a solid green but danger only a 20%-alpha * red, which on the dark page is a muddy near-unreadable maroon. Give * the danger pill a solid red so it reads as clearly as the green one, * and put white text on both for a consistent solid-pill look. */ html.theme-dark .badge.btn-inverse-danger { background-color: #ef4444 !important; color: #fff !important; } html.theme-dark .badge.btn-inverse-success { color: #fff !important; } /* The "Pending" withdrawal-status badge uses btn-inverse-warning * (was danger/red — misleading, pending isn't a failure). Give it a * solid amber pill matching the green/red ones. */ html.theme-dark .badge.btn-inverse-warning { background-color: #d97706 !important; color: #fff !important; } /* `.btn-theme-secondary` (e.g. the Wallet "Withdraw Funds" button) is a * dark purple that barely separates from the dark page. Give it the * brand-orange fill on dark so the action is clear and on-brand. * Exclude `.submit-btn` — that class pins its own brand-orange fill * (e.g. the Deliver button) already. */ html.theme-dark .btn-theme-secondary:not(.submit-btn) { background-color: var(--mm-brand) !important; border-color: var(--mm-brand) !important; color: #fff !important; } /* Proposal editor footer (project/detail_posted.php) — the char-counter * bar under the cover-letter textarea is pinned #FAFBFC, so it reads as * a white strip across the bottom of the dark editor. */ html.theme-dark .editor-footer { background: var(--mm-surface-2) !important; border-top-color: var(--mm-border) !important; } /* Account-menu wallet sub-card (account-menu.css) — the card is pinned * to a near-white lavender (--wallet-tint); under dark mode the balance * (--ink-900) remaps to white and vanishes on it. Give the card a dark * surface and lift the wallet glyph to a brighter violet. */ html.theme-dark .am-wallet { background: var(--mm-surface-2) !important; border-color: var(--mm-border) !important; } html.theme-dark .am-wallet__amount { color: var(--mm-text) !important; } html.theme-dark .am-wallet__label svg, html.theme-dark .am-wallet-icon { color: #8b5cf6 !important; } /* Account-menu rows — "Edit Profile" gets repainted orange by the * blanket dark `a` rule and "Logout" (the --danger row) is amber on * both its text and icon. Keep all the row text and the logout icon * white. */ html.theme-dark .am-row__link, html.theme-dark .am-row__link:visited, html.theme-dark .am-row__link:hover, html.theme-dark .am-row__link--danger, html.theme-dark .am-row__link--danger:hover, html.theme-dark .am-row__link--danger .am-row__icon { color: var(--mm-text) !important; } /* Sales-report total-row earning (.val-elig) is var(--purple) — a * bright violet on dark. Use plain text, matching the per-row fix. */ html.theme-dark .val-elig { color: var(--mm-text) !important; } /* Mobile sidebar drawer — the profile-block divider * (.navbar-brand-mobile bottom border) is a near-white #E8EFF6 that * glares on the dark drawer. Dim it to --mm-border. */ html.theme-dark .navbar-brand-mobile.am-mobile { border-bottom-color: var(--mm-border) !important; } /* Navbar mobile page-title — light-mode navy on the dark header bar. */ html.theme-dark .mm-page-title { color: var(--mm-text) !important; } /* Mobile hamburger — the visible icon is an (bars.svg) whose * paths are filled #2B003F (dark purple), near-invisible on the dark * header. brightness(0) flattens it to black, invert(1) lifts it to * white. (color: handles the alternate mdi icon-font variant.) */ html.theme-dark .navbar-toggler { color: var(--mm-text) !important; } html.theme-dark .navbar-toggler img.nav-bars, html.theme-dark img.nav-bars { filter: brightness(0) invert(1); } /* Proposal / revisions timeline (task/proposal.php) — the update * sub-text (.new-uptext) and the timestamps (.mobil-time-*) are pinned * #56606D, a dark grey that's near-unreadable on the dark cards. The * budget-update entry (.bud-text) wraps its whole line in a #56606D * span, so that row reads dim too. */ html.theme-dark .new-uptext, html.theme-dark .mobil-time-show, html.theme-dark .mobil-time-hide { color: var(--mm-text-muted) !important; } html.theme-dark .bud-text, html.theme-dark .bud-text span, html.theme-dark .bud-text b { color: var(--mm-text) !important; } /* The "Budget: ..." sub-line of a budget-update entry (.budget-text) * pins its columns to #56606D — barely visible on dark. Lift to muted * white; the amount keeps its own orange. */ html.theme-dark .budget-text, html.theme-dark .budget-text div { color: var(--mm-text-muted) !important; } /* The "Attachments" label in a delivery entry is pinned to a dark * navy #2D405A — near-invisible on the dark card. (The filename link * below it carries an inline #56606D and is fixed in proposal.php.) */ html.theme-dark .attachments-text, html.theme-dark .attachments-text span { color: var(--mm-text) !important; } /* "Deliver your work" file picker (task/proposal.php) — the * .custom-file-upload label is a light #ededed slab with #56606D text * + icon, and the "No file choosen" text is a dim #78808A. */ html.theme-dark .custom-file-upload { background: var(--mm-surface-3) !important; color: var(--mm-text) !important; border-color: var(--mm-border) !important; } html.theme-dark .custom-file-upload svg path { stroke: currentColor; } html.theme-dark .custom-file-upload-text { color: var(--mm-text-muted) !important; } /* Notification-centre icon bubbles — the per-type tint backgrounds * resolve to a low-alpha wash on dark, so even raised they composite * dark over the near-black page. Give each type a solid, vivid circle * with a white glyph (the .nc-icon SVG strokes currentColor) so the * badges read brightly. Colours track the avatar palette. */ html.theme-dark .nc-iconbubble--invite, html.theme-dark .nc-iconbubble--proposal, html.theme-dark .nc-iconbubble--project { background: #8b5cf6 !important; color: #fff !important; } html.theme-dark .nc-iconbubble--award, html.theme-dark .nc-iconbubble--delivery { background: #22c55e !important; color: #fff !important; } html.theme-dark .nc-iconbubble--payment, html.theme-dark .nc-iconbubble--budget, html.theme-dark .nc-iconbubble--system { background: #ef5537 !important; color: #fff !important; } html.theme-dark .nc-iconbubble--deadline { background: #d97706 !important; color: #fff !important; } html.theme-dark .nc-iconbubble--chat { background: #3b82f6 !important; color: #fff !important; } /* Component-surface links that wrap a whole row (notification popover, * chat conversation list, sidebar items): the row's inner spans / * titles / previews each set their own colour via `.sc-row__title`, * `.sc-row__time`, `.mmc-conv-name`, etc. We MUST NOT paint those * inner pieces with the link's brand orange — the title is meant to * be readable white/grey, with brand orange reserved for accents. * * The original dark-mode pass added a broad `html.theme-dark span, * h1..h6, p, li, ... { color: inherit }` rule that was meant to * undo per-page hard-coded text colours. But because that rule has * (0,1,1) specificity, it BEAT every component-class rule like * `.sc-row__title { color: var(--ink-700) }` (0,1,0). Inner spans * then inherited the brand-orange link colour from the wrapping * `` and the whole notification popover (plus chat list, plus * any row-link surface) read as muddy orange-on-dark. * * Removing the inherit rule lets the component classes win. For * the case the inherit rule was originally trying to handle — h1 * / h2 hard-coded to #242424 in main.php's inline