Author: Nik Lilovski
Date: 2022-07-13

# Using dashboardthemes

#### Nik Lilovski

#### 2022-07-13

## 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

## Known issues

Some application components have not been fully customised:

- Action button when pressed

- Dropdown menu background

- Popup menu and placeholder font colour in date inputs

- Checkbox and radio buttons