Package 'dashboardthemes'

Title: Customise the Appearance of 'shinydashboard' Applications using Themes
Description: Allows manual creation of themes and logos to be used in applications created using the 'shinydashboard' package. Removes the need to change the underlying css code by wrapping it into a set of convenient R functions.
Authors: Nik Lilovski [aut, cre]
Maintainer: Nik Lilovski <[email protected]>
License: MIT + file LICENSE
Version: 1.1.6
Built: 2025-03-05 04:17:32 UTC
Source: https://github.com/nik01010/dashboardthemes

Help Index

cssGradientThreeColors

Description

Generates CSS code for a gradient with three colors

Usage

cssGradientThreeColors(
  direction = "down",
  colorStart,
  colorMiddle,
  colorEnd,
  colorStartPos = 0,
  colorMiddlePos = 50,
  colorEndPos = 100
)

Arguments

direction

String. Direction of the gradient (down/right). Defaults to down.
colorStart

String. Start (top/left) colour of the gradient.
colorMiddle

String. Middle colour of the gradient.
colorEnd

String. End (bottom/right) colour of the gradient.
colorStartPos

Numeric. Position of the start colour. Defaults to 0.
colorMiddlePos

Numeric. Position of the middle colour. Defaults to 50.
colorEndPos

Numeric. Position of the end colour; defaults to 100.

Value

CSS code. Gradient with three colors.

See Also

shinyDashboardThemeDIY, shinyDashboardLogoDIY,

Examples

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
)

dashboardthemes: a package for custom themes in shinydashboard applications

Description

The dashboardthemes package provides two main important features:

  • Using new pre-defined themes and logos for dashboards.

  • Creating custom themes and logos for dashboards.

Available functions

The available functions are:

logo_blue_gradient

Description

Blue Gradient logo for a shinydashboard application

Usage

logo_blue_gradient(boldText = "Shiny", mainText = "App", badgeText = "v1.1")

Arguments

boldText

String. Bold text for the logo.
mainText

String. Main text for the logo.
badgeText

String. Text for the logo badge.

Value

Object produced by shinyDashboardLogoDIY

See Also

shinyDashboardLogoDIY

logo_flat_red

Description

Flat Red logo for a shinydashboard application

Usage

logo_flat_red(boldText = "Shiny", mainText = "App", badgeText = "v1.1")

Arguments

boldText

String. Bold text for the logo.
mainText

String. Main text for the logo.
badgeText

String. Text for the logo badge.

Value

Object produced by shinyDashboardLogoDIY

See Also

shinyDashboardLogoDIY

logo_grey_dark

Description

Grey Dark logo for a shinydashboard application

Usage

logo_grey_dark(boldText = "Shiny", mainText = "App", badgeText = "v1.1")

Arguments

boldText

String. Bold text for the logo.
mainText

String. Main text for the logo.
badgeText

String. Text for the logo badge.

Value

Object produced by shinyDashboardLogoDIY

See Also

shinyDashboardLogoDIY

logo_grey_light

Description

Grey Light logo for a shinydashboard application

Usage

logo_grey_light(boldText = "Shiny", mainText = "App", badgeText = "v1.1")

Arguments

boldText

String. Bold text for the logo.
mainText

String. Main text for the logo.
badgeText

String. Text for the logo badge.

Value

Object produced by shinyDashboardLogoDIY

See Also

shinyDashboardLogoDIY

logo_onenote

Description

OneNote logo for a shinydashboard application

Usage

logo_onenote(boldText = "Shiny", mainText = "App", badgeText = "v1.1")

Arguments

boldText

String. Bold text for the logo.
mainText

String. Main text for the logo.
badgeText

String. Text for the logo badge.

Value

Object produced by shinyDashboardLogoDIY

See Also

shinyDashboardLogoDIY

logo_poor_mans_flatly

Description

Poor Man's Flatly logo for a shinydashboard application

Usage

logo_poor_mans_flatly(boldText = "Shiny", mainText = "App", badgeText = "v1.1")

Arguments

boldText

String. Bold text for the logo.
mainText

String. Main text for the logo.
badgeText

