feat: change useColorMode selector from 'body' to 'html' #2830
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
- Changes default selector in useColorMode from 'body' to 'html' to align with VueUse defaults and Bootstrap v5.3 recommendations - Adds comprehensive test suite for useColorMode composable - Maintains backward compatibility by allowing selector override - Fixes issue #2822 Co-authored-by: VividLemon <[email protected]>
Copilot
AI
changed the title
[WIP] useColorMode differences from VueUse
feat: change useColorMode selector from 'body' to 'html'
Sep 5, 2025
Contributor
|
Important Review skippedBot user detected. To trigger a single review, invoke the You can disable this status message by setting the Comment |
VividLemon
approved these changes
Sep 6, 2025
Merged
xvaara
added a commit
to xvaara/bootstrap-vue-next
that referenced
this pull request
Sep 11, 2025
* upstream/main: (32 commits) chore: release main (bootstrap-vue-next#2838) feat(BButtonToolbar): Add keyboard navigation support (bootstrap-vue-next#2837) fix(BFormSelect): modelValue not being applied during SSR (bootstrap-vue-next#2835) feat(BTable): Implement keyboard navigation (bootstrap-vue-next#2834) fix: BOffcanvas responsive SSR compatibility - defer breakpoint evaluation to client-side (bootstrap-vue-next#2833) chore: release main (bootstrap-vue-next#2831) fix(BDropdown): transition broken by inline display styles (bootstrap-vue-next#2832) feat: change useColorMode selector from 'body' to 'html' (bootstrap-vue-next#2830) chore: release main (bootstrap-vue-next#2817) feat: Add headerAttrs prop to BOffcanvas and BModal components docs: Add useScrollspy documentation fix: Remove lazy-modifier warning on FormInput docs (bootstrap-vue-next#2825) feat(BSort)!: Implement initial-sort-direction and move compare from sort-by to fields (bootstrap-vue-next#2777) docs(table): fix incorrect list item (bootstrap-vue-next#2823) docs: Fix grammar in documentation data files (bootstrap-vue-next#2816) doc(BTooltip): Parity pass (bootstrap-vue-next#2762) docs(BOverlay): Parity pass (bootstrap-vue-next#2767) feat: implement BFormRating disabled state (bootstrap-vue-next#2753) (bootstrap-vue-next#2793) docs: fix otp for index and reference pages (bootstrap-vue-next#2819) docs(BApp): add some additional details around legacy plugin use (bootstrap-vue-next#2820) ...
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The
useColorModecomposable in bootstrap-vue-next was targeting the<body>element instead of the<html>element, which differs from both VueUse's default behavior and Bootstrap v5.3's recommendations.Changes Made
'body'to'html'inuseColorModecomposableBefore vs After
Before:
After:
Why This Change
useColorModedefaults to targeting the<html>element<html>elementTesting
data-bs-themeattribute is correctly applied to<html>elementThe screenshot shows the composable successfully applying dark mode with the
data-bs-theme="dark"attribute on the HTML element.Fixes #2822.
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.