Not able to change bs4Dash "dark" skin theme background in Shiny

Question

Hello I am playing around with the {fresh} theme package and {bs4Dash}. What I am trying to do is change the main background for the app. However, it looks like the package bs4Dash will not let me change the main background while the "dark" theme is selected. Once I switch the toggle to the "light" skin, the wanted background color is displayed. It seems I do not have control of the dark mode background.

Below is a photo as well as reproducible code. For example purposes, I would like when the skin is flicked to dark mode, the background color is the light blue in code below.

library(bs4Dash)
library(shiny)
library(fresh)
# create the theme with a cyberpunk color palette
theme <- create_theme(
    bs4dash_vars(
        navbar_light_color = "#bec5cb",
        navbar_light_active_color = "#FFF",
        navbar_light_hover_color = "#FFF"
    ),
    bs4dash_yiq(
        contrasted_threshold = 10,
        text_dark = "#FFF",
        text_light = "#272c30"
    ),
    bs4dash_layout(
        main_bg = "#5E81AC"
    ),
    bs4dash_sidebar_light(
        bg = "#272c30",
        color = "#bec5cb",
        hover_color = "#FFF",
        submenu_bg = "#272c30",
        submenu_color = "#FFF",
        submenu_hover_color = "#FFF"
    ),
    bs4dash_status(
        primary = "#5E81AC", danger = "#BF616A", light = "#272c30"
    ),
    bs4dash_color(
        gray_900 = "#FFF", white = "#272c30"
    )
)

# create tribble for box global config
box_config <- tibble::tribble(
    ~background, ~labelStatus,
    "danger", "warning",
    "purple", "success",
    "success", "primary",
    "warning", "danger",
    "fuchsia", "info"
)

# box factory function
box_factory <- function(background, labelStatus) {
    box(
        title = "Cyberpunk Box",
        collapsible = TRUE,
        background = background,
        height = "200px",
        label = boxLabel(1, labelStatus)
    )
}

# pmap magic
boxes <- purrr::pmap(box_config, box_factory)

shinyApp(
    ui = dashboardPage(
        freshTheme = theme,
        header = dashboardHeader(
            leftUi = dropdownMenu(
                type = "messages",
                badgeStatus = "success",
                messageItem(
                    from = "Support Team",
                    message = "This is the content of a message.",
                    time = "5 mins"
                ),
                messageItem(
                    from = "Support Team",
                    message = "This is the content of another message.",
                    time = "2 hours"
                )
            )
        ),
        sidebar = dashboardSidebar(),
        body = dashboardBody(boxes),
        controlbar = dashboardControlbar(),
        title = "Fresh theming"
    ),
    server = function(input, output) { }
)

Hello ! Trying your code leads me to an error .. are all the packages needed mentionned in it ? — MrSmithGoesToWashington, Mar 05 '21 at 09:07
Not an answer, but hope it mau help .. ``` leftUi = tagList( dropdownMenu( type = "messages", badgeStatus = "success", messageItem( from = "Support Team", message = "This is the content of a message.", time = "5 mins" ), messageItem( from = "Support Team", message = "This is the content of another message.", time = "2 hours" ) ) ) ``` — MrSmithGoesToWashington, Mar 07 '21 at 11:19
Also I had to add library(shinydashboardPlus) at the begining in order to obtain something .. (but not yet what you are looking for, I fear ..) — MrSmithGoesToWashington, Mar 07 '21 at 11:20

the-mad-statter · Answer 1 · 2021-03-10T15:40:19.660

I could not find or figure a way to set the dark-mode background color as desired given the available functions, but I will admit to not being overly familiar with these packages.

It may be fruitful to file an issue about this for {fresh}.

In the meantime here is an alternative approach to set the dark-mode background color by injecting another stylesheet into the app.

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

# create the theme with a cyberpunk color palette
theme <- create_theme(
  bs4dash_vars(
    navbar_light_color = "#bec5cb",
    navbar_light_active_color = "#FFF",
    navbar_light_hover_color = "#FFF"
  ),
  bs4dash_yiq(
    contrasted_threshold = 10,
    text_dark = "#FFF",
    text_light = "#272c30"
  ),
  bs4dash_layout(
    main_bg = "#5E81AC"
  ),
  bs4dash_sidebar_light(
    bg = "#272c30",
    color = "#bec5cb",
    hover_color = "#FFF",
    submenu_bg = "#272c30",
    submenu_color = "#FFF",
    submenu_hover_color = "#FFF"
  ),
  bs4dash_status(
    primary = "#5E81AC", danger = "#BF616A", light = "#272c30"
  ),
  bs4dash_color(
    gray_900 = "#FFF", white = "#272c30"
  )
)

# create tribble for box global config
box_config <- tibble::tribble(
  ~background, ~labelStatus,
  "danger", "warning",
  "purple", "success",
  "success", "primary",
  "warning", "danger",
  "fuchsia", "info"
)

# box factory function
box_factory <- function(background, labelStatus) {
  box(
    title = "Cyberpunk Box",
    collapsible = TRUE,
    background = background,
    height = "200px",
    label = boxLabel(1, labelStatus)
  )
}

# pmap magic
boxes <- purrr::pmap(box_config, box_factory)

shinyApp(
  ui = dashboardPage(
    freshTheme = theme,
    header = dashboardHeader(
      ##### inject additional stylesheet here
      tags$style(HTML("
        .dark-mode .content-wrapper {
          background-color: #5E81AC;
        }")
      ),
      #####
      leftUi = dropdownMenu(
        type = "messages",
        badgeStatus = "success",
        messageItem(
          from = "Support Team",
          message = "This is the content of a message.",
          time = "5 mins"
        ),
        messageItem(
          from = "Support Team",
          message = "This is the content of another message.",
          time = "2 hours"
        )
      )
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(boxes),
    controlbar = dashboardControlbar(),
    title = "Fresh theming"
  ),
  server = function(input, output) { }
)

Not able to change bs4Dash "dark" skin theme background in Shiny

1 Answers1

Linked