Fix images on auto in download app example page

[MewenLeHo]

Related issues

Closes #2243

Description

Following the issue explained in #2243:

(1) I made some tests and it appears that the bug described in the issue only happens on a specific occasion: when your computer is set to 'Light mode' and you use the 'Auto color mode' on the page.

(2) If your your computer is set to 'Dark mode' and you use the 'Auto color mode' on the page the it works perfectly fine.

=> I made a fix in CSS for (1)
=> I also made an additional piece of code (see comment) for (2) as defensive CSS.

Motivation & Context

Prevent having both light and dark images in 'Auto color mode'.

Types of change

• Bug fix (non-breaking which fixes an issue)

Live previews

• https://deploy-preview-2261--boosted.netlify.app/docs/5.3/examples/download-app/

Checklist

Contribution

• I have read the contributing guidelines

Accessibility

• (na) My change follows accessibility good practices; I have at least run axe

Design

• (na) My change respects the design guidelines defined in Orange Design System
• My change is compatible with a responsive display

Development

• My change follows the developer guide
• (na) I have added JavaScript unit tests to cover my changes
• (na) I have added SCSS unit tests to cover my changes

Documentation

• (na) My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

• (na) My change introduces changes to the migration guide
• (na) My new component is well displayed in Storybook
• (na)My new component is compatible with RTL
• Manually run BrowserStack tests
• Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
• Code review
• (na) Design review
• (na) A11y review

After the merge

• Manually launch Percy tests

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	02b2b67
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/65111cc119e11e0008e4abe5
😎 Deploy Preview	https://deploy-preview-2261--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[louismaximepiton]

I'm fine landing it as a patch for a bug for v5.3.3 which will arrive soon. I think we don't need any defensive CSS on this.

However, maybe we can fix the color-mode javascript on Bootstrap directly because right now we have:

color-mode on Bootstrap	color-mode on device	Result in HTML
dark	*	data-bs-theme="dark"
light	*	data-bs-theme="light"
auto	dark	data-bs-theme="dark"
auto	light	data-bs-theme="auto"

For instance, I was able to reproduce the behavior you patch here by patching color-mode.js.

Here is the diff:

  const setTheme = theme => {
- if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-   document.documentElement.setAttribute('data-bs-theme', 'dark')
+ if (theme === 'auto') {
+   document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
  } else {

[MewenLeHo]

Defensive CSS was removed as requested.

A PR has been opened on Bootstrap's side to update color-form-js.

The plan here is to keep the CSS fix presented in the current PR to allow the example page to work correctly.

Then:
->if the js fix is not ok for Bootsrap: keep our CSS fix.
->if the js fix is ok for Bootsrap: keep our CSS fix until the js fix is merged in Boosted repository then remove if since it will no longer be needed.

[julien-deramond]

LGTM, adding something in #2223 to track it