/* Appearance for every screen — dashboard, toolkit, studio, logo maker, image cleanup, sign-in. * * Each page keeps its own :root as the dark default, so a page still renders correctly on its * own. This file overrides the same token names per theme and per accent, which is why the * whole app changes together rather than page by page. * * Applied by theme.js before first paint. Attributes live on : * data-theme = dark | light | contrast * data-accent = blue | orange | green | violet | red | slate * * Adding a theme means covering every token in the union below. A missing one falls through to * the page's dark default and produces dark text on a light panel, so cover all of them. */ /* --gold is the brand fill and is the same in every theme — a logo colour is not a token to re-tint. --gold-ink is gold as text, which does need a readable step per ground. Conflating the two turned the avatar into dark-on-dark at 3.1:1. */ /* ---------------- LIGHT ---------------- */ html[data-theme="light"]{ --bg:#F4F6FA; --bg2:#FFFFFF; --panel:#FFFFFF; --panel2:#F7F9FC; --ink:#101828; --ink2:#3A4759; --mute:#566374; --line:#DFE4EC; --line2:#C6CEDA; --good:#157F4B; --good-soft:#E9F8EF; --good-line:#A6E0C0; --good-ink:#0C5C35; --warn:#9A5B00; --warn-soft:#FFF6E6; --warn-line:#F0C989; --bad:#B42318; --bad-soft:#FEECEA; --hot:#B42318; --hot-soft:#FEECEA; --hot-ink:#7A1710; --gold:#F2A03D; --gold2:#D98A22; --gold-ink:#8A5807; } /* Inversions that do not follow from the tokens: surfaces authored as dark-on-dark. */ html[data-theme="light"] .mk-panel, html[data-theme="light"] .dlg, html[data-theme="light"] .prow, html[data-theme="light"] .mrow{ color:var(--ink) } html[data-theme="light"] .mk .art{ background-color:#fff } html[data-theme="light"] .spin{ border-color:rgba(0,0,0,.18); border-top-color:var(--acc) } /* ---------------- HIGH CONTRAST ---------------- Black on white, heavier rules, no soft tints. For anyone who finds the other two hard to read — and it is the one to choose alongside a screen reader. */ html[data-theme="contrast"]{ --bg:#FFFFFF; --bg2:#FFFFFF; --panel:#FFFFFF; --panel2:#F2F2F2; --ink:#000000; --ink2:#141414; --mute:#2E2E2E; --line:#000000; --line2:#000000; --good:#00631F; --good-soft:#FFFFFF; --good-line:#00631F; --good-ink:#004315; --warn:#6A4000; --warn-soft:#FFFFFF; --warn-line:#6A4000; --bad:#A80000; --bad-soft:#FFFFFF; --hot:#A80000; --hot-soft:#FFFFFF; --hot-ink:#7A0000; --gold:#F2A03D; --gold2:#D98A22; --gold-ink:#6A4000; } html[data-theme="contrast"] *{ text-shadow:none !important; box-shadow:none !important } html[data-theme="contrast"] .card, html[data-theme="contrast"] .mapp, html[data-theme="contrast"] .mrow, html[data-theme="contrast"] .prow, html[data-theme="contrast"] .mk, html[data-theme="contrast"] .tile, html[data-theme="contrast"] .folder{ border-width:2px } html[data-theme="contrast"] a{ text-decoration:underline } html[data-theme="contrast"] :focus-visible{ outline:3px solid #000; outline-offset:2px } /* text that sits on a solid accent fill — white fails on orange at 3.3:1, so each accent carries the readable one rather than assuming white */ /* Platform badges — GoHighLevel, Vendasta, done-for-you. The hue identifies the platform, so it is kept in every theme; only the tint and border move, so a badge reads on its own ground. */ html[data-theme="dark"]{ --ghl-ink:#5FD695; --ghl-soft:#0F2A1D; --ghl-line:#1E5B3C; --ven-ink:#7FB0FF; --ven-soft:#14243F; --ven-line:#27456F; --da-ink:#F0B056; --da-soft:#2A1E0C; --da-line:#6B4A16; } html[data-theme="light"]{ --ghl-ink:#12683D; --ghl-soft:#EAF7EF; --ghl-line:#A7D9BC; --ven-ink:#1B4DB5; --ven-soft:#ECF2FE; --ven-line:#B7CDF5; --da-ink:#8A5207; --da-soft:#FFF4E3; --da-line:#EBC489; } html[data-theme="contrast"]{ --ghl-ink:#00541B; --ghl-soft:#FFFFFF; --ghl-line:#00541B; --ven-ink:#00308F; --ven-soft:#FFFFFF; --ven-line:#00308F; --da-ink:#5A3600; --da-soft:#FFFFFF; --da-line:#5A3600; } /* ---------------- ACCENTS ---------------- One hue drives the primary action, links and selected states. --acc the fill --acc-ink the same hue as text, stepped toward black (or white on dark) until it clears 4.75:1 on the tint — a margin over 4.5, because an engine's rounding can shift a pair by a couple of tenths --acc-soft the tinted panel fill --acc-line its border Every value is literal, and every step round-trips through rounded hex so these are the exact colours a browser resolves. Two earlier versions of this block were wrong: color-mix() did not resolve in one engine (light fell back to the dark tint, 1:1 text), and then a generator that compared float intermediates scored light/green 4.67 while the browser measured 4.38, so that pair was never darkened at all. The ratios below are recomputed from these hex values by check.mjs — the comments are a convenience, not the guarantee. */ html[data-accent="blue"]{ --acc:#2F6FEB } /* Blue */ html[data-accent="orange"]{ --acc:#D9720B } /* Orange */ html[data-accent="green"]{ --acc:#15803D } /* Green */ html[data-accent="violet"]{ --acc:#6D46D6 } /* Violet */ html[data-accent="red"]{ --acc:#C0332B } /* Red */ html[data-accent="slate"]{ --acc:#41556F } /* Slate */ /* dark */ html[data-theme="dark"][data-accent="blue"]{ --acc-ink:#598cef; --acc2:#598cef; --acc-dark:#598cef; --acc-soft:#112345; --acc-line:#19356d } /* 4.76:1 */ html[data-theme="dark"][data-accent="orange"]{ --acc-ink:#db7815; --acc2:#db7815; --acc-dark:#db7815; --acc-soft:#30231c; --acc-line:#593618 } /* 4.85:1 */ html[data-theme="dark"][data-accent="green"]{ --acc-ink:#4d9e6c; --acc2:#4d9e6c; --acc-dark:#4d9e6c; --acc-soft:#0d2625; --acc-line:#0f3c2b } /* 4.86:1 */ html[data-theme="dark"][data-accent="violet"]{ --acc-ink:#967ae1; --acc2:#967ae1; --acc-dark:#967ae1; --acc-soft:#1d1b41; --acc-line:#302665 } /* 4.8:1 */ html[data-theme="dark"][data-accent="red"]{ --acc-ink:#d26c66; --acc2:#d26c66; --acc-dark:#d26c66; --acc-soft:#2c1822; --acc-line:#501f24 } /* 4.82:1 */ html[data-theme="dark"][data-accent="slate"]{ --acc-ink:#7e8b9d; --acc2:#7e8b9d; --acc-dark:#7e8b9d; --acc-soft:#151e2e; --acc-line:#202b3e } /* 4.83:1 */ /* light */ html[data-theme="light"][data-accent="blue"]{ --acc-ink:#2a64d4; --acc2:#2a64d4; --acc-dark:#2a64d4; --acc-soft:#eaf1fd; --acc-line:#b8cef8 } /* 4.78:1 */ html[data-theme="light"][data-accent="orange"]{ --acc-ink:#a15408; --acc2:#a15408; --acc-dark:#a15408; --acc-soft:#fbf1e7; --acc-line:#f2cfac } /* 4.97:1 */ html[data-theme="light"][data-accent="green"]{ --acc-ink:#147839; --acc2:#147839; --acc-dark:#147839; --acc-soft:#e8f2ec; --acc-line:#afd4bd } /* 4.86:1 */ html[data-theme="light"][data-accent="violet"]{ --acc-ink:#6D46D6; --acc2:#6D46D6; --acc-dark:#6D46D6; --acc-soft:#f0edfb; --acc-line:#cdc0f1 } /* 5.21:1 */ html[data-theme="light"][data-accent="red"]{ --acc-ink:#C0332B; --acc2:#C0332B; --acc-dark:#C0332B; --acc-soft:#f9ebea; --acc-line:#eabab7 } /* 4.83:1 */ html[data-theme="light"][data-accent="slate"]{ --acc-ink:#41556F; --acc2:#41556F; --acc-dark:#41556F; --acc-soft:#eceef1; --acc-line:#bec5ce } /* 6.56:1 */ /* contrast */ html[data-theme="contrast"][data-accent="blue"]{ --acc-ink:#2d6be2; --acc2:#2d6be2; --acc-dark:#2d6be2; --acc-soft:#ffffff; --acc-line:#2F6FEB } /* 4.87:1 */ html[data-theme="contrast"][data-accent="orange"]{ --acc-ink:#ae5b09; --acc2:#ae5b09; --acc-dark:#ae5b09; --acc-soft:#ffffff; --acc-line:#D9720B } /* 4.88:1 */ html[data-theme="contrast"][data-accent="green"]{ --acc-ink:#15803D; --acc2:#15803D; --acc-dark:#15803D; --acc-soft:#ffffff; --acc-line:#15803D } /* 5.02:1 */ html[data-theme="contrast"][data-accent="violet"]{ --acc-ink:#6D46D6; --acc2:#6D46D6; --acc-dark:#6D46D6; --acc-soft:#ffffff; --acc-line:#6D46D6 } /* 6:1 */ html[data-theme="contrast"][data-accent="red"]{ --acc-ink:#C0332B; --acc2:#C0332B; --acc-dark:#C0332B; --acc-soft:#ffffff; --acc-line:#C0332B } /* 5.6:1 */ html[data-theme="contrast"][data-accent="slate"]{ --acc-ink:#41556F; --acc2:#41556F; --acc-dark:#41556F; --acc-soft:#ffffff; --acc-line:#41556F } /* 7.63:1 */ /* The label that sits on a solid accent fill. Chosen per accent, not per theme — the fill is the same hue in all three. White on orange is 3.3:1, so orange takes near-black instead. */ html[data-accent="blue"]{ --on-acc:#ffffff } /* 4.57:1 */ html[data-accent="orange"]{ --on-acc:#0D1117 } /* 5.73:1 */ html[data-accent="green"]{ --on-acc:#ffffff } /* 5.02:1 */ html[data-accent="violet"]{ --on-acc:#ffffff } /* 6:1 */ html[data-accent="red"]{ --on-acc:#ffffff } /* 5.6:1 */ html[data-accent="slate"]{ --on-acc:#ffffff } /* 7.63:1 */ /* ---------------- THE PICKER ---------------- */ .appearance{ display:flex; flex-direction:column; gap:12px } .appearance .row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap } .appearance .row > b{ min-width:74px; font-size:13px; color:var(--ink2) } .appearance button{ border:1px solid var(--line2); background:var(--panel2); color:var(--ink2); border-radius:999px; padding:8px 15px; font:700 13.5px/1 inherit; cursor:pointer; display:inline-flex; align-items:center; gap:8px } .appearance button:hover{ border-color:var(--acc) } .appearance button[aria-pressed="true"]{ background:var(--acc); border-color:var(--acc); color:var(--on-acc,#fff) } .appearance .sw{ width:30px; height:30px; border-radius:50%; padding:0; border:2px solid transparent } .appearance .sw[aria-pressed="true"]{ border-color:var(--ink) } .appearance .chip{ width:26px; height:16px; border-radius:4px; border:1px solid rgba(0,0,0,.25); display:inline-block } .appearance small{ color:var(--mute); font-size:12.5px; line-height:1.45 } @media(pointer:coarse){ .appearance button{ min-height:44px } .appearance .sw{ width:44px; height:44px } }