Re: Inverting colors for images in dark mode

I did the invert trick for diagrams in DAPT, fwiw. https://github.com/w3c/dapt/blob/603b86315cb1407af958f663fce162b71d2fabe0/index.html#L140 and https://github.com/w3c/dapt/blob/603b86315cb1407af958f663fce162b71d2fabe0/index.html#L175 - more about this in a couple of paragraphs

There's something else broken, which is that the script that adds the widget to change light/dark/auto mode, which works by setting the darkmode class on <body>, defined in fixup.js, doesn't set it on page load, it only changes it when the widget is operated. So you can set it, then reload, and the setting looks like it's still right but the page looks wrong.

And, because there are two mechanisms, equivalent to two bits, being the browser's decision about darkmode, and the widget's decision about darkmode, there are 4 permutations, and in DAPT I had to double up all the CSS, once checking for the media query result and the other for the darkmode class.

I did not enjoy this.

N


On 25/03/2025, 14:56, "Philippe Le Hégaret" <plh@w3.org <mailto:plh@w3.org>> wrote:


External: Think before clicking


Looking at [1] in dark mode makes the image quite bright.


Bert just introduced me to the "filter: invert(1)" magic.
https://www.w3.org/2025/Talks/AC/intro-tech-program/#rec-track <https://www.w3.org/2025/Talks/AC/intro-tech-program/#rec-track>


[[
@media (prefers-color-scheme: dark) {
[...]
.can-invert {filter: invert(1)} /* For images whose colors can be
inverted */
}


]]
https://www.w3.org/2025/Talks/AC/Templates/slides.css <https://www.w3.org/2025/Talks/AC/Templates/slides.css>




So, I'm wondering if adding those rules in the /TR style sheet would be
useful
https://www.w3.org/StyleSheets/TR/2021/dark.css <https://www.w3.org/StyleSheets/TR/2021/dark.css>


ie, if you believe your image "supports darkmode", you would be able to add
class="can-invert" on IMG and SVG elements


opinions?


Philippe


[1] https://www.w3.org/TR/navigation-timing-2/#processing-model <https://www.w3.org/TR/navigation-timing-2/#processing-model>

Received on Tuesday, 25 March 2025 15:05:32 UTC