Identified that $modal-content-color was set to null, which could lead to display issues in React Bootstrap Modals. Changed the value to --#{$prefix}body-color to ensure consistency and correct color application in modal components.
Motivation & Context
The modal text color was defaulting to black inside modals when using the data-bs-theme="dark" attribute.(React Bootstrap Modal Component) This was due to the bs-modal-color variable not being set, originally left as null likely for flexibility before the introduction of dark theme support.
Updated bs-modal-color to ensure appropriate text color contrasts when the dark theme is applied, avoiding visibility issues and improving user experience with dark modals. This change is essential as the use of data-bs-theme="dark" indicates a requirement for dark mode compatibility, which should logically include readable text colors.
Before
After
Type of changes
[x] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Refactoring (non-breaking change)
[ ] Breaking change (fix or feature that would change existing functionality)
Description
Identified that $modal-content-color was set to null, which could lead to display issues in React Bootstrap Modals. Changed the value to --#{$prefix}body-color to ensure consistency and correct color application in modal components.
Motivation & Context
The modal text color was defaulting to black inside modals when using the
data-bs-theme="dark"
attribute.(React Bootstrap Modal Component) This was due to thebs-modal-color
variable not being set, originally left as null likely for flexibility before the introduction of dark theme support.Updated
bs-modal-color
to ensure appropriate text color contrasts when the dark theme is applied, avoiding visibility issues and improving user experience with dark modals. This change is essential as the use ofdata-bs-theme="dark"
indicates a requirement for dark mode compatibility, which should logically include readable text colors.Before
After
Type of changes
Checklist
npm run lint
)Live previews
Related issues
https://github.com/react-bootstrap/react-bootstrap/issues/6796