Skip to content
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.

Sign up for GitHub

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

Closed
wants to merge 17 commits into from
Closed

fix(navbar): Improve navbar colors in dark mode #1135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
2c18592
fix(navbar): Don't flip navbar bg in dark mode
gadenbuie Nov 19, 2024
2d12f82
fix: apply `data-bs-theme="dark"` to `<nav>` when `inverse = TRUE`
gadenbuie Nov 19, 2024
d5bafdc
fix(bootstrap): Navbar toggler icon should follow navbar color mode
gadenbuie Nov 19, 2024
f37fe8a
fix(bootstrap): Keep global color mode follow
gadenbuie Nov 19, 2024
d1d1a20
feat(navbar): Set `data-bs-theme` from `inverse`
gadenbuie Nov 19, 2024
e3da96f
fix: Fix `_navbar.scss` patch
gadenbuie Nov 19, 2024
4a45236
Merged origin/main into fix/navbar-dark-mode
gadenbuie Nov 19, 2024
96349dd
Resave distributed files (GitHub Action)
gadenbuie Nov 19, 2024
f1729b6
chore: explicitly cast to character
gadenbuie Nov 21, 2024
ea92083
Merge 'origin/main' into branch fix/navbar-dark-mode
gadenbuie Nov 21, 2024
a5903dd
Resave distributed files (GitHub Action)
gadenbuie Nov 21, 2024
80c3758
Resave data (GitHub Action)
gadenbuie Nov 21, 2024
9de6165
feat: Only use `.navbar-default` and `.navbar-inverse` classes in BS <5
gadenbuie Nov 25, 2024
4ab2345
Resave distributed files (GitHub Action)
gadenbuie Nov 25, 2024
8b4dffd
fix(navbar_compat): navbar light background
gadenbuie Nov 25, 2024
b95330c
`devtools::document()` (GitHub Actions)
gadenbuie Nov 25, 2024
563039f
Resave distributed files (GitHub Action)
gadenbuie Nov 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 14 additions & 7 deletions R/navs-legacy.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,13 @@ navs_bar_ <- function(..., title = NULL, id = NULL, selected = NULL,
collapsible = TRUE, fluid = TRUE,
theme = NULL) {

navbar_color_mode <- switch(
as.character(inverse),
"TRUE" = "dark",
"FALSE" = "light",
inverse
)

if (identical(inverse, "auto")) {
inverse <- TRUE
if (identical(theme_preset_info(theme)$name, "shiny")) {
Expand All @@ -171,12 +178,12 @@ navs_bar_ <- function(..., title = NULL, id = NULL, selected = NULL,
theme = theme
)

if (!is.null(bg)) {
# navbarPage_() returns a tagList() of the nav and content
navbar[[1]] <- tagAppendAttributes(
navbar[[1]], style = css(background_color = paste(bg, "!important"))
)
}
# navbarPage_() returns a tagList() of the nav and content
navbar[[1]] <- tagAppendAttributes(
navbar[[1]],
style = if (!is.null(bg)) css(background_color = paste(bg, "!important")),
"data-bs-theme" = navbar_color_mode
cpsievert marked this conversation as resolved.
Show resolved Hide resolved
)

as_fragment(navbar, page = page)
}
Expand Down Expand Up @@ -211,7 +218,7 @@ navbarPage_ <- function(title,
position <- match.arg(position)
if (!is.null(position))
navbarClass <- paste0(navbarClass, " navbar-", position)
if (inverse)
if (isTRUE(inverse))
cpsievert marked this conversation as resolved.
Show resolved Hide resolved
navbarClass <- paste(navbarClass, "navbar-inverse")

if (!is.null(id))
Expand Down
Binary file modified R/sysdata.rda
View file
Open in desktop
Binary file not shown.
53 changes: 32 additions & 21 deletions inst/bs3compat/_navbar_compat.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,13 @@ ul.nav.navbar-nav {
}
}

@mixin navbar-background-dark($important: false) {
background-color: var(--bslib-navbar-inverse-bg, var(--#{$prefix}dark)) if($important, !important, null);
}

@mixin navbar-background-light($important: false) {
background-color: var(--bslib-navbar-default-bg, var(--#{$prefix}light)) if($important, !important, null);
}

.navbar {

Expand All @@ -83,31 +90,35 @@ ul.nav.navbar-nav {
--bslib-navbar-inverse-bg: #{$navbar-dark-bg};
}

// BS3 .navbar-default -> BS4 .navbar-light
&.navbar-default {
// Sets a variety of fg colors which are configurable via $navbar-light-* options
@extend .navbar-light;
background-color: var(--bslib-navbar-default-bg, var(--#{$prefix}light)) !important;
}

// BS3 .navbar-inverse -> BS4 .navbar-dark
&.navbar-inverse {
// Sets a variety of fg colors which are configurable via $navbar-dark-* options
@extend .navbar-dark;
background-color: var(--bslib-navbar-inverse-bg, var(--#{$prefix}dark)) !important;
// For BS5+ lean on emphasis-color
--bs-emphasis-color: white;
--bs-emphasis-color-rgb: 255, 255, 255;
@if $bootstrap-version < 5 {
// BS3 .navbar-default -> BS4 .navbar-light
&.navbar-default {
// Sets a variety of fg colors which are configurable via $navbar-light-* options
@extend .navbar-light;
@include navbar-background-light($important: true);
}

// BS3 .navbar-inverse -> BS4 .navbar-dark
&.navbar-inverse {
// Sets a variety of fg colors which are configurable via $navbar-dark-* options
@extend .navbar-dark;
@include navbar-background-dark($important: true);
}
}
}

$enable-dark-mode: false !default;
@if $enable-dark-mode {
@include color-mode(dark) {
.navbar.navbar-default {
background-color: var(--bslib-navbar-default-bg, var(--#{$prefix}dark)) !important;
}
@if $bootstrap-version >= 5 {
.navbar {
background-color: $navbar-bg;
}

[data-bs-theme="dark"] .navbar { @include navbar-background-dark(); }
[data-bs-theme="light"] .navbar { @include navbar-background-light(); }

// These are defined *after* the above rules because we want the local version
// to win without having to resort to specificity tricks.
.navbar[data-bs-theme="dark"] { @include navbar-background-dark(); }
.navbar[data-bs-theme="light"] { @include navbar-background-light(); }
}

// Implement bs3 navbar toggler; used in Rmd websites, i.e.
Expand Down
9 changes: 0 additions & 9 deletions inst/builtin/bs5/shiny/_rules.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,15 +174,6 @@ $bslib-checkbox-radio-margin-right: 0.35em !default;
}

.bslib-page-navbar, .bslib-page-dashboard {
> .navbar {
@if not $navbar-light-bg and not $navbar-bg {
--bslib-navbar-default-bg: var(--#{$prefix}body-bg);
}
@if not $navbar-dark-bg and not $navbar-bg {
--bslib-navbar-inverse-bg: var(--#{$prefix}body-color);
}
}

> .navbar + div {
// Since we're using a transparent navbar, we need to (generally) add a border-top
border-top: $card-border-width solid $card-border-color;
Expand Down
2 changes: 1 addition & 1 deletion inst/css-precompiled/4/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion inst/css-precompiled/5/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

21 changes: 20 additions & 1 deletion inst/lib/bs5/scss/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,7 @@
}

.navbar-dark,
[data-bs-theme="dark"] .navbar,
.navbar[data-bs-theme="dark"] {
// scss-docs-start navbar-dark-css-vars
--#{$prefix}navbar-color: #{$navbar-dark-color};
Expand All @@ -307,12 +308,30 @@
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
// scss-docs-end navbar-dark-css-vars

// patched: toggler icon should follow closest navbar color mode over global mode
.navbar-toggler-icon {
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
}
}

@if $enable-dark-mode {
@include color-mode(dark) {
.navbar-toggler-icon {
// 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)};
}
Comment on lines +320 to 323
Copy link
Collaborator

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.)?

Copy link
Member Author

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.

Copy link
Member Author

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.

}
}

.navbar[data-bs-theme="light"] {
// patched: Make sure local light navbar overrides page global
--#{$prefix}navbar-color: #{$navbar-light-color};
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-light-active-color};
--#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
}
Binary file modified man/figures/page-navbar.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 44 additions & 0 deletions tools/patches/034-bs5-navbar-bg.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
diff --git a/inst/lib/bs5/scss/_navbar.scss b/inst/lib/bs5/scss/_navbar.scss
index 988bbe09..ba75744e 100644
--- a/inst/lib/bs5/scss/_navbar.scss
+++ b/inst/lib/bs5/scss/_navbar.scss
@@ -296,6 +296,7 @@
}

.navbar-dark,
+[data-bs-theme="dark"] .navbar,
.navbar[data-bs-theme="dark"] {
// scss-docs-start navbar-dark-css-vars
--#{$prefix}navbar-color: #{$navbar-dark-color};
@@ -307,12 +308,30 @@
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
// scss-docs-end navbar-dark-css-vars
+
+ // patched: toggler icon should follow closest navbar color mode over global mode
+ .navbar-toggler-icon {
+ --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+ }
}

@if $enable-dark-mode {
@include color-mode(dark) {
- .navbar-toggler-icon {
+ // 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)};
}
}
}
+
+.navbar[data-bs-theme="light"] {
+ // patched: Make sure local light navbar overrides page global
+ --#{$prefix}navbar-color: #{$navbar-light-color};
+ --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
+ --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
+ --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
+ --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
+ --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
+ --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
+ --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
+}