twbs
Fix the color on toast, form-label, modal and card when set the data-bs-theme="dark" on the element itself
Fix the color on table, toast, form-label, modal and card when set the data-bs-theme="dark" on the element itself
and fix the theme switcher in some examples
Description
Motivation & Context
Type of changes
- [x] Bug fix (non-breaking change which fixes an issue)
- [x] Refactoring (non-breaking change)
Checklist
- [x] I have read the contributing guidelines
- [x] My code follows the code style of the project (using
npm run lint) - [x] I have added tests to cover my changes
- [x] All new and existing tests passed
Live previews
Related issues
This breaks light mode card variants:
- https://twbs-bootstrap.netlify.app/docs/5.3/components/card/#card-styles
- https://deploy-preview-38212--twbs-bootstrap.netlify.app/docs/5.3/components/card/#card-styles
I also don't see a problem in the before state for stuff like form labels and toasts. Do you have screenshots of intended before/after to better show what needs addressing and reviewing here?
ok i fixed the card variants
for Card
data-bs-theme="dark" on card itself
before
after
dropdown example
dark dropdown without any other change to the light dropdown only the data-bs-theme="dark" on itself
this fixes the dark preview
https://deploy-preview-38212--twbs-bootstrap.netlify.app/docs/5.3/examples/dropdowns/
before
after
the Theme Switcher does not work on some sample pages because there is no bootstrap.js included
https://deploy-preview-38236--twbs-bootstrap.netlify.app/docs/5.3/examples/blog-rtl/ https://deploy-preview-38236--twbs-bootstrap.netlify.app/docs/5.3/examples/blog/ https://deploy-preview-38236--twbs-bootstrap.netlify.app/docs/5.3/examples/cover/ https://deploy-preview-38236--twbs-bootstrap.netlify.app/docs/5.3/examples/grid/ https://deploy-preview-38236--twbs-bootstrap.netlify.app/docs/5.3/examples/jumbotron/ https://deploy-preview-38236--twbs-bootstrap.netlify.app/docs/5.3/examples/pricing/ https://deploy-preview-38236--twbs-bootstrap.netlify.app/docs/5.3/examples/sign-in/ https://deploy-preview-38236--twbs-bootstrap.netlify.app/docs/5.3/examples/sticky-footer/
for Labels and Floating labels
data-bs-theme="dark" on parent (form) or element itself
before
after
on accordion, alert, modal, pagination, listgroup, progress the data-bs-theme="dark" already works