I am using the following tag in order to have an image for the dark mode and one for the light mode. It seems to me I am missing something as it doesn’t appear to behave like expected and also differently between Firefox and Chrome.
<source style="max-width: 150px; margin-bottom: 10px;" srcset="./assets/aurora/picLogoBlancoAurora.png" media="(prefers-color-scheme:dark)" />
<img style="max-width: 150px; margin-bottom: 10px;" src="./assets/aurora/picLogoColorAurora.png" />
Using Firefox In dark mode it does correctly display the logo I am expecting picLogoBlancoAurora.png but not in the light mode
In Chrome it seems to be the other way around:
I used that code with two of my images and when I toggle the dark mode in both devtools it works exactly the same on both Chrome and Firefox and shows as it should.
If I set the prefers-color-scheme to dark in the developers’ tools rendering it indeed comes up right! This is where I have got that issue
What browser versions and os systems are you testing in?
I can’t test on my imac as its a few years old and doesn’t have dark mode setting so I can only test in devtools (which indeed shows the correct image).
If I get a chance later I’ll check on a PC and see what happens.
Windows 10 and Chrome V118 or Firefox V119. On both toggling the dark/light mode do works fine for the image but not when I am using the website toggle mode (found on the top right).
As far as I can see (and understand) that’s a custom dark mode setting that’s implemented in the html and css and nothing to do with the system dark mode.
If your picture element is detecting the
media="(prefers-color-scheme:dark)" then that will only change when the dark mode is changed at system level (in your window settings).
If you want a different image to show without setting at system level then I assume you would need to use the data attribute that is added to the html element instead.
<html lang="es" data-bs-theme="dark">
That’s what your program is using to change colors.
If I change to dark mode at system level then nothing changes on your page (apart from the browser chrome).
I couldn’t find that picture element you showed in your first post so I guess I was looking in the wrong place?
I mat be missing something as I don’t have dark mode on my imac that I use all the time so am testing on a spare PC at the moment.