For some $dropdown- variables, {bslib} has light and dark mode variants.
https://github.com/rstudio/bslib/blob/bc56d8e7671b6c1c41c041b6992e24cf1a4bc05f/inst/lib/bs5/scss/_variables.scss#L1296
When building a pkgdown site with light-switch: true, I expect the navbar dropdowns to respect the dropdown-dark-* variables defined in _pkgdown.yml. Instead, these variables appear to be ignored—dropdowns remain in light mode (no [data-bs-theme="dark"] applied) unless I add custom SCSS rules.
So far, I haven't understood why these variables are being ignored. I would appreciate understanding this and whether this is intended behavior or if we can change it.
The _pkgdown.yml and extra.scss files below can be used to illustrate the issue (colors may be sufficient for the actual purpose but not for real life). Build the site with and without extra.scss.
_pkgdown.yml:
url: ~
template:
light-switch: true
bslib:
version: 5
preset: default
# Make it obvious which mode we are in
body-bg: "#F0ECDA"
body-bg-dark: "#192D3C"
body-color: "#152740"
body-color-dark: "#F0F0F0"
navbar-light-bg: "#487F86"
navbar-dark-bg: "#96AAAA"
# What we care about in this issue
dropdown-link-hover-bg: "#797292"
dropdown-dark-link-hover-bg: "#23857A"
dropdown-link-active-bg: "rgba($dropdown-link-hover-bg, .4)"
dropdown-dark-link-active-bg: "rgba($dropdown-dark-link-hover-bg, .4)"
dropdown-link-active-color: "$body-color"
dropdown-dark-link-active-color: "$body-color-dark"
extra.scss
/*-- scss:rules --*/
[data-bs-theme="dark"] .dropdown-item {
color: $body-color-dark;
&.active, &:active {
background-color: rgba(#C88200,.4);
}
&:hover, &:focus {
background-color: #C88200;
}
}
For some
$dropdown-variables, {bslib} has light and dark mode variants.https://github.com/rstudio/bslib/blob/bc56d8e7671b6c1c41c041b6992e24cf1a4bc05f/inst/lib/bs5/scss/_variables.scss#L1296
When building a pkgdown site with
light-switch: true, I expect the navbar dropdowns to respect thedropdown-dark-*variables defined in_pkgdown.yml. Instead, these variables appear to be ignored—dropdowns remain in light mode (no[data-bs-theme="dark"]applied) unless I add custom SCSS rules.So far, I haven't understood why these variables are being ignored. I would appreciate understanding this and whether this is intended behavior or if we can change it.
The
_pkgdown.ymlandextra.scssfiles below can be used to illustrate the issue (colors may be sufficient for the actual purpose but not for real life). Build the site with and withoutextra.scss._pkgdown.yml:extra.scss