---
title: "Using dashboardthemes"
author: "Nik Lilovski"
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{Using dashboardthemes}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

```{r setup, include = FALSE}
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 <a href="http://www.dataseries.org/" target="_blank">here</a> | 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.
```{r, eval = FALSE}

  ...
  ### 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.
```{r, eval = FALSE}

  ...
  ### 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.
```{r, eval = FALSE}

  ### 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.
```{r, eval = FALSE}

  ### 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 <a href="https://bootswatch.com/flatly/" target="_blank">Flatly</a> 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