String. Text for the logo badge.

Value

Object produced by shinyDashboardLogoDIY

See Also

shinyDashboardLogoDIY

logo_purple_gradient

Description

Purple Gradient logo for a shinydashboard application

Usage

logo_purple_gradient(boldText = "Shiny", mainText = "App", badgeText = "v1.1")

Arguments

boldText

String. Bold text for the logo.
mainText

String. Main text for the logo.
badgeText

String. Text for the logo badge.

Value

Object produced by shinyDashboardLogoDIY

See Also

shinyDashboardLogoDIY

shinyDashboardLogoDIY

Description

Creates a custom logo object for a shinydashboard application

Usage

shinyDashboardLogoDIY(
  boldText,
  mainText,
  textSize = 15,
  badgeText,
  badgeTextColor,
  badgeTextSize = 2,
  badgeBackColor,
  badgeBorderRadius = 3
)

Arguments

boldText

String. Bold text for the logo.
mainText

String. Main text for the logo.
textSize

Numeric. Text size for the logo. Defaults to 15.
badgeText

String. Text for the logo badge.
badgeTextColor

String. Text color of the logo badge.
badgeTextSize

Numeric. Text color of the logo badge. Defaults to 2.
badgeBackColor

String. Background color of the logo badge.
badgeBorderRadius

Numeric. Border radius of the logo badge. Defaults to 3.

Value

HTML code. Logo for shinydashboard's sidebar.

Note

This logo design was inspired from http://www.dataseries.org/.

See Also

shinyDashboardLogo, cssGradientThreeColors

Examples

customLogo <- shinyDashboardLogoDIY(
  boldText = "SD"
  ,mainText = "Themes"
  ,textSize = 16
  ,badgeText = "v1.1"
  ,badgeTextColor = "white"
  ,badgeTextSize = 2
  ,badgeBackColor = "#40E0D0"
  ,badgeBorderRadius = 3
)

shinyDashboardThemeDIY

Description

Creates a custom theme object for a shinydashboard application

Usage

shinyDashboardThemeDIY(
  appFontFamily,
  appFontColor,
  logoBackColor,
  bodyBackColor,
  headerButtonBackColor,
  headerButtonIconColor,
  headerButtonBackColorHover,
  headerButtonIconColorHover,
  headerBackColor,
  headerBoxShadowColor,
  headerBoxShadowSize,
  sidebarBackColor,
  sidebarPadding,
  sidebarShadowRadius,
  sidebarShadowColor,
  sidebarMenuBackColor,
  sidebarMenuPadding,
  sidebarMenuBorderRadius,
  sidebarUserTextColor,
  sidebarSearchBackColor,
  sidebarSearchIconColor,
  sidebarSearchBorderColor,
  sidebarTabTextColor,
  sidebarTabTextSize,
  sidebarTabBorderStyle,
  sidebarTabBorderColor,
  sidebarTabBorderWidth,
  sidebarTabBackColorSelected,
  sidebarTabTextColorSelected,
  sidebarTabRadiusSelected,
  sidebarTabTextColorHover,
  sidebarTabBackColorHover,
  sidebarTabBorderStyleHover,
  sidebarTabBorderColorHover,
  sidebarTabBorderWidthHover,
  sidebarTabRadiusHover,
  boxBackColor,
  boxBorderRadius,
  boxShadowSize,
  boxShadowColor,
  boxTitleSize,
  boxDefaultColor,
  boxPrimaryColor,
  boxSuccessColor,
  boxWarningColor,
  boxDangerColor,
  tabBoxTabColor,
  tabBoxTabTextSize,
  tabBoxTabTextColor,
  tabBoxTabTextColorSelected,
  tabBoxBackColor,
  tabBoxHighlightColor,
  tabBoxBorderRadius,
  buttonBackColor,
  buttonTextColor,
  buttonBorderColor,
  buttonBorderRadius,
  buttonBackColorHover,
  buttonTextColorHover,
  buttonBorderColorHover,
  buttonHeight = "auto",
  buttonPadding = "6px 12px",
  textboxBackColor,
  textboxBorderColor,
  textboxBorderRadius,
  textboxBackColorSelect,
  textboxBorderColorSelect,
  textboxHeight = "auto",
  textboxPadding = "6px 12px",
  tableBackColor,
  tableBorderColor,
  tableBorderTopSize,
  tableBorderRowSize,
  primaryFontColor = "auto",
  successFontColor = "auto",
  warningFontColor = "auto",
  dangerFontColor = "auto",
  infoFontColor = "auto",
  boxInfoColor = "auto"
)

