Issue when implementing dark theme

[flalom]

Hello there!
Thank you for this nice package!
I am working with David Granjon and we are working on implementing the dark theme.

We used these functions from fresh to implement the dark theme:

  darktheme <- fresh::create_theme(
       fresh::bs4dash_vars(
        navbar_light_color = "#bec5cb",
         navbar_light_active_color = "#FFF",
        navbar_light_hover_color = "#FFF"
      ),
     fresh::bs4dash_yiq(
        contrasted_threshold = 10,
         text_dark = "#FFF",
        text_light = "#272c30"
     ),
      fresh::bs4dash_layout(
        main_bg = "#353c42"
      ),
      fresh::bs4dash_sidebar_dark(
        bg = "#272c30",
        color = "#bec5cb",
         hover_color = "#FFF",
        submenu_bg = "#272c30",
        submenu_color = "#FFF",
        submenu_hover_color = "#FFF"
      ),
       fresh::bs4dash_status(
         primary = "#5E81AC", danger = "#BF616A", light = "#272c30",
          dark = "#272c30"
      ),
      fresh::bs4dash_color(
         white = "#272c30", #if i do not add this line the skin doesn't work properly
         gray_900 = "#FFF"
     )
   )

fresh::use_theme(darktheme)

However there are a couple of widgets that are not well rendered (the timeline boxes, social card, and box with user comments), here some images.

How can we fix this?

Thank you very much and please, let me know if you need additional information

[pvictor]

Hello,

Can you share the code for the application, i'll look into it.
It's possible that we don't use exactly the same versions of AdminLTE.

Victor

[DivadNojnarg]

@pvictor Internally, we use adminlte
3.0.2-pre according to what I see. @flalom: we would have to upgrade adminlte3 to 3.0.4 and retry. The process is a bit special for Novartis since we need a specific color code. @pvictor : we'll try next week and keep you updated.

My concern is just for future updates: @pvictor how do we align? It means that all template would have to rely on the same adminlte version

[pvictor]

Don't hesitate to share an example where result is not what expected, I'll look into it.

For futur updates, we need to communicate, don't think we can automate this..
I can integrate several versions of AdminLTE, just has to be the same than you use.

Victor

[DivadNojnarg]

@pvictor : I made some investigations where I used the same deps as fresh. If you try to apply to the bs4Dash gallery code elements, it does not render well. See below. Morever, basic shiny inputs do not have the good text color (did not try all inputs, only slider, numeric and text).

library(bs4Dash)
# Theme -------------------------------------------------------------------

bs4DashTheme <- create_theme(
  bs4dash_vars(
    navbar_dark_color = "#bec5cb",
    navbar_dark_active_color = "#FFF",
    navbar_dark_hover_color = "#FFF"
  ),
  bs4dash_yiq(contrasted_threshold = 10, text_dark = "#FFF", text_light = "#272c30"),
  bs4dash_layout(main_bg = "#353c42"),
  bs4dash_sidebar_dark(
    bg = "#272c30", color = "#bec5cb", hover_color = "#FFF",
    submenu_bg = "#272c30", submenu_color = "#FFF", submenu_hover_color = "#FFF"
  ),
  bs4dash_status(dark = "#272c30"),
  bs4dash_color(gray_900 = "#FFF", white = "#272c30")
)



# App ---------------------------------------------------------------------


ui <- bs4DashPage(
  title = "bs4Dash Dark Mode",
  # sidebar_collapsed = FALSE,
  navbar = bs4DashNavbar(skin = "dark"),
  controlbar = bs4DashControlbar(
    skin = "dark",
    "This is the control bar"
  ),
  sidebar = bs4DashSidebar(
    title = "bs4Dash Dark Mode",
    skin = "dark",
    bs4SidebarMenu(
      bs4SidebarHeader("Menu:"),
      bs4SidebarMenuItem(
        tabName = "tab1",
        text = "UI components",
        icon = "home"
      )
    )
  ),
  body = bs4DashBody(
    
    use_theme(bs4DashTheme),
    
    bs4TabItems(
      bs4TabItem(
        tabName = "tab1",
        fluidRow(
          bs4TabCard(
            width = 6,
            id = "tabcard",
            title = "Tab box elements not shown at start",
            bs4TabPanel(
              tabName = "Tab 1", 
              active = FALSE,
              "Content 1"
            ),
            bs4TabPanel(
              tabName = "Tab 2", 
              active = TRUE,
              "Content 2"
            ),
            bs4TabPanel(
              tabName = "Tab 3", 
              active = FALSE,
              "Content 3"
            )
          ),
          bs4Card(
            title = "Dropdown menu elements not properly highlighted", 
            closable = TRUE, 
            width = 6,
            status = "warning", 
            solidHeader = FALSE, 
            collapsible = TRUE,
            cardLabel = bs4CardLabel(
              text = 1,
              status = "danger",
              tooltip = "Hello!"
            ),
            dropdownMenu = dropdownItemList(
              dropdownItem(url = "http://www.google.com", name = "Link to google"),
              dropdownItem(url = "#", name = "item 2"),
              dropdownDivider(),
              dropdownItem(url = "#", name = "item 3")
            ),
            p("Box Content")
          )
        ),
        fluidRow(
          bs4SocialCard(
            title = "Social Card elements should have dark grey background",
            subtitle = "example-01.05.2018",
            src = "https://adminlte.io/themes/AdminLTE/dist/img/user4-128x128.jpg",
            "Some text here!",
            comments = tagList(
              lapply(X = 1:10, FUN = function(i) {
                cardComment(
                  src = "https://adminlte.io/themes/AdminLTE/dist/img/user3-128x128.jpg",
                  title = paste("Comment", i),
                  date = "01.05.2018",
                  paste0("The ", i, "-th comment")
                )
              })
            ),
            footer = "The footer here!"
          )
        ),
        fluidRow(
          bs4Card(
            title = "Timeline cards should have dark skin",
            bs4Timeline(
              width = 12,
              reversed = TRUE,
              bs4TimelineEnd(status = "danger"),
              bs4TimelineLabel("10 Feb. 2014", status = "info"),
              bs4TimelineItem(
                elevation = 4, 
                title = "Item 1",
                icon = "gears",
                status = "success",
                time = "now",
                footer = "Here is the footer",
                "This is the body"
              ),
              bs4TimelineItem(
                title = "Item 2",
                border = FALSE
              ),
              bs4TimelineLabel("3 Jan. 2014", status = "primary"),
              bs4TimelineItem(
                elevation = 2,
                title = "Item 3",
                icon = "paint-brush",
                status = "warning",
                bs4TimelineItemMedia(src = "http://placehold.it/150x100"),
                bs4TimelineItemMedia(src = "http://placehold.it/150x100")
              ),
              bs4TimelineStart(status = "danger")
            )
          )
        ),
        fluidRow(
          textInput("caption", "Text input color should be white", "Data Summary"),
          verbatimTextOutput("value")
        )
      )
    )
  )
)


server <- function(input, output) {
  output$value <- renderText({ input$caption })
}


shinyApp(ui, server)

[pvictor]

Thanks @DivadNojnarg for the example, I'll look into it as soon as possible