Fresh 'Shiny' Themes

Description

Customize 'Bootstrap' and 'Bootswatch' themes, like colors, fonts, grid layout, to use in 'Shiny' applications.

Author(s)

Victor Perrier & Fanny Meyer (@dreamRs_fr)

See Also

Useful links:

• https://github.com/dreamRs/fresh

• Report bugs at https://github.com/dreamRs/fresh/issues

AdminLTE CSS colors variables

Description

Those variables can be used to customize defaults colors in shinydashboard.

Usage

adminlte_color(
  light_blue = NULL,
  red = NULL,
  green = NULL,
  aqua = NULL,
  yellow = NULL,
  blue = NULL,
  navy = NULL,
  teal = NULL,
  olive = NULL,
  lime = NULL,
  orange = NULL,
  fuchsia = NULL,
  purple = NULL,
  maroon = NULL,
  black = NULL,
  gray_lte = NULL
)

Arguments

Value

a list that can be used in create_theme.

Examples

adminlte_color(
  light_blue = "#086A87",
  aqua = "#A9D0F5",
  green = "#0B3B0B",
  purple = "#610B4B"
)

if (interactive()) {
  library(shiny)
  library(shinydashboard)

  ui <- dashboardPage(
    header = dashboardHeader(title = "My dashboard"),
    sidebar = dashboardSidebar(
      sidebarMenu(
        menuItem(
          "Dashboard",
          tabName = "dashboard",
          icon = icon("dashboard")
        )
      )
    ),
    body = dashboardBody(

      use_theme(create_theme(
        adminlte_color(
          light_blue = "#086A87",
          aqua = "#A9D0F5",
          green = "#0B3B0B",
          purple = "#610B4B"
        )
      )),

      tabItems(
        tabItem(
          "dashboard",

          # infoBoxes
          fluidRow(
            infoBox(
              "Orders", uiOutput("orderNum2"),
              "Subtitle", icon = icon("credit-card")
            ),
            infoBox(
              "Approval Rating", "60%",
              icon = icon("line-chart"), color = "green",
              fill = TRUE
            ),
            infoBox(
              "Progress", "20%",
               icon = icon("users"),
               color = "purple"
            )
          ),

          # valueBoxes
          fluidRow(
            valueBox(
              5846, "New Orders",
              icon = icon("credit-card"),
              href = "http://google.com"
            ),
            valueBox(
              tagList("60",
                      tags$sup(style="font-size: 20px", "%")),
              "Approval Rating",
              icon = icon("line-chart"),
               color = "green"
            ),
            valueBox(
              "42%", "Progress",
              icon = icon("users"),
              color = "purple"
            )

          )
        )
      )
    )
  )

  server <- function(input, output, session) {

  }

  shinyApp(ui, server)
}

AdminLTE CSS global variables

Description

Those variables can be used to customize global settings in shinydashboard.

Usage

adminlte_global(content_bg = NULL, box_bg = NULL, info_box_bg = NULL)

Arguments

Value

a list that can be used in create_theme.

Examples

if (interactive()) {
  library(shiny)
  library(shinydashboard)

  ui <- dashboardPage(
    header = dashboardHeader(title = "My dashboard"),
    sidebar = dashboardSidebar(),
    body = dashboardBody(

      use_theme(create_theme(
        adminlte_global(
          content_bg = "#FAAC58"
        )
      ))
    )
  )

  server <- function(input, output, session) {

  }

  shinyApp(ui, server)
}

AdminLTE CSS sidebar variables

Description

Those variables can be used to customize the sidebar in shinydashboard.

Usage

adminlte_sidebar(
  width = NULL,
  dark_bg = NULL,
  dark_hover_bg = NULL,
  dark_color = NULL,
  dark_hover_color = NULL,
  dark_submenu_bg = NULL,
  dark_submenu_color = NULL,
  dark_submenu_hover_color = NULL,
  light_bg = NULL,
  light_hover_bg = NULL,
  light_color = NULL,
  light_hover_color = NULL,
  light_submenu_bg = NULL,
  light_submenu_color = NULL,
  light_submenu_hover_color = NULL
)

Arguments

Value

a list that can be used in create_theme.

Examples

if (interactive()) {
  library(shiny)
  library(shinydashboard)

  ui <- dashboardPage(
    header = dashboardHeader(title = "My dashboard"),
    sidebar = dashboardSidebar(
      sidebarMenu(
        menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
        menuItem("Widgets", icon = icon("th"), tabName = "widgets", badgeLabel = "new",
                 badgeColor = "green"),
        menuItem("Charts", icon = icon("bar-chart-o"),
                 menuSubItem("Sub-item 1", tabName = "subitem1"),
                 menuSubItem("Sub-item 2", tabName = "subitem2")
        )
      )
    ),
    body = dashboardBody(

      use_theme(create_theme(
        adminlte_sidebar(
          dark_bg = "#F5A9A9",
          dark_hover_bg = "#8A0808"
        )
      ))
    )
  )

  server <- function(input, output, session) {

  }

  shinyApp(ui, server)
}