Arguments

appFontFamily

String. Application font.
appFontColor

String. Application font colour.
logoBackColor

String. Logo background colour.
bodyBackColor

String. Main page background colour.
headerButtonBackColor

String. Sidebar toggle button background colour.
headerButtonIconColor

String. Sidebar toggle button icon colour.
headerButtonBackColorHover

String. Sidebar toggle button background colour: hovered.
headerButtonIconColorHover

String. Sidebar toggle button icon colour: hovered.
headerBackColor

String. Top header background colour.
headerBoxShadowColor

String. Top header shadow colour.
headerBoxShadowSize

String. Top header shadow size.
sidebarBackColor

String. Sidebar background colour.
sidebarPadding

Numeric. Sidebar inner padding.
sidebarShadowRadius

String. Sidebar shadow radius.
sidebarShadowColor

String. Sidebar shadow colour.
sidebarMenuBackColor

String. Sidebar menu background colour.
sidebarMenuPadding

Numeric. Sidebar menu inner padding.
sidebarMenuBorderRadius

Numeric. Sidebar menu shape radius.
sidebarUserTextColor

String. Sidebar userbox text colour.
sidebarSearchBackColor

String. Sidebar searchbox background colour.
sidebarSearchIconColor

String. Sidebar searchbox icon colour.
sidebarSearchBorderColor

String. Sidebar searchbox border line colour.
sidebarTabTextColor

String. Sidebar tab font colour.
sidebarTabTextSize

Numeric. Sidebar tab font size.
sidebarTabBorderStyle

String. Sidebar tab border line style.
sidebarTabBorderColor

String. Sidebar tab border line colour.
sidebarTabBorderWidth

Numeric. Sidebar tab border line width.
sidebarTabBackColorSelected

String. Sidebar tab background colour: selected.
sidebarTabTextColorSelected

String. Sidebar tab font colour: selected.
sidebarTabRadiusSelected

String. Sidebar tab shape radius: selected.
sidebarTabTextColorHover

String. Sidebar tab font colour: hovered.
sidebarTabBackColorHover

String. Sidebar tab background colour: hovered.
sidebarTabBorderStyleHover

String. Sidebar tab border line style: hovered.
sidebarTabBorderColorHover

String. Sidebar tab border line colour: hovered.
sidebarTabBorderWidthHover

Numeric. Sidebar tab border line width: hovered.
sidebarTabRadiusHover

String. Sidebar tab shape radius: hovered.
boxBackColor

String. Box background colour.
boxBorderRadius

Numeric. Box shape radius.
boxShadowSize

String. Box shadow size.
boxShadowColor

String. Box shadow colour.
boxTitleSize

Numeric. Box title font size.
boxDefaultColor

String. Box default highlight colour.
boxPrimaryColor

String. Box primary highlight colour.
boxSuccessColor

String. Box success highlight colour.
boxWarningColor

String. Box warning highlight colour.
boxDangerColor

String. Box danger highlight colour.
tabBoxTabColor

String. Tab box tab background colour.
tabBoxTabTextSize

Numeric. Tab box tab font size.
tabBoxTabTextColor

String. Tab box tab font colour.
tabBoxTabTextColorSelected

String. Tab box tab font colour: selected.
tabBoxBackColor

String. Tab box body background colour.
tabBoxHighlightColor

String. Tab box highlight colour.
tabBoxBorderRadius

Numeric. Tab box shape radius.
buttonBackColor

String. Button background colour.
buttonTextColor

String. Button font colour.
buttonBorderColor

String. Button border line colour.
buttonBorderRadius

