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

HTML & CSS
1

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

2023-10-31_15-30-29
2023-10-31_15-30-291000×591 203 KB

In Chrome it seems to be the other way around:

2023-10-31_15-31-30
2023-10-31_15-31-30907×783 224 KB

2

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.

3

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

4

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.

5

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

6

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.