AdminLTE 2 custom variables

Description

Use any AdminLTE or Bootstrap variables to customize a shinydashboard theme.

Usage

adminlte_vars(...)

Arguments

Value

a list that can be used in create_theme.

Note

For a full list of available variables, use search_vars_adminlte2.

Examples

adminlte_vars(body_bg = "#FFF")

adminlte_vars("body-bg" = "#FFF")

Bootstrap Theme based on Nord palette

Description

Bootstrap Theme based on Nord palette

Usage

bs_theme_nord_light(version = bslib::version_default(), preset = "bootstrap")

bs_theme_nord_dark(version = bslib::version_default(), preset = "bootstrap")

Arguments

Value

Returns a sass::sass_bundle() (list-like) object.

Examples

library(shiny)
library(bslib)
library(bsicons)

make_btns <- function(outline = FALSE) {
  lapply(
    X = c("primary", "secondary", "success", "danger", "warning", "info"),
    FUN = function(x) {
      if (outline)
        x <- paste0("outline-", x)
      actionButton(paste0("btn", x), paste("Button", x), class = paste("btn", x, sep = "-"))
    }
  )
}

ui <- page_navbar(
  title = "Nord theme",

  theme = bs_theme_nord_light(),

  fillable = FALSE,
  sidebar = sidebar(
    "Sidebar",
    selectInput("id", "Choice:", month.name)
  ),
  nav_panel(
    "Page 1",

    make_btns(),
    tags$br(), tags$br(),
    make_btns(TRUE),
    tags$br(), tags$br(),

    layout_column_wrap(
      width = 1 / 5,
      value_box(
        title = "1st value",
        value = "123",
        showcase = bs_icon("bar-chart"),
        theme = "primary",
        p("The 1st detail")
      ),
      value_box(
        title = "2nd value",
        value = "456",
        showcase = bs_icon("graph-up"),
        theme = "success",
        p("The 2nd detail"),
        p("The 3rd detail")
      ),
      value_box(
        title = "3rd value",
        value = "789",
        showcase = bs_icon("pie-chart"),
        theme = "danger",
        p("The 4th detail"),
        p("The 5th detail"),
        p("The 6th detail")
      ),
      value_box(
        title = "4th value",
        value = "123",
        showcase = bs_icon("bar-chart"),
        theme = "warning",
        p("The 1st detail")
      ),
      value_box(
        title = "5th value",
        value = "123",
        showcase = bs_icon("bar-chart"),
        theme = "info",
        p("The 1st detail")
      )
    ),
    layout_column_wrap(
      width = 1 / 5,
      card(
        card_header(
          class = "bg-primary",
          "A header"
        ),
        card_body("Some content")
      ),
      card(
        card_header(
          class = "bg-success",
          "A header"
        ),
        card_body("Some content")
      ),
      card(
        card_header(
          class = "bg-danger",
          "A header"
        ),
        card_body("Some content")
      ),
      card(
        card_header(
          class = "bg-warning",
          "A header"
        ),
        card_body("Some content")
      ),
      card(
        card_header(
          class = "bg-info",
          "A header"
        ),
        card_body("Some content")
      )
    )
  ),
  nav_panel("Page 2", "Page 2 content"),
  nav_spacer(),
  nav_item(
    input_switch("dark_mode", "Dark mode", width = "120px")
  )
)

server <- function(input, output, session) {
  observe(session$setCurrentTheme(
    if (isTRUE(input$dark_mode)) bs_theme_nord_dark() else bs_theme_nord_light()
  ))
}

if (interactive())
  shinyApp(ui, server)

Bootstrap custom variables

Description

Use any Bootstrap variables to customize a shiny theme.

Usage

bs_vars(...)

bs_vars_global(
  body_bg = NULL,
  text_color = NULL,
  link_color = NULL,
  link_hover_color = NULL,
  line_height_base = NULL,
  grid_columns = NULL,
  grid_gutter_width = NULL,
  border_radius_base = NULL
)

bs_vars_color(
  brand_primary = NULL,
  brand_success = NULL,
  brand_info = NULL,
  brand_warning = NULL,
  brand_danger = NULL,
  gray_base = NULL,
  gray_darker = NULL,
  gray_dark = NULL,
  gray = NULL,
  gray_light = NULL,
  gray_lighter = NULL
)