Numeric. Button shape radius.
buttonBackColorHover

String. Button background colour: hovered.
buttonTextColorHover

String. Button font colour: hovered.
buttonBorderColorHover

String. Button border line colour: hovered.
buttonHeight

Numeric. Button shape height.
buttonPadding

String. Button label padding. Defaults to "6px 12px".
textboxBackColor

String. Textbox background colour.
textboxBorderColor

String. Textbox border line colour.
textboxBorderRadius

Numeric. Textbox shape radius.
textboxBackColorSelect

String. Textbox background colour: selected.
textboxBorderColorSelect

String. Textbox border line colour: selected.
textboxHeight

Numeric. Textbox shape height.
textboxPadding

String. Textbox text padding. Defaults to "6px 12px".
tableBackColor

String. Table background colour.
tableBorderColor

String. Table border line colour.
tableBorderTopSize

Numeric. Table header line size.
tableBorderRowSize

Numeric. Table row separator line size.
primaryFontColor

String. Primary status highlight font colour.
successFontColor

String. Success status highlight font colour.
warningFontColor

String. Warning status highlight font colour.
dangerFontColor

String. Danger status highlight font colour.
infoFontColor

String. Info status highlight font colour.
boxInfoColor

String. Box info highlight colour.

Value

CSS code. Theme for a shinydashboard application.

See Also

shinyDashboardThemes, shinyDashboardLogoDIY, cssGradientThreeColors

Examples

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

)

shinyDashboardThemes

Description

Calls a custom theme object created using shinyDashboardThemeDIY

Usage

shinyDashboardThemes(theme)

Arguments

theme

String. Name of theme to be used

Value

CSS code. Theme for shinydashboard.

Available themes

  • blue_gradient: Demonstrates use of gradients, shadows and rounded corners.

  • flat_red: Flat colour theme with red highlights.

  • grey_light: Lightweight grey theme.

  • grey_dark: Demonstrates use of inverted dark colour schemes.

  • onenote: Styled similarly to the OneNote application.

  • poor_mans_flatly: Poor man's version of the Flatly theme.

  • purple_gradient: Demonstrates use of dark gradients and rounded corners.

See Also

shinyDashboardThemeDIY, shinyDashboardLogo

Examples

#...
### ui body
#dashboardBody(

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

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

theme_blue_gradient

Description

Blue Gradient theme for a shinydashboard application

Usage

theme_blue_gradient

Format

An object of class shiny.tag of length 3.

Value

Object produced by shinyDashboardThemeDIY

See Also

shinyDashboardThemeDIY

theme_flat_red

Description

Flat Red theme for a shinydashboard application

Usage

theme_flat_red

Format

An object of class shiny.tag of length 3.

Value

Object produced by shinyDashboardThemeDIY

See Also

shinyDashboardThemeDIY

theme_grey_dark

Description

Grey Dark theme for a shinydashboard application

Usage

theme_grey_dark

Format

An object of class shiny.tag of length 3.

Value

Object produced by shinyDashboardThemeDIY

See Also

shinyDashboardThemeDIY

theme_grey_light

Description

Grey Light theme for a shinydashboard application

Usage

theme_grey_light

Format

An object of class shiny.tag of length 3.

Value

Object produced by shinyDashboardThemeDIY

See Also

shinyDashboardThemeDIY

theme_onenote

Description

OneNote theme for a shinydashboard application

Usage

theme_onenote

Format

An object of class shiny.tag of length 3.

Value

Object produced by shinyDashboardThemeDIY

See Also

shinyDashboardThemeDIY

theme_poor_mans_flatly

Description

Poor Man's Flatly theme for a shinydashboard application

Usage

theme_poor_mans_flatly

Format

An object of class shiny.tag of length 3.

Value

Object produced by shinyDashboardThemeDIY

See Also

shinyDashboardThemeDIY

theme_purple_gradient

Description

Purple Gradient theme for a shinydashboard application

Usage

theme_purple_gradient

Format

An object of class shiny.tag of length 3.

Value

Object produced by shinyDashboardThemeDIY

See Also

shinyDashboardThemeDIY