Bootswatch theme difference on computer vs published

Publishing Your Results
1

I customized my dashboard with the following:

dash_theme <- bs_theme(
  version = 5,
  bootswatch = "sandstone"
) |>
  bs_add_variables(
    "navbar-bg" = "$primary",
    "navbar-color" = "$light",
    .where = "declarations"
  ) |>
  bs_add_rules("
    .navbar { color: var(--bs-light) !important; }
    .navbar .navbar-brand, .navbar .nav-link { color: var(--bs-light) !important; }
  ")

which looks great when I run the app on my computer: the sandstone theme from bootswatch, with the darkblue navbar (I had to add this, otherwise the navbar showed up as beige). However, after deploying it to shinyapps.io, and going to the site, the navbar shows up as brightgreen (the color for success, not primary)...?
So now I am wondering if this is an issue on my side (should I just leave out all the extra stuff after |> because it's my local version that gets the colors wrong) or on the shinyapps.io side?

If this helps, when I use "inspect" on the published site, for <div class="navbar-header"> ... </div> it shows the following CSS code:

.navbar {
    color: var(--bs-light) !important;
}

and

.navbar {
    --bslib-navbar-default-bg: #3e3f3a;
    --bslib-navbar-inverse-bg: #93c54b;
}

The inverse-bg color is the green color I do not want. And there is also:

.navbar.navbar-inverse {
    background-color: var(--bslib-navbar-inverse-bg, var(--bs-dark)) !important;
    --bs-emphasis-color: white;
    --bs-emphasis-color-rgb: 255, 255, 255;
}

Where the first option for background-color is unchecked. If I check it, it makes the navbar darkgrey (sandstones secondary color).
And it also shows in the section :root, [data-bs-theme="light"] { } that the theme colors are correct (that's a long one, so I won't copy - paste everything, but it shows --bs-primary: #325d88;, also showing the actual color in a box, and that is indeed the primary color).

Inspecting the element in the version rendered on my computer gives me far less for navbar, only the first CSS above (the --bs-light part). The colors in :root, [data-bs-theme="light"] { } are also correct. The version on my computer also contains

:root {
    --bslib-navbar-light-bg: var(--bslib-navbar-default-bg, var(--bs-light));
    --bslib-navbar-dark-bg: var(--bslib-navbar-inverse-bg, var(--bs-black));
}

which I do not see in the online version.

Both have

:root {
    --bslib-bootstrap-version: 5;
    --bslib-preset-name: sandstone;
    --bslib-preset-type: bootswatch;

Where am I going wrong here? Seems to me there is something going on with the inverse colors?
Mac OSX 12.4, R 4.4.0, shiny 1.8.1.1, bslib 0.9.0. The package shinydashboard is also active, in case that might matter.

2

Is your ShinyApps deployment also using bslib 0.9.0? There were some significant updates and I think some default changes in the 0.9.0 release that you might be taking advantage of on your Mac, but might not be available on ShinyApps

1 Like