bs_vars_navbar(
  height = NULL,
  margin_bottom = NULL,
  border_radius = NULL,
  padding_horizontal = NULL,
  padding_vertical = NULL,
  collapse_max_height = NULL,
  default_color = NULL,
  default_bg = NULL,
  default_border = NULL,
  default_link_color = NULL,
  default_link_active_color = NULL,
  default_link_active_bg = NULL,
  default_link_hover_color = NULL,
  default_link_hover_bg = NULL,
  inverse_color = NULL,
  inverse_bg = NULL,
  inverse_border = NULL,
  inverse_link_color = NULL,
  inverse_link_active_color = NULL,
  inverse_link_active_bg = NULL,
  inverse_link_hover_color = NULL,
  inverse_link_hover_bg = NULL
)

bs_vars_nav(
  link_padding = NULL,
  link_hover_bg = NULL,
  disabled_link_color = NULL,
  disabled_link_hover_color = NULL
)

bs_vars_font(
  family_sans_serif = NULL,
  size_base = NULL,
  size_large = NULL,
  size_small = NULL,
  size_h1 = NULL,
  size_h2 = NULL,
  size_h3 = NULL,
  size_h4 = NULL,
  size_h5 = NULL,
  size_h6 = NULL
)

bs_vars_wells(bg = NULL, border = NULL)

bs_vars_state(
  success_text = NULL,
  success_bg = NULL,
  success_border = NULL,
  info_text = NULL,
  info_bg = NULL,
  info_border = NULL,
  warning_text = NULL,
  warning_bg = NULL,
  warning_border = NULL,
  danger_text = NULL,
  danger_bg = NULL,
  danger_border = NULL
)

bs_vars_input(
  bg = NULL,
  color = NULL,
  border = NULL,
  border_radius = NULL,
  color_placeholder = NULL,
  group_addon_bg = NULL,
  border_focus = NULL,
  bg_disabled = NULL
)

bs_vars_alert(
  padding = NULL,
  border_radius = NULL,
  link_font_weight = NULL,
  success_text = NULL,
  success_bg = NULL,
  success_border = NULL,
  info_text = NULL,
  info_bg = NULL,
  info_border = NULL,
  warning_text = NULL,
  warning_bg = NULL,
  warning_border = NULL,
  danger_text = NULL,
  danger_bg = NULL,
  danger_border = NULL
)

bs_vars_progress(
  bg = NULL,
  bar_color = NULL,
  border_radius = NULL,
  bar_bg = NULL,
  bar_success_bg = NULL,
  bar_warning_bg = NULL,
  bar_danger_bg = NULL,
  bar_info_bg = NULL
)

bs_vars_panel(
  bg = NULL,
  body_padding = NULL,
  heading_padding = NULL,
  footer_padding = NULL,
  border_radius = NULL,
  inner_border = NULL,
  footer_bg = NULL,
  default_text = NULL,
  default_border = NULL,
  default_heading_bg = NULL,
  primary_text = NULL,
  primary_border = NULL,
  primary_heading_bg = NULL,
  success_text = NULL,
  success_border = NULL,
  success_heading_bg = NULL,
  info_text = NULL,
  info_border = NULL,
  info_heading_bg = NULL,
  warning_text = NULL,
  warning_border = NULL,
  warning_heading_bg = NULL,
  danger_text = NULL,
  danger_border = NULL,
  danger_heading_bg = NULL
)

bs_vars_modal(
  md = NULL,
  lg = NULL,
  sm = NULL,
  inner_padding = NULL,
  title_padding = NULL,
  title_line_height = NULL,
  content_bg = NULL,
  content_border_color = NULL,
  content_fallback_border_color = NULL,
  backdrop_bg = NULL,
  backdrop_opacity = NULL,
  header_border_color = NULL,
  footer_border_color = NULL
)

bs_vars_button(
  font_weight = NULL,
  default_color = NULL,
  default_bg = NULL,
  default_border = NULL,
  primary_color = NULL,
  primary_bg = NULL,
  primary_border = NULL,
  success_color = NULL,
  success_bg = NULL,
  success_border = NULL,
  info_color = NULL,
  info_bg = NULL,
  info_border = NULL,
  warning_color = NULL,
  warning_bg = NULL,
  warning_border = NULL,
  danger_color = NULL,
  danger_bg = NULL,
  danger_border = NULL,
  link_disabled_color = NULL,
  border_radius_base = NULL,
  border_radius_large = NULL,
  border_radius_small = NULL
)

bs_vars_dropdown(
  bg = NULL,
  border = NULL,
  fallback_border = NULL,
  divider_bg = NULL,
  link_color = NULL,
  link_hover_color = NULL,
  link_hover_bg = NULL,
  link_active_color = NULL,
  link_active_bg = NULL,
  link_disabled_color = NULL,
  header_color = NULL
)

