Fix edge case in color-mode.js

[MewenLeHo]

Description

Our team found a potential edge case while working on our Bootstrap fork.

When using the current version of color-mode.js:

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

The results will be:

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

At this point you may have an edge case when your device is set to 'Light mode' and you use the 'Auto color mode' on the page because you will have to add more CSS to make something like:

@media (prefers-color-scheme: light) {
  [data-bs-theme="auto"] {
    // your code...
  }
}

Proposed patch:

  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 {

Then you will have:

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

And you don't need to add extra CSS everywhere.

Motivation & Context

Fix edge case when your device is set to 'Light mode' and you use the 'Auto color mode' on the page.

Type of changes

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

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• (na) My change introduces changes to the documentation
• (na) I have updated the documentation accordingly
• (na) I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-39224--twbs-bootstrap.netlify.app/

[louismaximepiton]

Thanks for the PR 🎉

I'm not in the JS team but it adds some consistency for color-mode. This looks safe to me to implement:

• This doesn't interfer with any other mode than auto that we've been adding on Bootstrap.
• It adds consistency over the data-bs-theme added on the HTML.
• It defaults to the two commons color modes proposed by every browsers/OS.

[julien-deramond]

Thanks for this PR @MewenLeHo

I can confirm the weird behavior in auto mode that switched between data-bs-theme="dark" (dark OS) and data-bs-theme="auto" (light OS). You fix allows to set the second use case to data-bs-theme="light" so that the behavior is consistent and allows to avoid handling "auto" in CSS.

@twbs/js-review, do you want to look at it too for a final review?

Note: when merged, we might want to:

• Inform users in the release note if they copied & pasted this file to update it
• Update our other repositories where a similar color-modes.js is used