In nik01010/dashboardthemes: Customise the Appearance of 'shinydashboard' Applications using Themes

knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)

Introduction

This document presents a new method of customising Shinydashboard applications using themes.

New R functions

The large amount of code required to change the application appearance has been wrapped into several convenient and easy-to-use R functions, removing the need for end-users to change the underlying CSS code manually.

The new functions are described below:

| Function | Description | Input | Output | | ------------- |----------------------|----------------------|---------------| | shinyDashboardThemes | Calls a custom theme created using shinyDashboardThemeDIY | Theme name | Theme settings object | | shinyDashboardLogo | Calls a custom logo created using shinyDashboardLogoDIY | Theme name and logo text | Logo settings object | | shinyDashboardThemeDIY | Creates a custom theme object | Size, colour and other settings for each UI element. See separate tab for input options | Theme settings object | | shinyDashboardLogoDIY | Creates a custom logo object. Inspired from here | Size and colour for the logo. See separate tab for input options | Logo settings object | | cssGradientThreeColors | Creates a three colour gradient to be used in themes | Gradient direction, colours, position of middle colour | CSS gradient |

Using the new functions

Examples of using each function are provided below:

shinyDashboardThemes

Use by inserting into the dashboardBody part of an application.

  ...
  ### ui body
  dashboardBody(

    ### changing theme
    shinyDashboardThemes(
      theme = "blue_gradient"
    )

    ### ui tabs
    ,tabItems(
      tabItem(
        ...

shinyDashboardLogo

Use by inserting into the title parameter within the dashboardHeader part of an application.

  ...
  ### ui
  ui <- dashboardPage(

    ### ui header
    dashboardHeader(

      ### changing logo
      title = shinyDashboardLogo(
        theme = "blue_gradient",
        boldText = "Shiny",
        mainText = "App",
        badgeText = "v1.1"
      )
      ...

shinyDashboardThemeDIY

Example of creating a custom theme object. Each parameter can be changed as required.

  ### calling custom theme object in shinydashboard
    ...
    ### ui body
    dashboardBody(

      ### changing theme
      customTheme

      ### ui tabs
      ,tabItems(
        tabItem(
          ...

  ### creating custom theme object
  customTheme <- shinyDashboardThemeDIY(

    ### general
    appFontFamily = "Arial"
    ,appFontColor = "rgb(0,0,0)"
    ,primaryFontColor = "rgb(0,0,0)"
    ,infoFontColor = "rgb(0,0,0)"
    ,successFontColor = "rgb(0,0,0)"
    ,warningFontColor = "rgb(0,0,0)"
    ,dangerFontColor = "rgb(0,0,0)"
    ,bodyBackColor = "rgb(248,248,248)"

    ### header
    ,logoBackColor = "rgb(23,103,124)"

    ,headerButtonBackColor = "rgb(238,238,238)"
    ,headerButtonIconColor = "rgb(75,75,75)"
    ,headerButtonBackColorHover = "rgb(210,210,210)"
    ,headerButtonIconColorHover = "rgb(0,0,0)"

    ,headerBackColor = "rgb(238,238,238)"
    ,headerBoxShadowColor = "#aaaaaa"
    ,headerBoxShadowSize = "2px 2px 2px"

    ### sidebar
    ,sidebarBackColor = cssGradientThreeColors(
      direction = "down"
      ,colorStart = "rgb(20,97,117)"
      ,colorMiddle = "rgb(56,161,187)"
      ,colorEnd = "rgb(3,22,56)"
      ,colorStartPos = 0
      ,colorMiddlePos = 50
      ,colorEndPos = 100
    )
    ,sidebarPadding = 0

    ,sidebarMenuBackColor = "transparent"
    ,sidebarMenuPadding = 0
    ,sidebarMenuBorderRadius = 0

    ,sidebarShadowRadius = "3px 5px 5px"
    ,sidebarShadowColor = "#aaaaaa"

    ,sidebarUserTextColor = "rgb(255,255,255)"

    ,sidebarSearchBackColor = "rgb(55,72,80)"
    ,sidebarSearchIconColor = "rgb(153,153,153)"
    ,sidebarSearchBorderColor = "rgb(55,72,80)"

    ,sidebarTabTextColor = "rgb(255,255,255)"
    ,sidebarTabTextSize = 13
    ,sidebarTabBorderStyle = "none none solid none"
    ,sidebarTabBorderColor = "rgb(35,106,135)"
    ,sidebarTabBorderWidth = 1

    ,sidebarTabBackColorSelected = cssGradientThreeColors(
      direction = "right"
      ,colorStart = "rgba(44,222,235,1)"
      ,colorMiddle = "rgba(44,222,235,1)"
      ,colorEnd = "rgba(0,255,213,1)"
      ,colorStartPos = 0
      ,colorMiddlePos = 30
      ,colorEndPos = 100
    )
    ,sidebarTabTextColorSelected = "rgb(0,0,0)"
    ,sidebarTabRadiusSelected = "0px 20px 20px 0px"

    ,sidebarTabBackColorHover = cssGradientThreeColors(
      direction = "right"
      ,colorStart = "rgba(44,222,235,1)"
      ,colorMiddle = "rgba(44,222,235,1)"
      ,colorEnd = "rgba(0,255,213,1)"
      ,colorStartPos = 0
      ,colorMiddlePos = 30
      ,colorEndPos = 100
    )
    ,sidebarTabTextColorHover = "rgb(50,50,50)"
    ,sidebarTabBorderStyleHover = "none none solid none"
    ,sidebarTabBorderColorHover = "rgb(75,126,151)"
    ,sidebarTabBorderWidthHover = 1
    ,sidebarTabRadiusHover = "0px 20px 20px 0px"

    ### boxes
    ,boxBackColor = "rgb(255,255,255)"
    ,boxBorderRadius = 5
    ,boxShadowSize = "0px 1px 1px"
    ,boxShadowColor = "rgba(0,0,0,.1)"
    ,boxTitleSize = 16
    ,boxDefaultColor = "rgb(210,214,220)"
    ,boxPrimaryColor = "rgba(44,222,235,1)"
    ,boxInfoColor = "rgb(210,214,220)"
    ,boxSuccessColor = "rgba(0,255,213,1)"
    ,boxWarningColor = "rgb(244,156,104)"
    ,boxDangerColor = "rgb(255,88,55)"

    ,tabBoxTabColor = "rgb(255,255,255)"
    ,tabBoxTabTextSize = 14
    ,tabBoxTabTextColor = "rgb(0,0,0)"
    ,tabBoxTabTextColorSelected = "rgb(0,0,0)"
    ,tabBoxBackColor = "rgb(255,255,255)"
    ,tabBoxHighlightColor = "rgba(44,222,235,1)"
    ,tabBoxBorderRadius = 5

    ### inputs
    ,buttonBackColor = "rgb(245,245,245)"
    ,buttonTextColor = "rgb(0,0,0)"
    ,buttonBorderColor = "rgb(200,200,200)"
    ,buttonBorderRadius = 5

    ,buttonBackColorHover = "rgb(235,235,235)"
    ,buttonTextColorHover = "rgb(100,100,100)"
    ,buttonBorderColorHover = "rgb(200,200,200)"

    ,textboxBackColor = "rgb(255,255,255)"
    ,textboxBorderColor = "rgb(200,200,200)"
    ,textboxBorderRadius = 5
    ,textboxBackColorSelect = "rgb(245,245,245)"
    ,textboxBorderColorSelect = "rgb(200,200,200)"

    ### tables
    ,tableBackColor = "rgb(255,255,255)"
    ,tableBorderColor = "rgb(240,240,240)"
    ,tableBorderTopSize = 1
    ,tableBorderRowSize = 1

  )

shinyDashboardLogoDIY

Example of creating a custom logo object. Each parameter can be changed as required.

  ### calling custom logo object in shinydashboard
    ...
    ### ui
    ui <- dashboardPage(

      ### ui header
      dashboardHeader(

        ### changing logo
        title = customLogo
        ...

  ### creating custom logo object
  customLogo <- shinyDashboardLogoDIY(

    boldText = "SD"
    ,mainText = "Themes"
    ,textSize = 16
    ,badgeText = "v1.1"
    ,badgeTextColor = "white"
    ,badgeTextSize = 2
    ,badgeBackColor = "#40E0D0"
    ,badgeBorderRadius = 3

  )

New themes

Several themes have been created using the new functionality:

| Theme | Code | Description | | ------------------ |------------|-----------------------------------------------| | Blue gradient | blue_gradient | Demonstrates use of gradients, shadows and rounded corners | | Flat Red | flat_red | Flat colour theme with red highlights. | | Grey light | grey_light | Simple, light theme using a grey colour schemes | | Grey dark | grey_dark | Demonstrates use of inverted dark colour schemes | | OneNote | onenote | Styled similarly to the OneNote application | | Poor man's Flatly | poor_mans_flatly | Poor man's version of the Flatly theme | Purple gradient | purple_gradient | Demonstrates high use of gradients and a smaller sidebar |