bs_vars_pills(
  border_radius = NULL,
  active_link_hover_bg = NULL,
  active_link_hover_color = NULL
)

bs_vars_tabs(
  border_color = NULL,
  link_hover_border_color = NULL,
  active_link_hover_bg = NULL,
  active_link_hover_color = NULL,
  active_link_hover_border_color = NULL,
  justified_link_border_color = NULL,
  justified_active_link_border_color = NULL
)

bs_vars_badge(
  color = NULL,
  bg = NULL,
  link_hover_color = NULL,
  active_color = NULL,
  active_bg = NULL,
  font_weight = NULL,
  line_height = NULL,
  border_radius = NULL
)

bs_vars_component(
  padding_base_vertical = NULL,
  padding_base_horizontal = NULL,
  padding_large_vertical = NULL,
  padding_large_horizontal = NULL,
  padding_small_vertical = NULL,
  padding_small_horizontal = NULL,
  padding_xs_vertical = NULL,
  padding_xs_horizontal = NULL,
  line_height_large = NULL,
  line_height_small = NULL,
  border_radius_base = NULL,
  border_radius_large = NULL,
  border_radius_small = NULL,
  component_active_color = NULL,
  component_active_bg = NULL,
  caret_width_base = NULL,
  caret_width_large = NULL
)

bs_vars_table(
  cell_padding = NULL,
  condensed_cell_padding = NULL,
  bg = NULL,
  bg_accent = NULL,
  bg_hover = NULL,
  bg_active = NULL,
  border_color = NULL
)

Arguments

Value

a list that can be used in create_theme().

Note

For a full list of available variables, use search_vars_bs().

Examples

bs_vars(body_bg = "#FFF")

bs_vars("body-bg" = "#FFF")

bs4Dash sidebar skins light/dark

Description

bs4Dash sidebar skins light/dark

Usage

bs4dash_sidebar_light(
  bg = NULL,
  hover_bg = NULL,
  color = NULL,
  hover_color = NULL,
  active_color = NULL,
  submenu_bg = NULL,
  submenu_color = NULL,
  submenu_hover_color = NULL,
  submenu_hover_bg = NULL,
  submenu_active_color = NULL,
  submenu_active_bg = NULL,
  header_color = NULL
)

bs4dash_sidebar_dark(
  bg = NULL,
  hover_bg = NULL,
  color = NULL,
  hover_color = NULL,
  active_color = NULL,
  submenu_bg = NULL,
  submenu_color = NULL,
  submenu_hover_color = NULL,
  submenu_hover_bg = NULL,
  submenu_active_color = NULL,
  submenu_active_bg = NULL,
  header_color = NULL
)

Arguments

Value

a list that can be used in create_theme.

Examples

# Change colors used in bs4Dash
bs4dash_sidebar_light(
  bg = "#D7DF01",
  color = "#FF0000",
  active_color = "#00FF00",
  submenu_bg = "#00FFFF"
)

if (interactive()) {

  library(shiny)
  library(bs4Dash)

  ui <- bs4DashPage(
    title = "bs4Dash Custom Sidebar",
    navbar = bs4DashNavbar(),
    sidebar = bs4DashSidebar(
      title = "bs4Dash Custom Sidebar",
      skin = "light",
      bs4SidebarHeader("Sidebar Title"),
      bs4SidebarMenu(
        bs4SidebarMenuItem(
          tabName = "menu1",
          text = "Menu 1",
          icon = "home"
        ),
        bs4SidebarMenuItem(
          tabName = "menu2",
          text = "Menu 2",
          icon = "th"
        ),
        bs4SidebarMenuItem(
          text = "Item List",
          icon = "bars",
          startExpanded = TRUE,
          bs4SidebarMenuSubItem(
            text = "Item 1",
            tabName = "item1",
            icon = "circle-thin"
          ),
          bs4SidebarMenuSubItem(
            text = "Item 2",
            tabName = "item2",
            icon = "circle-thin"
          )
        )
      )
    ),
    body = bs4DashBody(
      use_theme(create_theme(
        bs4dash_sidebar_light(
          bg = "#D7DF01",
          color = "#FF0000",
          active_color = "#00FF00",
          submenu_bg = "#00FFFF"
        )
      ))
    )
  )

  server <- function(input, output) {

  }

  shinyApp(ui, server)

}

Create a theme for bs4Dash

Description

Create a theme for bs4Dash

Usage

bs4Dash_theme(
  primary = NULL,
  secondary = NULL,
  success = NULL,
  info = NULL,
  warning = NULL,
  danger = NULL,
  ...
)

Arguments

Value

Returns a sass::sass_bundle() (list-like) object.

Examples

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

