twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.21k stars 78.77k forks source link

set $modal-content-color (null value) to --#{$prefix}body-color in _variables.scss #39977

Open confidential-nt opened 4 months ago

confidential-nt commented 4 months ago

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 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

KakaoTalk_Photo_2024-05-12-21-37-31

After

KakaoTalk_Photo_2024-05-12-21-37-18

Type of changes

Checklist

Live previews

Related issues

https://github.com/react-bootstrap/react-bootstrap/issues/6796

injae-kim commented 3 months ago

(+1, I'm suffering from the same issue 😢 waiting this PR!)