No visual differentiation between active and disabled links in dark mode dropdown menus
Created by: Sanx78
Prerequisites
-
I have searched for duplicate or closed issues -
I have validated any HTML to avoid common problems -
I have read the contributing guidelines
Describe the issue
In 5.3 Alpha 1, there is no visual differentiation between active and disabled links in dark mode dropdown menus. This has been tested in Safari on iOS and in Chrome/Edge on Windows.
Active links are set to --bs-dropdown-link-color
, which itself inherits --bs-body-color
. Disabled links are set to --bs-dropdown-link-disabled-color
which is set to #adb5bd. In dark mode, --bs-body-color
is also set to #adb5bd.
This can be seen on the Bootstrap 5.3 doco page for dropdowns: https://getbootstrap.com/docs/5.3/components/dropdowns/#disabled
Reduced test cases
Issue demo here: https://codepen.io/Sanx78/pen/YzjjLEy
My personal fix (likely to be hated as it is a large sledgehammer for a very small nut) is here: https://codepen.io/Sanx78/pen/GRBBdOj
However, what I imagine will be the "correct" way of fixing it is to make --bs-dropdown-link-disabled-color
theme aware.
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Microsoft Edge
What version of Bootstrap are you using?
5.3.0 Alpha 1