ui <- dashboardPage(
  options = NULL,
  header = dashboardHeader(
    status = "primary",
    title = dashboardBrand(
      title = "My dashboard",
      color = "primary",
      href = "https://adminlte.io/themes/v3",
      image = "https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png"
    )
  ),
  sidebar = dashboardSidebar(
    sidebarMenu(
      menuItem(
        text = "Tab 1",
        tabName = "tab1",
        icon = icon("van-shuttle")
      ),
      menuItem(
        text = "Tab 2",
        tabName = "tab2",
        icon = icon("shuttle-space")
      )
    )
  ),
  body = dashboardBody(
    use_theme(
      bs4Dash_theme(
        primary = "purple",
        success = "yellow",
        danger = "pink",
        "sidebar-light-bg" = "#C38AFF",
        "main-bg" = "#D9BBFF"
      )
    ),
    box(status = "danger", solidHeader = TRUE, title = "Title", "Content"),
    box(status = "primary", solidHeader = TRUE, title = "Title", "Content"),
    box(status = "success", solidHeader = TRUE, title = "Title", "Content")
  ),
  controlbar = dashboardControlbar(),
  title = "DashboardPage"
)


if (interactive()) {
  shinyApp(
    ui = ui,
    server = function(...) {}
  )
}

bs4dash buttons variables

Description

bs4dash buttons variables

Usage

bs4dash_button(
  default_background_color = NULL,
  default_color = NULL,
  default_border_color = NULL,
  padding_y_xs = NULL,
  padding_x_xs = NULL,
  line_height_xs = NULL,
  font_size_xs = NULL,
  border_radius_xs = NULL
)

Arguments

Value

a list that can be used in create_theme.

Examples

# This will affect default actionButton()
bs4dash_button(
  default_background_color = "#FF0000",
  default_color = "#3ADF00",
  default_border_color = "#3ADF00"
)

if (interactive()) {

  library(shiny)
  library(bs4Dash)

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

      use_theme(create_theme(
        bs4dash_button(
          default_background_color = "#FF0000",
          default_color = "#3ADF00",
          default_border_color = "#3ADF00"
        )
      )),

      actionButton(
        "btn",
        "An action button",
        icon("rocket")
      )
    )
  )

  server <- function(input, output) {

  }

  shinyApp(ui, server)

}

bs4Dash main colors

Description

bs4Dash main colors

Usage

bs4dash_color(
  blue = NULL,
  lightblue = NULL,
  navy = NULL,
  cyan = NULL,
  teal = NULL,
  olive = NULL,
  green = NULL,
  lime = NULL,
  orange = NULL,
  yellow = NULL,
  fuchsia = NULL,
  purple = NULL,
  maroon = NULL,
  red = NULL,
  black = NULL,
  gray_x_light = NULL,
  gray_600 = NULL,
  gray_800 = NULL,
  gray_900 = NULL,
  white = NULL
)

Arguments

Value

a list that can be used in create_theme.

Examples

# Change colors used in bs4Dash
bs4dash_color(
  blue = "#F7FE2E",
  lightblue = "#01DF3A"
)

if (interactive()) {

  library(shiny)
  library(bs4Dash)

  ui <- bs4DashPage(
    title = "bs4Dash Custom Colors",
    # sidebar_collapsed = FALSE,
    navbar = bs4DashNavbar(),
    sidebar = bs4DashSidebar(
      title = "bs4Dash Custom Colors",
      skin = "light",
      bs4SidebarMenu(
        bs4SidebarMenuItem(
          tabName = "tab1",
          text = "UI components"
        )
      )
    ),
    body = bs4DashBody(

      use_theme(create_theme(
        bs4dash_color(
          blue = "#F7FE2E",
          navy = "#01DF3A"
        )
      )),

      bs4TabItems(
        bs4TabItem(
          tabName = "tab1",
          tags$h2("UI components", class = "bg-navy"),
          tags$h4("bs4ValueBox"),
          fluidRow(
            bs4ValueBox(
              value = 150,
              subtitle = "ValueBox with primary status",
              status = "primary",
              icon = "shopping-cart",
              href = "#",
              width = 4
            )
          ),
          tags$h4("bs4Card"),
          fluidRow(
            bs4Card(
              title = "Card with primary status",
              closable = FALSE,
              width = 6,
              solidHeader = TRUE,
              status = "primary",
              collapsible = TRUE,
              p("Box Content")
            )
          )
        )
      )
    )
  )

  server <- function(input, output) {

  }

  shinyApp(ui, server)

}

bs4Dash fonts parameters

Description

bs4Dash fonts parameters

Usage

bs4dash_font(
  size_base = NULL,
  size_lg = NULL,
  size_sm = NULL,
  size_xs = NULL,
  size_xl = NULL,
  weight_light = NULL,
  weight_normal = NULL,
  weight_bold = NULL,
  family_sans_serif = NULL,
  family_monospace = NULL,
  family_base = NULL
)

