cssrshinybs4dash

Not able to change the background color of the bs4Dash::dashboardSidebar() properly


1. Color issue using only the bs4Dash package

I am starting to use the package bs4Dash and I am facing a problem with the background color of the left sidebar bs4Dash::dashboardSidebar(). I observe that when I start the app the background color of the left sidebar is always in gray, but when I switch to dark mode and back to light mode the color render with a white color background.

You can observe this behavior using the code below that was taken from help webpage of bs4Dash

library(shiny)
library(bs4Dash)

shinyApp(
    ui = dashboardPage(
        title = "Basic Dashboard",
        header = dashboardHeader(),
        sidebar = dashboardSidebar(),
        controlbar = dashboardControlbar(),
        footer = dashboardFooter(),
        body = dashboardBody()
    ),
    server = function(input, output) {}
) 

2. Color problem using fresh and bs4Dash package

Using the package fresh when I open the app for the first time It is still with the grey background color, but when I switch from dark mode to light It renders the color according to fresh::create_theme().

Here is an example

# library

library(shiny)
library(bs4Dash)
library(fresh)

# theme creator with fresh::

mytheme <- create_theme(
    bs4dash_sidebar_light(
        bg = "#FFFF00")
)

#shinyApp

shinyApp(
    ui = dashboardPage(
        title = "Basic Dashboard",
        header = dashboardHeader(),
        sidebar = dashboardSidebar(),
        controlbar = dashboardControlbar(),
        footer = dashboardFooter(),
        body = dashboardBody(use_theme(mytheme)),
        freshTheme = TRUE
    ),
    server = function(input, output) {}
)

I found out this issue in the Github but can't figure out how to solve this problem.


Solution

  • This problem was mentioned in this issue. You can fix it by adding skin = "light" in dashboardSidebar(), as below:

    library(shiny)
    library(bs4Dash)
    
    shinyApp(
      ui = dashboardPage(
        title = "Basic Dashboard",
        header = dashboardHeader(),
        sidebar = dashboardSidebar(skin = "light"),
        controlbar = dashboardControlbar(),
        footer = dashboardFooter(),
        body = dashboardBody()
      ),
      server = function(input, output) {}
    )