fix: Make target background of references accessible in dark mode

[TimvdLippe]

Reported in our documents that the light blueish background for targeted references is not accessible:
Logius-standaarden/publicatie#57

Instead, we can use the same styling as we have for var(--borderedblock-bg) (which are used for examples), except make its opacity higher (5% to 30%).

[TimvdLippe]

With the new styling for dark mode:

[Copilot]

Pull request overview

Updates the ReSpec stylesheet to improve the visibility/accessibility of the “targeted reference” highlight in dark mode (per Logius-standaarden/publicatie#57).

Changes:

• Add a prefers-color-scheme: dark override for #references :target background styling.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

This introduces a hard-coded dark-mode highlight color (rgb(255 255 255 / 30%)), while the PR description indicates the intent is to reuse the same styling as var(--borderedblock-bg) with a higher opacity. To keep theme consistency if the underlying ReSpec variables change, consider basing this highlight on the existing variable (or updating the PR description to match the implementation).

Suggested change

	background: rgb(255 255 255 / 30%);
	background: color-mix(
	in srgb,
	var(--borderedblock-bg) 70%,
	transparent
	);

[TimvdLippe]

I have never used color-mix myself, so I don't know if this is the right syntax.

[TimvdLippe]

@marcoscaceres I don't think your suggestion worked: https://github.com/speced/respec/actions/runs/24139474102/job/70436612808#step:7:21

[marcoscaceres]

I’ll take a look and see if I can get something rough working locally

[marcoscaceres]

The bug being fixed is real — #eaf3ff in dark mode renders light text on a light blue background, which fails contrast badly. But the fix has a scoping issue that could cause a regression.

The problem with the current approach

ReSpec defaults to color-scheme: light (style.js:122), and dark.css is only loaded when a spec author explicitly opts into dark mode (style.js:125: if (colorScheme.content.includes("dark"))). However, the fix lives in respec.css.js — always bundled — and uses @media (prefers-color-scheme: dark), which fires based on OS preference regardless of what color-scheme the page declares.

So for any spec using the default color-scheme: light (the majority of specs), a user with a dark OS theme still triggers the new rule. The W3C base.css sets --bg: white in :root with no dark mode override of its own, so the body stays white. Compositing rgb(255 255 255 / 30%) over a white background makes the #references :target highlight invisible — a regression from the original #eaf3ff for those users.

Suggested fix

Remove the @media block from respec.css.js and instead inject an inline <style> inside the existing if (colorScheme.content.includes("dark")) block in src/w3c/style.js, so it only applies to specs that have actually opted into dark mode:

if (colorScheme.content.includes("dark")) {
  const darkModeStyleUrl = getStyleUrl("dark.css");
  document.head.appendChild(
    html`<link
      rel="stylesheet"
      href="${darkModeStyleUrl.href}"
      media="(prefers-color-scheme: dark)"
    />`
  );
  document.head.appendChild(
    html`<style media="(prefers-color-scheme: dark)">
      #references :target { background: rgb(255 255 255 / 30%); }
    </style>`
  );
  sub("beforesave", styleMover(darkModeStyleUrl));
}

This keeps the fix scoped to specs where dark mode is actually active, avoiding the regression for the default case.