Arguments

Value

a list that can be used in create_theme.

Examples

# Change font size used in bs4Dash
bs4dash_font(
  size_base = "1.5rem",
  weight_bold = 900
)

if (interactive()) {

  library(shiny)
  library(bs4Dash)

  ui <- bs4DashPage(
    title = "bs4Dash Custom Colors",
    navbar = bs4DashNavbar(),
    sidebar = bs4DashSidebar(
      title = "bs4Dash Custom Colors",
      skin = "light",
      bs4SidebarMenu(
        bs4SidebarMenuItem(
          tabName = "tab1",
          text = "UI components"
        )
      )
    ),
    body = bs4DashBody(

      use_theme(create_theme(
        bs4dash_font(
          size_base = "1.5rem",
          weight_bold = 900
        )
      )),

      bs4TabItems(
        bs4TabItem(
          tabName = "tab1",
          tags$div(
            tags$p(
              paste(letters, collapse = "")
            ),
            tags$p(
              style = "font-weight: bold;",
              paste(letters, collapse = "")
            ),
            tags$p(
              style = "font-style: italic;",
              paste(letters, collapse = "")
            )
          ),
          tags$h1("First level title"),
          tags$h2("Second level title"),
          tags$h3("Third level title"),
          tags$h4("Fourth level title"),
          tags$h5("Fifth level title"),
          tags$h6("Sixth level title")
        )
      )
    )
  )

  server <- function(input, output) {

  }

  shinyApp(ui, server)

}

bs4Dash layout options

Description

bs4Dash layout options

Usage

bs4dash_layout(
  font_size_root = NULL,
  sidebar_width = NULL,
  sidebar_padding_x = NULL,
  sidebar_padding_y = NULL,
  sidebar_mini_width = NULL,
  control_sidebar_width = NULL,
  boxed_layout_max_width = NULL,
  screen_header_collapse = NULL,
  main_bg = NULL,
  content_padding_x = NULL,
  content_padding_y = NULL
)

Arguments

Value

a list that can be used in create_theme.

Examples

# Sidebar width
bs4dash_layout(
  sidebar_width = "400px"
)

if (interactive()) {

  library(shiny)
  library(bs4Dash)

  ui <- bs4DashPage(
    title = "bs4Dash big sidebar",
    navbar = bs4DashNavbar(),
    sidebar = bs4DashSidebar(
      title = "bs4Dash big sidebar",
      skin = "light",
      bs4SidebarMenu(
        bs4SidebarMenuItem(
          tabName = "tab1",
          text = "UI components"
        )
      )
    ),
    body = bs4DashBody(

      use_theme(create_theme(
        bs4dash_layout(
          sidebar_width = "600px"
        )
      )),

      bs4TabItems(
        bs4TabItem(
          tabName = "tab1",
          "Content tab 1"
        )
      )
    )
  )

  server <- function(input, output) {

  }

  shinyApp(ui, server)

}

bs4Dash status colors

Description

bs4Dash status colors

Usage

bs4dash_status(
  primary = NULL,
  secondary = NULL,
  success = NULL,
  info = NULL,
  warning = NULL,
  danger = NULL,
  light = NULL,
  dark = NULL
)

Arguments

Value

a list that can be used in create_theme.

Examples

# Change colors used in bs4Dash
bs4dash_status(
  primary = "#F7FE2E",
  secondary = "#01DF3A"
)

if (interactive()) {

  library(shiny)
  library(bs4Dash)

  ui <- bs4DashPage(
    title = "bs4Dash Custom Status",
    # sidebar_collapsed = FALSE,
    navbar = bs4DashNavbar(),
    sidebar = bs4DashSidebar(
      title = "bs4Dash Custom Status",
      skin = "light",
      bs4SidebarMenu(
        bs4SidebarMenuItem(
          tabName = "tab1",
          text = "UI components"
        )
      )
    ),
    body = bs4DashBody(

      use_theme(create_theme(
        bs4dash_status(
          primary = "#F7FE2E",
          secondary = "#01DF3A"
        )
      )),

      bs4TabItems(
        bs4TabItem(
          tabName = "tab1",
          tags$h2("UI components"),
          tags$h4("bs4ValueBox"),
          fluidRow(
            bs4ValueBox(
              value = 150,
              subtitle = "ValueBox with primary status",
              status = "primary",
              icon = "shopping-cart",
              href = "#",
              width = 4
            ),
            bs4ValueBox(
              value = 150,
              subtitle = "ValueBox with secondary status",
              status = "secondary",
              icon = "shopping-cart",
              href = "#",
              width = 4
            )
          ),
          tags$h4("bs4Card"),
          fluidRow(
            bs4Card(
              title = "Card with primary status",
              closable = FALSE,
              width = 6,
              solidHeader = TRUE,
              status = "primary",
              collapsible = TRUE,
              p("Box Content")
            ),
            bs4Card(
              title = "Card with secondary status",
              closable = FALSE,
              width = 6,
              solidHeader = TRUE,
              status = "secondary",
              collapsible = TRUE,
              p("Box Content")
            )
          )
        )
      )
    )
  )

  server <- function(input, output) {

  }

  shinyApp(ui, server)

}

