RinteRface / bs4Dash

Bootstrap 4 shinydashboard using AdminLTE3
https://bs4dash.rinterface.com
Other
439 stars 81 forks source link

bs4Dash bug when switch from light to dark to light mode #11 #268

Closed ShinyFabio closed 2 years ago

ShinyFabio commented 2 years ago

Hi, I was trying to made a customized bs4Dash using {fresh} package but I have some problems. Here's a reproducible example.

mytheme = create_theme(

  bs4dash_status(primary = "#2aaae2", light = "#2aaae2"),

  bs4dash_sidebar_light(
    bg = "#2c2f76", #sfondo sidebar
    color = "#FFF", #colore testo
    hover_color = "#2aaae2", #colore testo quando evidenziato
    submenu_bg = "#2c2f76", 
    submenu_color = "#FFF", 
    submenu_hover_color = "#2aaae2"
  ),

  bs4dash_layout(main_bg = "#FFF"),

  bs4dash_vars(
    navbar_light_color = "#2c2f76", #colore icone navbar 
    navbar_light_active_color = "#FFF",
    navbar_light_hover_color = "#FFF"
  )
)

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

shinyApp(
  ui = dashboardPage(
    title = "Basic Dashboard",
    header = bs4DashNavbar(
      skin = "light", status = "primary",
      title = dashboardBrand("ShinyDash", color = "primary"),

      rightUi = tags$li(class = "dropdown", actionButton(inputId  = "jumptohome", label =NULL, icon = icon("home"),status = "primary")) 
    ),

    sidebar = dashboardSidebar(
      skin = "light", 
      inputId = "sidebarState",
      bs4Dash::sidebarUserPanel(name = "nome"),

      bs4Dash::sidebarMenu(
        id = "sidebarmenu",
        bs4Dash::menuItem("Home", tabName = "home", icon = icon("home")),
        bs4Dash::menuItem("Cytotoxicity", tabName = "cytotab",icon = icon("file-import")),
        bs4Dash::menuItem("D1", tabName = "d1tab", icon = icon("table"),
                          bs4Dash::menuSubItem("guarda", tabName = "wow")
        )

      )

    ),
    controlbar = dashboardControlbar(),
    footer = dashboardFooter(),
    body = bs4Dash::dashboardBody(
      fresh::use_theme(mytheme),
      tabItems(
        tabItem(tabName = "home",h1(strong("Welcome to ShinyDash!"))),
        tabItem(tabName = "cytotab"),
        tabItem(tabName = "d1tab"),
        tabItem(tabName = "wow", h4("ok")))
    )
  ),
  server = function(input, output) {}
)
  1. If you try to run the code at the first the navbar is light blue as it should be, but if you change to dark mode and then again to light mode, the navbar becomes white even if in bs4dash_status() I specified that the light color should be that light blue.

Screenshot (150)

Screenshot (151)

  1. I want to add a home button in the navbar that has the same behaviour and colors of the switch button and the controllbar button (so like just an icon without the button around and the icon should be dark blue when not triggered, and white when hover or click). I tried some combinations even with different packages but without any luck.

I think my problem is both with {fresh} package and with {bs4Dash} so I posted the issue also here https://github.com/dreamRs/fresh/issues/11

paulimer commented 2 years ago

Hi! I have the same issue, but it does happen whether I use fresh or not, and only thing I have done is set dashboardHeader()'s status to "primary".

PythonCoderUnicorn commented 2 years ago

Hello,

I was testing out your demo code from your README and noticed that the toggle does not work properly, the plot has a white background when in dark mode toggle.

Since I have used thematic and bslib in Shiny apps before I tried to use the following:

# placed above the ui = dashboard()
thematic::thematic_shiny(font='auto')

# place right after ui = dashboard()

# ran bs_theme_preview() since initially copying theme = bs_theme( ) from another file did not work to get the plot to have same color 
#bs_theme_preview(),

# this should have styled the dashboard with a black background
theme = bs_theme(theme, fg = "rgb(0, 221, 110)", primary = "#6CD62A", 
                  font_scale = NULL, bootswatch = "cyborg", bg = "rgb(6, 6, 6)"),

This failed to work. I expected the plot to have same background color as theme.

I appreciate the toggle.

Screen Shot 2022-04-30 at 4 25 36 PM