1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
diff --git a/inst/lib/bs4/scss/_navbar.scss b/inst/lib/bs4/scss/_navbar.scss
index 47a565a..a15fc0f 100644
--- a/inst/lib/bs4/scss/_navbar.scss
+++ b/inst/lib/bs4/scss/_navbar.scss
@@ -248,6 +248,7 @@
// Dark links against a light background
.navbar-light {
+ background-color: $navbar-light-bg; // not !important so .bg-* utilities can still override
.navbar-brand {
color: $navbar-light-brand-color;
@@ -300,6 +301,7 @@
// White links against a dark background
.navbar-dark {
+ background-color: $navbar-dark-bg; // not !important so .bg-* utilities can still override
.navbar-brand {
color: $navbar-dark-brand-color;
diff --git a/inst/lib/bs4/scss/_variables.scss b/inst/lib/bs4/scss/_variables.scss
index 83ce31a..df455eb 100644
--- a/inst/lib/bs4/scss/_variables.scss
+++ b/inst/lib/bs4/scss/_variables.scss
@@ -749,19 +749,27 @@ $navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-nav-scroll-max-height: 75vh !default;
-$navbar-dark-color: rgba($white, .5) !default;
-$navbar-dark-hover-color: rgba($white, .75) !default;
-$navbar-dark-active-color: $white !default;
-$navbar-dark-disabled-color: rgba($white, .25) !default;
+
+$navbar-bg: null !default; // Background color for any navbarPage()
+$navbar-dark-bg: if($navbar-bg, $navbar-bg, $dark) !default; // Background color for navbarPage(inverse = TRUE)
+$navbar-light-bg: if($navbar-bg, $navbar-bg, $light) !default; // Background color for navbarPage(inverse = FALSE)
+
+$navbar-dark-contrast: color-contrast($navbar-dark-bg) !default; // Deepest contrasting color for navbarPage(inverse = TRUE). Defaults to $white or $black based on luminance of $navbar-dark-bg
+$navbar-light-contrast: color-contrast($navbar-light-bg) !default; // Deepest contrasting color for navbarPage(inverse = FALSE). Defaults to $white or $black based on luminance of $navbar-light-bg
+
+$navbar-dark-color: rgba($navbar-dark-contrast, .5) !default;
+$navbar-dark-hover-color: rgba($navbar-dark-contrast, .75) !default;
+$navbar-dark-active-color: $navbar-dark-contrast !default;
+$navbar-dark-disabled-color: rgba($navbar-dark-contrast, .25) !default;
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-dark-toggler-border-color: rgba($white, .1) !default;
+$navbar-dark-toggler-border-color: rgba($navbar-dark-contrast, .1) !default;
-$navbar-light-color: rgba($black, .5) !default;
-$navbar-light-hover-color: rgba($black, .7) !default;
-$navbar-light-active-color: rgba($black, .9) !default;
-$navbar-light-disabled-color: rgba($black, .3) !default;
+$navbar-light-color: rgba($navbar-light-contrast, .5) !default;
+$navbar-light-hover-color: rgba($navbar-light-contrast, .75) !default;
+$navbar-light-active-color: $navbar-light-contrast !default;
+$navbar-light-disabled-color: rgba($navbar-light-contrast, .25) !default;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-light-toggler-border-color: rgba($black, .1) !default;
+$navbar-light-toggler-border-color: rgba($navbar-light-contrast, .1) !default;
$navbar-light-brand-color: $navbar-light-active-color !default;
$navbar-light-brand-hover-color: $navbar-light-active-color !default;
|