bs4dash custom variables

Description

Use any AdminLTE or Bootstrap variables to customize a {bs4Dash} theme.

Usage

bs4dash_vars(...)

Arguments

Value

a list that can be used in create_theme.

Note

For a full list of available variables, use search_vars_bs4dash.

Examples

bs4dash_vars(body_bg = "#FFF")

bs4dash_vars("body-bg" = "#FFF")

bs4Dash color contrast

Description

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.

Usage

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

Arguments

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
)

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)

}

Bootstrap variables from a file

Description

Bootstrap variables from a file

Usage

bs_vars_file(input_file)

Arguments

Value

a list that can be used in create_theme.

Examples

my_vars <- file.path(tempdir(), "custom-vars.scss")
my_theme <- file.path(tempdir(), "theme.css")

# Open template and edit variables
use_vars_template(
  output_file = my_vars,
  theme = "flatly"
)

# Create new theme based on the modified template
create_theme(
  theme = "flatly",
  bs_vars_file(input_file = my_vars),
  output_file = my_theme
)


# Clean up
unlink(my_vars)
unlink(my_theme)

Create a custom CSS file for pretty-checkbox

Description

This allow you to change colors of prettyCheckbox, prettyRadioButtons

Usage

create_pretty(
  output_file,
  default = NULL,
  primary = NULL,
  success = NULL,
  info = NULL,
  warning = NULL,
  danger = NULL
)

Arguments

Value

If output_file = NULL, the function returns a string value of the compiled CSS. If the output path is specified, the compiled CSS is written to that file and invisible() is returned.

Examples

# Temporary file
tmp <- file.path(tempdir(), "my-pretty.css")

# Create the new theme
create_pretty(
  output_file = tmp,
  primary = "#FFFF00"
)

# Clean
unlink(tmp)

Create a custom Bootstrap theme

Description

Allow to customize some CSS variables from Bootstrap themes to be included in Shiny applications.

Usage

create_theme(
  ...,
  theme = c("default", "cerulean", "cosmo", "cyborg", "darkly", "flatly", "journal",
    "lumen", "paper", "readable", "sandstone", "simplex", "slate", "spacelab",
    "superhero", "united", "yeti"),
  output_file = NULL,
  include_assets = FALSE
)

Arguments

Value

If output_file = NULL, the function returns a string value of the compiled CSS. If the output path is specified, the compiled CSS is written to that file and invisible() is returned.

Examples

# using a temporary file but use the path you want
tmp <- file.path(tempdir(), "custom-theme.css")

# Create the new theme
create_theme(
  theme = "default",
  bs_vars_color(
    brand_primary = "#75b8d1",
    brand_success = "#c9d175",
    brand_info = "#758bd1",
    brand_warning = "#d1ab75",
    brand_danger = "#d175b8"
  ),
  bs_vars_navbar(
    default_bg = "#75b8d1",
    default_color = "#FFFFFF",
    default_link_color = "#FFFFFF",
    default_link_active_color = "#FFFFFF"
  ),
  output_file = tmp
)

# Use the file created at the path provided
# in your Shiny app by moving it in the
# www/ folder, then use it in UI

library(shiny)
fluidPage(
  theme = "custom-theme.css"
)

# clean up
unlink(tmp)

Search variables in a .scss file

Description

Search variables in a .scss file

Usage

search_vars(file)

Arguments

Value

A data.frame with 2 columns: "variable" and "value".

Examples

# Create a scss file with some variables
tmp_scss_file <- tempfile(fileext = ".scss")
writeLines("//Some variables\n $color: red;\n $body-bg: #FFF;", tmp_scss_file)

# Search for variables
search_vars(tmp_scss_file)


# Clean up
unlink(tmp_scss_file)

Search AdminLTE 2 shinydashboard variables

Description

Search AdminLTE 2 shinydashboard variables

Usage

search_vars_adminlte2(pattern = NULL)

Arguments

Value

a data.frame with two columns:

• variable : name of the variable.

• value default value used.

Examples

# All AdminLTE2 variables
search_vars_adminlte2()

# Only sidebar related variables
search_vars_adminlte2(pattern = "sidebar")

Search Bootstrap variables

Description

Search Bootstrap variables

Usage

