Bootstrap recommends changing card colors using text-bg-{theme} classes, but this approach reveals a number of tricky problems we've introduced with the dashboard design, as well as issues with the sidebar defaults. (App on shinylive)
Example App
```r
library(shiny)
library(bslib)
library(glue)
set.seed(42 + 4)
states <- c("base", "default", "primary", "secondary", "info", "success", "warning", "danger", "dark", "light")
ui <- page_fillable(
# Enable line below to see app without the dashboard design
# theme = bs_theme(5, "shiny", "bslib-dashboard-design" = FALSE),
layout_column_wrap(
width = 200,
!!!purrr::map(states, function(state) {
card(
class = glue("text-bg-{state}"),
card_header(glue("My {state} card")),
layout_sidebar(
sidebar = sidebar(
width = 100,
lorem::ipsum(1, 1, 3)
),
lorem::ipsum(1, 1, 6)
)
)
})
)
)
server <- function(input, output, session) { }
shinyApp(ui = ui, server = server)
```
With dashboard design (bslib default)
With the dashboard design, using text-bg-{state} results in the following card styles. In particular, the card cap is forced to have a white background and the sidebars are always $body-color text on a $body-bg background.
With dashboard design disabled
With the dashboard design disabled, cards are close to the desired state, but the sidebar foreground color is forced to $body-color rather than inheriting.
Base Bootstrap
With bs_theme(5, "bootstrap"), we see the following styles where again the sidebar foreground color is problematic.
Bootstrap recommends changing card colors using
text-bg-{theme}classes, but this approach reveals a number of tricky problems we've introduced with the dashboard design, as well as issues with the sidebar defaults. (App on shinylive)Example App
```r library(shiny) library(bslib) library(glue) set.seed(42 + 4) states <- c("base", "default", "primary", "secondary", "info", "success", "warning", "danger", "dark", "light") ui <- page_fillable( # Enable line below to see app without the dashboard design # theme = bs_theme(5, "shiny", "bslib-dashboard-design" = FALSE), layout_column_wrap( width = 200, !!!purrr::map(states, function(state) { card( class = glue("text-bg-{state}"), card_header(glue("My {state} card")), layout_sidebar( sidebar = sidebar( width = 100, lorem::ipsum(1, 1, 3) ), lorem::ipsum(1, 1, 6) ) ) }) ) ) server <- function(input, output, session) { } shinyApp(ui = ui, server = server) ```With dashboard design (bslib default)
With the dashboard design, using
text-bg-{state}results in the following card styles. In particular, the card cap is forced to have a white background and the sidebars are always$body-colortext on a$body-bgbackground.With dashboard design disabled
With the dashboard design disabled, cards are close to the desired state, but the sidebar foreground color is forced to
$body-colorrather than inheriting.Base Bootstrap
With
bs_theme(5, "bootstrap"), we see the following styles where again the sidebar foreground color is problematic.