/* Couponat — dark mode. Enqueued only when Customizer → Couponat → «Colour mode» is not "Light". How it switches (inc/assets.php + inc/customizer.php): - Dark: , this file on media="screen". - Auto: no data-theme, this file on media="screen and (prefers-color-scheme: dark)" → pure CSS, no JS. - Auto + toggle: this file on media="screen"; is "light" from the server (no-JS fallback) and a tiny inline script sets it to the visitor's saved choice, else the device setting, before the first paint. assets/js/theme-mode.js runs the header button. So every dark rule is scoped to :root:not([data-theme="light"]) — it applies whenever this file is active, unless the visitor picked light. Colours come from the same --cw-* tokens as light mode; brand-derived ones are mixed from --cw-brand-default so a custom brand colour (Customizer) still works in the dark. */ /* ---------- tokens ---------- */ :root:not([data-theme="light"]){ color-scheme:dark; --cw-bg-page:#0b1120; --cw-bg-card:#131c2e; --cw-bg-subtle:#1c2639; --cw-bg-tint:color-mix(in srgb,var(--cw-brand-default) 12%,#0b1120); --cw-bg-warm:#1c1912; --cw-bg-ink:#060a14; --cw-brand-soft:color-mix(in srgb,var(--cw-brand-default) 26%,#0b1120); --cw-brand-text:color-mix(in srgb,var(--cw-brand-default) 45%,#fff); --cw-brand-hover:color-mix(in srgb,var(--cw-brand-default) 35%,#fff); --cw-text-heading:#f1f5f9; --cw-text-body:#cbd5e1; --cw-text-muted:#94a3b8; --cw-text-placeholder:#7d8ba1; --cw-text-inverse:#fff; --cw-border-default:#27334a; --cw-border-hairline:#1c2638; --cw-border-brand:color-mix(in srgb,var(--cw-brand-default) 80%,#fff); --cw-code-bg:#2a2314; --cw-code-border:#c9a043; --cw-code-hover:#40341a; --cw-code-text:#ffe7a3; --cw-code-copied:#15803d; /* white "Copied" label on it: 5.0:1 (AA) */ --cw-success-default:#4ade80; --cw-success-tint:color-mix(in srgb,#22c55e 16%,#131c2e); --cw-warning-default:#fbbf24; --cw-warning-tint:color-mix(in srgb,#f59e0b 16%,#131c2e); --cw-danger-default:#f87171; --cw-danger-tint:color-mix(in srgb,#ef4444 16%,#131c2e); --cw-icon-default:#94a3b8; --cw-icon-brand:var(--cw-brand-text); --cw-shadow-card:0 1px 2px rgba(0,0,0,.35),0 4px 12px -2px rgba(0,0,0,.3); --cw-shadow-float:0 12px 28px -6px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35); --cw-shadow-brand-glow:0 8px 24px -4px color-mix(in srgb,var(--cw-brand-default) 40%,transparent); /* Block-editor colour presets (theme.json) follow the tokens, so pages built with them turn dark too. */ --wp--preset--color--bg-page:var(--cw-bg-page); --wp--preset--color--bg-card:var(--cw-bg-card); --wp--preset--color--bg-tint:var(--cw-bg-tint); --wp--preset--color--bg-warm:var(--cw-bg-warm); --wp--preset--color--bg-ink:var(--cw-bg-ink); --wp--preset--color--bg-subtle:var(--cw-bg-subtle); --wp--preset--color--brand-default:var(--cw-brand-default); --wp--preset--color--brand-hover:var(--cw-brand-hover); --wp--preset--color--brand-soft:var(--cw-brand-soft); --wp--preset--color--brand-text:var(--cw-brand-text); --wp--preset--color--brand-on-brand:var(--cw-brand-on-brand); --wp--preset--color--text-heading:var(--cw-text-heading); --wp--preset--color--text-body:var(--cw-text-body); --wp--preset--color--text-muted:var(--cw-text-muted); --wp--preset--color--text-placeholder:var(--cw-text-placeholder); --wp--preset--color--text-inverse:var(--cw-text-inverse); --wp--preset--color--border-default:var(--cw-border-default); --wp--preset--color--border-hairline:var(--cw-border-hairline); --wp--preset--color--border-brand:var(--cw-border-brand); --wp--preset--color--code-bg:var(--cw-code-bg); --wp--preset--color--code-border:var(--cw-code-border); --wp--preset--color--code-hover:var(--cw-code-hover); --wp--preset--color--code-text:var(--cw-code-text); --wp--preset--color--code-copied:var(--cw-code-copied); --wp--preset--color--success-default:var(--cw-success-default); --wp--preset--color--success-tint:var(--cw-success-tint); --wp--preset--color--warning-default:var(--cw-warning-default); --wp--preset--color--warning-tint:var(--cw-warning-tint); --wp--preset--color--danger-default:var(--cw-danger-default); --wp--preset--color--danger-tint:var(--cw-danger-tint); --wp--preset--color--icon-default:var(--cw-icon-default); --wp--preset--color--icon-brand:var(--cw-icon-brand); } /* ---------- base ---------- */ /* theme.json prints h5/h6 and the body colours as fixed hex values. */ :root:not([data-theme="light"]) body{background:var(--cw-bg-page);color:var(--cw-text-body)} :root:not([data-theme="light"]) :is(h5,h6){color:var(--cw-text-heading)} :root:not([data-theme="light"]) ::placeholder{color:var(--cw-text-placeholder);opacity:1} /* Other form fields follow color-scheme:dark; the comment form has its own borders, so give it the page colours. */ :root:not([data-theme="light"]) .comment-respond :is(textarea,input[type=text],input[type=email],input[type=url]){background:var(--cw-bg-page);color:var(--cw-text-heading)} /* ---------- surfaces whose light colours are hardcoded in theme.css ---------- */ /* --brand-hover is a light link-hover colour in the dark; buttons keep a darker hover so white text stays readable. */ :root:not([data-theme="light"]) .cw-btn--primary:hover{background:color-mix(in srgb,var(--cw-brand-default) 85%,#000)} :root:not([data-theme="light"]) .cw-btn--onBrand{color:color-mix(in srgb,var(--cw-brand-default) 85%,#000)} :root:not([data-theme="light"]) .cw-btn--onBrand:hover{background:color-mix(in srgb,var(--cw-brand-default) 14%,#fff);color:color-mix(in srgb,var(--cw-brand-default) 85%,#000)} /* Selected chip is a light pill in the dark: its text must be dark, not --text-inverse (white). */ :root:not([data-theme="light"]) .cw-chip[aria-selected="true"],:root:not([data-theme="light"]) .cw-filterChips .cw-chip[aria-current="true"],:root:not([data-theme="light"]) .cw-ccFilter__chip[aria-pressed="true"]{color:var(--cw-bg-page)} /* Hero / store header / season: the gradient angles follow the reading direction (ltr.css sets the LTR values). */ :root:not([data-theme="light"]) .cw-hero{background:radial-gradient(1200px 500px at var(--cw-hero-glow-1,85% -10%),color-mix(in srgb,var(--cw-brand-default) 22%,transparent),transparent 60%),radial-gradient(800px 400px at var(--cw-hero-glow-2,0% 110%),rgba(245,196,81,.07),transparent 60%),var(--cw-bg-page)} :root:not([data-theme="light"]) .cw-storeHeader{background:linear-gradient(var(--cw-storeHeader-angle,90deg),#1d1a12,var(--cw-bg-page))} :root:not([data-theme="light"]) .cw-seasonBanner{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} :root:not([data-theme="light"]) .cw-ctaBand__inner{border-color:#4a3d1d} /* Store logos are made for a white background (dark marks, transparent PNGs): keep the tile white. */ :root:not([data-theme="light"]) .cw-storeLogo:not(.cw-storeLogo--mono){background:#fff} /* Optional dark-mode site logo (Customizer → Site identity / Couponat). */ :root:not([data-theme="light"]) .cw-logo__img--dark{display:block} :root:not([data-theme="light"]) .cw-logo__img--light{display:none} /* Category circles: pastel tints become low-alpha tints with light glyphs. */ :root:not([data-theme="light"]) .cw-tone-0{--tone-fg:#93c5fd;--tone-bg:color-mix(in srgb,#93c5fd 16%,var(--cw-bg-page))} :root:not([data-theme="light"]) .cw-tone-1{--tone-fg:#f9a8d4;--tone-bg:color-mix(in srgb,#f9a8d4 16%,var(--cw-bg-page))} :root:not([data-theme="light"]) .cw-tone-2{--tone-fg:#86efac;--tone-bg:color-mix(in srgb,#86efac 16%,var(--cw-bg-page))} :root:not([data-theme="light"]) .cw-tone-3{--tone-fg:#fcd34d;--tone-bg:color-mix(in srgb,#fcd34d 16%,var(--cw-bg-page))} :root:not([data-theme="light"]) .cw-tone-4{--tone-fg:#c4b5fd;--tone-bg:color-mix(in srgb,#c4b5fd 16%,var(--cw-bg-page))} :root:not([data-theme="light"]) .cw-tone-5{--tone-fg:#5eead4;--tone-bg:color-mix(in srgb,#5eead4 16%,var(--cw-bg-page))} :root:not([data-theme="light"]) .cw-tone-6{--tone-fg:#fdba74;--tone-bg:color-mix(in srgb,#fdba74 16%,var(--cw-bg-page))} :root:not([data-theme="light"]) .cw-tone-7{--tone-fg:#cbd5e1;--tone-bg:color-mix(in srgb,#cbd5e1 16%,var(--cw-bg-page))} /* ---------- header toggle (Colour mode = "Auto + toggle"; this file is always on in that mode) ---------- */ .cw-modeToggle{display:none;place-items:center;inline-size:40px;block-size:40px;padding:0;border-radius:var(--cw-radius-full);border:1px solid var(--cw-border-default);background:transparent;color:var(--cw-icon-default);cursor:pointer;flex:none} .cw-mode-js .cw-modeToggle{display:grid} .cw-modeToggle:hover{border-color:var(--cw-border-brand);color:var(--cw-brand-text)} .cw-modeToggle__sun,:root[data-theme="dark"] .cw-modeToggle__moon{display:none} :root[data-theme="dark"] .cw-modeToggle__sun{display:block} /* ---------- Accounts (Wave 5): warm text on the dark butter tint ---------- */ :root:not([data-theme="light"]) :is(.cw-pill--warm,.cw-srating,.cw-codeSheet__uses){color:var(--cw-warning-default)} :root:not([data-theme="light"]) .cw-rate__star{color:var(--cw-border-default)} :root:not([data-theme="light"]) .cw-rate__star.is-on,:root:not([data-theme="light"]) .cw-rate__star.is-hover{color:var(--cw-code-border)} :root:not([data-theme="light"]) .cw-rate__star.is-mine{color:var(--cw-brand-text)}