# Variables for {bs4dash}

library(fresh)

{bs4Dash} allow to construct dashboards in Shiny with latest version of AdminLTE based on Bootstrap 4, {bs4Dash} usage is close to {shinydashboard}. You can create a custom theme to use with it with functions bs4dash_*. Here are some examples of what you can change.

## Main statuses

Main colors of {bs4Dash} are defined in 6 status, you can use those status in infoBox, valueBox, cards, … The primary color () is also used to highlight active elements, so it’s present everywhere. Below is an example by changing the color of the “primary” and “danger” statuses:

bs4dash_status(primary = "#5E81AC", danger = "#BF616A")

With classic statuses from {bs4Dash}, it look like:

With our new theme, we have changed the color of boxes and active element in sidebar:

## Layout

Layout variables allow you to change the width of the sidebar, as well as the width of the controlbar (right sidebar). And also the main background:

bs4dash_layout(main_bg = "#353c42")

Result is:

The text is not readable on a black background but fortunately we will be able to change that.

## Colors

We can invert colors used for text by changing colors variables:

bs4dash_color(gray_900 = "#FFF", white = "#272c30")

Now the body looks good, we can deal with the sidebar and the navbar. Text in boxes is less readable, but again this can be fixed later.

## Color contrast

Last set of variables that we can use to finalize our new theme is the YIQ color contrast variables that allow to switch color if contrast is below a threshold.

bs4dash_yiq(contrasted_threshold = 10, text_dark = "#FFF", text_light = "#272c30")

## Full theme

Here the code to create this 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 = "#353c42"
),
bs4dash_sidebar_light(
bg = "#272c30",
color = "#bec5cb",
hover_color = "#FFF",
)