search_vars_bs(
  pattern = NULL,
  theme = c("default", "cerulean", "cosmo", "cyborg", "darkly", "flatly", "journal",
    "lumen", "paper", "readable", "sandstone", "simplex", "slate", "spacelab",
    "superhero", "united", "yeti")
)

Arguments

Value

a data.frame with two columns:

• variable : name of the variable.

• value default value used.

Examples

# List default variables for Bootstrap 3
search_vars_bs()

# Variables for flatly theme
search_vars_bs("flatly")

Search bs4Dash variables

Description

Search bs4Dash variables

Usage

search_vars_bs4dash(pattern = NULL, source = c("adminlte", "bootstrap"))

Arguments

Value

a data.frame with three columns:

• source : AdminLTE or Bootstrap variable.

• variable : name of the variable.

• value default value used.

Examples

# Retrieve all variables
all_vars <- search_vars_bs4dash()
head(all_vars, 20)

# Search for a pattern
head(search_vars_bs4dash("navbar"))

Use online Google font in Shiny application

Description

Use online Google font in Shiny application

Usage

use_googlefont(family)

Arguments

Value

a HTML tag to be included in a UI definition

Examples

if (interactive()) {
  library(shiny)
  library(fresh)

  ui <- fluidPage(

    use_googlefont("Saira Stencil One"),
    use_theme(create_theme(
      theme = "default",
      bs_vars_font(
        family_sans_serif = "'Saira Stencil One', cursive"
      )
    )),

    tags$h1("Use a google font (online demo)"),
    fluidRow(
      column(
        width = 6,
        tags$h2("Second level title"),
        tags$h3("Third level title"),
        tags$h4("Fourth level title"),
        tags$h5("Fifth level title"),
        tags$h6("Sixth level title"),
        tags$b("Bold text"),
        tags$p(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit,",
          " sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
          "Ut enim ad minim veniam, quis nostrud exercitation ullamco",
          " laboris nisi ut aliquip ex ea commodo consequat.",
          "Duis aute irure dolor in reprehenderit in voluptate velit",
          " esse cillum dolore eu fugiat nulla pariatur.",
          "Excepteur sint occaecat cupidatat non proident, sunt in",
          " culpa qui officia deserunt mollit anim id est laborum."
        )
      ),
      column(
        width = 6,
        textInput("caption", "Caption", "Data Summary"),
        actionButton("goButton", "Go!"),
        checkboxGroupInput("variable", "Variables to show:",
                           c("Cylinders" = "cyl",
                             "Transmission" = "am",
                             "Gears" = "gear")),
        selectInput("variable", "Variable:",
                    c("Cylinders" = "cyl",
                      "Transmission" = "am",
                      "Gears" = "gear"))
      )
    )
  )

  server <- function(input, output, session) {

  }

  shinyApp(ui, server)
}

Use pretty-checkbox CSS in Shiny

Description

After created new pretty-checkbox CSS with create_pretty, allow to use in Shiny application instead of default shinyWidgets dependency.

Usage

use_pretty(path)

Arguments

Use a CSS theme in Shiny application

Description

Use a CSS theme in Shiny application

Usage

use_theme(theme)

Arguments

Value

HTML tags to be included in a UI definition.

Examples

if (interactive()) {
  library(shiny)
  library(fresh)

  ui <- fluidPage(
    use_theme(create_theme(
      theme = "default",
      bs_vars_global(
        body_bg = "#000",
        text_color = "#FFF"
      ),
      bs_vars_wells(
        bg = "#2E2E2E"
      )
    )),
    tags$h1("Inversed color theme"),

    sidebarLayout(
      sidebarPanel(
        "This is the sidebar panel"
      ),
      mainPanel(
        tags$h1("First level title"),
        tags$h2("Second level title"),
        tags$h3("Third level title"),
        tags$h4("Fourth level title"),
        tags$h5("Fifth level title"),
        tags$h6("Sixth level title")
      )
    )
  )

  server <- function(input, output, session) {

  }

  shinyApp(ui, server)
}

Use a template to define SCSS variables

Description

Open a SCSS template to modify variables, after use bs_vars_file to import those variables and create a theme.

Usage

use_vars_template(
  output_file,
  theme = c("default", "cerulean", "cosmo", "cyborg", "darkly", "flatly", "journal",
    "lumen", "paper", "readable", "sandstone", "simplex", "slate", "spacelab",
    "superhero", "united", "yeti"),
  open = interactive()
)

Arguments

Note

After use bs_vars_file to use the template.

Examples

# For example, we use a temporary file
custom <- tempfile(fileext = ".scss")

# this will open a template
# to modify variables of the flatly theme
use_vars_template(
  output_file = custom,
  theme = "flatly"
)

# after use bs_vars_file() to use the template

# clean up
unlink(custom)