-
Notifications
You must be signed in to change notification settings - Fork 58
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
fix(navbar): Improve navbar colors in dark mode #1135
Conversation
This rule only changes the background color of the navbar, which is not enough to fully restyle the navbar in dark mode. It might work in the default cases, but it certainly does not work if users have set $navbar-dark-bg or $navbar-light-bg to appropriate values. Note that Bootstrap expects the navbar colors to be static (i.e. the same in light and dark mode), so if we want to support different navbar colors we'll need to implement something better.
Bootstrap has the navbar toggler icon follow the global color mode, which makes the icon invisible when placed on a light background in dark mode. Outside of this rule, Bootstrap expects the navbar color to be consistent in light and dark mode.
Lets `inverse` be a character value that is used directly for `data-bs-theme`. Turns out this is a backwards compatible change that opens the door to the future addition of another argument.
54d004d
to
8809d33
Compare
afe580d
to
4a45236
Compare
// patched: toggler follows global theme unless in a light region | ||
.navbar:not([data-bs-theme="light"]) .navbar-toggler-icon { | ||
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; | ||
} |
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.
Is this gonna work sensibly for scenarios where we don't have control over the navbar markup (e.g., pkgdown, rmarkdown, flexdashboard, etc.)?
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.
I can look into this and will add anything that needs to be addressed to posit-dev/brand-yml#52. Bringing pkgdown and bslib back into alignment is part of that plan.
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.
This whole PR does interact with rmarkdown websites and the approach I'd like to take is to make .navbar-default
and .navbar-inverse
be no-op classes for BS 5+. We could also take them out of the markup when we know that we're in BS 5+. That's going to require another pass at this PR, though.
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.
LGTM once the remaining suggestion is addressed. Lets also remember to get the equivalent py-shiny changes in soon after merging
Co-authored-by: Carson Sievert <cpsievert1@gmail.com>
Closing this PR in favor of #1145, which builds on the work here and but includes recent PRs and an increased scope. |
This rule removed in this PR only changes the background color of the navbar, which is not enough to fully restyle the navbar in dark mode. It might work in the default cases, but it certainly does not work if users have set
$navbar-dark-bg
or$navbar-light-bg
to appropriate values, leading to inaccessible values (e.g. white text on a light background).This PR removes the changing of the navbar background color in dark mode. This is inline with upstream expectations: Bootstrap expects the navbar colors to be static (i.e. the same in light and dark mode).
If we want to support different navbar colors we'll need to implement something that compliments the current setup.
This PR also sets
data-bs-theme="dark"
on the navbar<nav>
element wheninverse = TRUE
and fixes the navbar toggle icon in dark mode.Important
Re-test after merging #1134
inverse = FALSE
, black on light blue is expected but white toggle button icon is not.inverse = TRUE
, white text on dark background is expected in both light/dark, before shows that light navbar bg was used in dark mode.Example app