Skip to content

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

@ShinyFabio

Description

@ShinyFabio

Hi,
I was trying to made a customized bs4Dash using your 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions