making the switch from shinydashboardPlus to bslib

[Alex_Hanisch]

so this is going to be a long post, we'll see where it goes

i've been building Shiny apps for a couple years using shinydashboardPlus. i've been really happy with the widgets and layouts available, but recently i was exposed to bslib and given the impression that down the road, there'll be much more capability and new features here. i'm excited to make the switch, and began exploring different options with bslib with a mind towards building something similar to what i usually do in shinydashboardPlus.

the link below is to a Posit Cloud space where my different attempts reside...

Posit Cloud - Do, share, teach, and learn data science

i'm taking this opportunity to organize my code better than i used to, and so i've refactored out into separate files different visualizations. similarly, while i'm exploring different app UI options, i've refactored out different UI's into separate files. the app.R file allows you to explore the different UI options by just commenting out all but the one you want to see. the options available are:

1. ui_dashboardPlus.R - the UI example i aspire to mimic with bslib, which uses shinydashboardPlus
2. ui_pageSidebar.R - exploring bslib's page_sidebar()
3. ui_pageNavbar.R - exploring bslib's page_navbar()
4. ui_pageFillable.R - exploring bslib's page_fillable()
5. ui_gridPage.R - exploring gridlayout's grid_page()

the contents of the app are just notational... arbitrary data and visualizations and just a collection of inputs to see how they look under different themes... they don't control anything in the app. i'm still trying to settle on which of the bslib options i like the best, and finally to the crux of my post, here's some questions i'm having about my experience so far.

using bootswatches - i like the pulse bootswatch for the purple and the availability of light and dark modes (Bootswatch: Pulse). i'm not smart on CSS and styling, but the bootswatches looked like an easy way to add some consistent coloring across an app. however, so far i've been somewhat underwhelmed by the injection of color, maybe i'm doing something wrong? exploring any of the UI options, I really expected to see a lot more purple to emphasize buttons or title blocks and card headers. am i just assuming a bootswatch is going to do more than it's intended to do?

related... i was exposed to input_dark_mode(), is this not available yet in bslib?

right sidebars - shinydashboardPlus allowed both a left and right sidebar (controlbar), and i've been a big fan. i use the right sidebar as a reference that you can pull up and then quickly hide as needed, and i like how it has the "overlay" behavior so it doesn't rejigger or squish your main app contents when it's pulled up. i've found ways to achieve both left and right sidebars with bslib by nesting layouts, but i'm not as thrilled with the look and feel as before with shinydashboardPlus. mainly i haven't figured out how to effect the overly behavior, but i'm also finding the nubs that you click to pull out and collapse the sidebar to be very muted and easy to not see. shinydashboardPlus lets you use icons for the controlbar and featured them more prominently in the app layout.

gaps and padding - somewhat with page_fillable() and especially with grid_page(), specifying these parameters is a struggle. when i'm nesting layouts to achieve sidebars on both sides, i often want to eliminate gaps and padding among widgets and containers, and it seems like these parameters are inconsistently present across various widgets, containers, and layouts (probably for good reason), and sometimes when present they don't seem to have an effect when set... something i need to learn more about.

anyways, hopefully the workspace i shared above is accessible. again the main feedback i'm hoping for is how to best get a right sidebar and to have it behave similar to shinydashboardPlus's controlbar, and how to get more impact out of using bootswatches, especially without micromanaging the CSS classes of all the widgets... again the bootswatch reference page led me to expect more just by default, so i'm wondering if this feature isn't fully executed yet?

thanks for reading and for any ideas!

[ismirsehregal]

Following the link you shared regarding bootswatch there are at least 4 different navbar colors presented for pulse.

However, a similar question came up on stackoverflow the other day (maybe also yours?).

An answer was given (not a convenient one, though) but it was deleted by the author (@Jan). Here is a copy:

You need to set the primary color manually. This works:

library(shiny)
library(bslib)

ui <- page_navbar(
    title = "background is now purple",
    theme = bs_theme(bootswatch = "pulse") |>
        bslib::bs_add_rules(
            rules = "
                    .navbar.navbar-default {
                        background-color: $primary !important;
                    }
                    "
        )
)

server <- function(input, output, session) {
}

shinyApp(ui = ui, server = server)

[Alex_Hanisch]

yes thanks, this was my stackoverflow post. it does give color to the navbar title section of navbar_page(), but i'm trying to avoid adding a code snippet like this for every widget type. again i'm just ignorant in this realm of styling, but i was figuring that was the point of a bootswatch, all these widgets by default would adopt a more colorful appearance based on the swatch. you make a good point about the website reference, that 4 different palettes are presented for most things. what's up with that? it seems like the swatch is itself a collection of swatches... i was just hoping by default i'd be utilizing the first one which seems to be more colorful. thanks for the reply!

[ismirsehregal]

As far as I understand (far away from being an expert on this) bootstrap provides us with contextual color classes (secondary, success, info, warning, danger, light, dark) which apply certain design templates depending on the element they are beeing assigned to.

Colors

According to Wikipedia:

Bootstrap provides basic style definitions for all HTML elements. The result is a uniform appearance for prose, tables and form elements across web browsers.