Why my picture tag doesn't show the correct light image in Bootstrap 5?

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.
Is the tag mature enough to use it or should I search for an alternate solution ?

		<picture>
		<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" />
		</picture>

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).

2023-11-02_11-58-58

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.

[data-bs-theme=dark] {
  --bs-section-color-2: #56181E;
  --bs-section-color-3: #2A3428;
  --bs-section-color-4: #000;
  --bs-section-color-5: #111;
  --bs-section-color-6: #2A3428;
  --bs-section-color-7: #000000;
  --bs-section-color-8: #3A4538;
  --bs-section-color-9: #2A3428;
  --bs-section-color-10: #857800;
  --bs-section-color-11: #2A3428;
  --bs-text-body-calculate: #fff;
}

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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.