/* ========================================================================== Criteo header — dark mode. Remaps the theme's color presets when is set. Spiel's styles reference these custom properties, so flipping them here recolors the page content. The header bar stays Criteo blue in both modes. ========================================================================== */ :root[data-theme="dark"] { --wp--preset--color--base: #14171d; /* was #ffffff — backgrounds */ --wp--preset--color--contrast: #eef1f6; /* was #000000 — text */ --wp--preset--color--secondary: #e6e8ee; /* light accents */ --wp--preset--color--tertiary: #9aa3b2; /* muted text */ /* --wp--preset--color--primary stays #296DEB (the blue header bar) */ } :root[data-theme="dark"] body { background-color: var( --wp--preset--color--base ); color: var( --wp--preset--color--contrast ); } /* The mega-menu panel tracks the page surface (dark in dark mode). It uses var(--base) for its background, so it flips automatically; this just lifts it slightly off pure background and softens the shadow. */ :root[data-theme="dark"] .criteo-mega__panel, :root[data-theme="dark"] .criteo-catmenu__panel { background-color: #1c2029; box-shadow: 0 24px 48px rgba( 0, 0, 0, 0.6 ); } :root[data-theme="dark"] .criteo-catmenu__cats { border-right-color: rgba( 255, 255, 255, 0.12 ); } :root[data-theme="dark"] .criteo-catmenu__thumb { background-color: rgba( 255, 255, 255, 0.08 ); } /* Category hover/active: navy (primary) is unreadable on the dark panel, so use a lightened blue that stays legible while keeping the blue-selection look. */ :root[data-theme="dark"] .criteo-catmenu__cat:hover, :root[data-theme="dark"] .criteo-catmenu__cat.is-active { color: #6ea8ff; background-color: rgba( 110, 168, 255, 0.16 ); } /* The STORY PREVIEWS needed the same substitution and never got it (fixed in 1.8.3). Two rules in header.css colour text with `primary`, and `primary` is #130183 in BOTH colour modes — it is the one preset the toggle does not remap — so on the #1c2029 panel they came out navy-on-near-black: .criteo-catmenu__post-cat contrast 1.06:1 (invisible) .criteo-catmenu__post:hover .criteo-catmenu__post-title contrast 1.06:1 (vanished ON HOVER) Measured, not eyeballed: 1.06:1 against the panel, where AA small text wants 4.5:1. The category label was simply never visible in dark mode, and pointing at a story made its headline disappear — the pointer removed the thing it was pointing at. Both go to the same #6ea8ff the category list already uses, so the whole dropdown speaks one hover language. Measured after: 6.76:1, comfortably past AA. The resting title and the date were already fine (14.4:1 and 6.41:1) because they use `contrast` and `tertiary`, which the toggle DOES remap. That is the tell for this class of bug: `primary` never flips, so any `primary` text on a surface that flips needs an explicit override here. */ :root[data-theme="dark"] .criteo-catmenu__post-cat { color: #6ea8ff; } :root[data-theme="dark"] .criteo-catmenu__post:hover .criteo-catmenu__post-title { color: #6ea8ff; } /* Smooth the flip so it doesn't jar. `.criteo-footer` joined the list in 3.5.0: the footer band is its own painted surface now (#E3E9F6 / #1c2029) rather than a navy pill that never changed, so without this it snapped while the page eased. */ body, .criteo-mega__panel, .criteo-footer { transition: background-color 0.2s ease, color 0.2s ease; }