-
Notifications
You must be signed in to change notification settings - Fork 54
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dark mode: form color #2278
Dark mode: form color #2278
Conversation
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Juste 2 little observation:
- Just to be sure, I supposed it is due to browser, but in Chrome we have a border
#777
around the purple, and not in FF - In Chrome, when the page is globally in light mode, when opening the picker, it has contextually a dark or light bg, depending on the component's theme. But when the page is globally in dark mode, picker always sticks to dark background. (supposed its due to the browser's implementation :-) )
Otherwise it looks good! If you approve both observations, I think you can merge!
Good catch! it should have come from Bootstrap merge commits we must have missed it. I've added it with b19be8c.
I wasn't aware of such a behavior. I think this should probably be tackled Bootstrap side with |
Description
Form color in dark mode, by using existing and new Sass vars :
$form-color-border-color
var(--#{$prefix}emphasis-color)
$form-color-hover-bg-color
var(--#{$prefix}emphasis-color)
$form-color-disabled-bg-color
$input-bg
$form-color-disabled-border-color
$gray-500
var(--#{$prefix}disabled-color)
$form-color-disabled-background-swatch
brightness(0) invert(1) brightness(.8)
var(--#{$prefix}disabled-filter)
--bs-disabled-filter
(associated to$disabled-filter
and$disabled-filter-dark
. It renders the same value as--bs-disabled-color
). Use it on icons or whatever to have the same rendering.Links