bs4Dash color contrast

These variables allow to customize color used if contrast between a color and its background is under threshold. For example, it's used to choose text color written in bs4ValueBox with background defined by a status.

bs4dash_yiq(contrasted_threshold = NULL, text_dark = NULL, text_light = NULL)

Arguments

contrasted_threshold

The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.

text_dark

Dark text color.

text_light

Light text color.

Value

a list that can be used in create_theme.

Examples

# Contrast colors
bs4dash_yiq(
  contrasted_threshold = 150,
  text_dark = "#007bff", # blue
  text_light = "#dc3545" # red
)
#> $`yiq-contrasted-threshold`
#> [1] 150
#> 
#> $`yiq-text-dark`
#> [1] "#007bff"
#> 
#> $`yiq-text-light`
#> [1] "#dc3545"
#> 
#> attr(,"class")
#> [1] "fresh_sass_vars" "bs4dash_vars"    "list"           

if (interactive()) {

  library(shiny)
  library(bs4Dash)

  ui <- bs4DashPage(
    title = "bs4Dash Contrast",
    navbar = bs4DashNavbar(),
    sidebar = bs4DashSidebar(),
    body = bs4DashBody(

      use_theme(create_theme(
        bs4dash_yiq(
          contrasted_threshold = 180,
          text_dark = "#000",
          text_light = "#dc3545"
        )
      )),

      fluidRow(
        bs4ValueBox(
          value = 120,
          subtitle = "ValueBox with primary status",
          status = "primary",
          icon = "shopping-cart",
          href = "#",
          width = 4
        ),
        bs4ValueBox(
          value = 150,
          subtitle = "ValueBox with danger status",
          status = "danger",
          icon = "shopping-cart",
          href = "#",
          width = 4
        )
      )
    )
  )

  server <- function(input, output) {

  }

  shinyApp(ui, server)

}