<dialog> UA styles are not interoperable, and should use system colors.

[emilio]

https://html.spec.whatwg.org/#flow-content-3 has:

dialog {
  background: white;
  color: black;
}

That's what Firefox implements to the letter, but:

• That doesn't account for dark mode (Chromium uses -internal-light-dark(..) instead).
• That doesn't account for high contrast use cases (https://bugzilla.mozilla.org/show_bug.cgi?id=1761611).

To fix the above two things, I think we should instead make those two lines:

background-color: Canvas;
color: CanvasText;

(background-color instead of background because it's cheaper and shouldn't be observable, but...)

cc @nt1m @Futhark

[emilio]

Err, cc @lilles, sorry for the needless ping at-futhark :)

[emilio]

WebKit also implements the spec to the letter it seems: https://webkit-search.igalia.com/webkit/rev/ee84898cfec61c56212af2769ca6e7c88d02f4d8/Source/WebCore/css/dialog.css#10-11

[emilio]

https://bugzilla.mozilla.org/show_bug.cgi?id=1761611 has tentative patch and tests assuming this won't be too controversial.

[nt1m]

Yeah, I agree with this, I was implementing the spec to the letter. This is something I wanted to bring up after I noticed Chromium used -internal-light-dark(...).

+1 for Canvas/CanvasText combo.

[nt1m]

I filed https://bugs.webkit.org/show_bug.cgi?id=238425, will post a patch when WPT is upstream.

[lilles]

Totally agree canvas/canvastext makes sense.

@mfreed7

[lilles]

https://bugs.chromium.org/p/chromium/issues/detail?id=1310742

[domenic]

Given how fast people converged here, the same people may be interested in #5426 , which proposes making changes to other hard-coded colors.

The latest list of to-dos was in #5426 (comment) . Although, looking at how this was resolved, it seems like maybe my step (1) there is not a blocker? After that the thread got hijacked by the color-contrast debate that seems to be raging across multiple repositories... I'm hopeful some strong implementer involvement could get things back on track.

[emilio]

Fwiw i don't think we want to hardcode the specific colors. For example in Firefox link colors are configurable. We already use system colors for those, which react to dark mode with hopefully enough contrast.

[annevk]

@emilio right, the problem is that they are hardcoded in the HTML Standard currently.