-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix edge case in color-mode.js #39224
Conversation
28d92c1
to
0a44ea7
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
This comment was marked as off-topic.
This comment was marked as off-topic.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
Description
Our team found a potential edge case while working on our Bootstrap fork.
When using the current version of
color-mode.js
:The results will be:
color-mode
on devicecolor-mode
on Bootstrap*
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:
Proposed patch:
Then you will have:
color-mode
on devicecolor-mode
on Bootstrap*
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
Checklist
npm run lint
)Live previews