nik01010 / dashboardthemes

No Longer Supported

dashboardthemes

-WARNING: the 'dashboardthemes' package is no longer being maintained as of version 1.1.6, 
-and will eventually be removed from CRAN.

-It is recommended that users switch over to the 'bslib' or 'fresh' theming packages available on CRAN.

dashboardthemes's Issues

Change box font color based on status

Specific example is when using the Flatly primary success box with solid header as true, the text is black on black background. Is there a way to specify the font color on a per status basis? Thanks.

selectInput color on hover

Would be nice to be able to control the background color on hover when selecting from selectInput(). Currently, there is no indication which item the cursor is hovering over.

Add Windows CI checks

Currently Travis CI builds only support Linux and Mac OS

To add support for GitHub actions builds on Windows.

compatibility with bs4Dash

I don't think this package is compatible with bs4Dash but it is compatible with shinydashboardPlus. Any reason why?

For example, adding this to UI does not work:

dashboardBody(dashboardthemes::shinyDashboardThemes(theme = "blue_gradient"))

Add support for customising infoBox validColours

Consider adding support for customising the validColours object in shinydashboard.

Requested by @AltayYuzeir

Reproducible example below:

ui.R

library(shiny)
library(shinydashboard)
library(dashboardthemes)


shinyUI(
  dashboardPage(
  dashboardHeader(
    title = "InfoBoxes",
    disable = F
  ),
  
  dashboardSidebar(
    sidebarMenu(
      menuItem(
        text = "About",
        tabName = "about",
        icon = icon("info-circle")
      )
    )
  ),
  
  dashboardBody(
    shinyDashboardThemes(theme = "grey_light"),
    tabItem(
      tabName = "about",
      fluidRow(
        infoBoxOutput("infobox1", width = 6),
        infoBoxOutput("infobox2", width = 6),
        infoBoxOutput("infobox3", width = 6),
        infoBoxOutput("infobox4", width = 6),
        infoBoxOutput("infobox5", width = 6),
        infoBoxOutput("infobox6", width = 6)
      )
    )
  )
  
)

)

server.R

shinyServer(function(input, output, session) {
  output$infobox1 <- renderInfoBox({
    infoBox(
      title = "Navy",
      value = "Navy",
      color = "navy",
      icon = icon("info"),
      fill = T
    )
  })
  
  output$infobox2 <- renderInfoBox({
    infoBox(
      title = "Lime",
      value = "lime",
      color = "lime",
      icon = icon("info"),
      
      fill = T
    )
  })
  
  output$infobox3 <- renderInfoBox({
    infoBox(
      title = "Fuchsia",
      value = "fuchsia",
      color = "fuchsia",      
      icon = icon("info"),

      fill = T
    )
  })
  
})

No color option for info boxes in shinyDashboardThemeDIY

It seems to me that shinyDashboardThemeDIY allows you to set the colors for the small colored status bar on top of boxes for all status types except for "info". I expected a sixth line in the below snippet for boxInfoColor, but it isn't an option. This seems consistent across several functions, so it is probably intentional but I can't tell why.

    ,boxDefaultColor = "rgb(210,214,220)"
    ,boxPrimaryColor = "rgba(44,222,235,1)"
    ,boxSuccessColor = "rgba(0,255,213,1)"
    ,boxWarningColor = "rgb(244,156,104)"
    ,boxDangerColor = "rgb(255,88,55)"

Problem with DT

I don't see the previous and Next button in grey dark theme. Let me know if it's just me or everybody has the same problem.

Request: Control height of input fields

Request: increase/decrease the size of UI elements (eg, height of input field).

Requested by: https://community.rstudio.com/u/pomchip

Background: https://community.rstudio.com/t/introducing-dashboardthemes-experimental-themes-for-shinydashboard/5860/8?u=nik01010

Add live theme switcher to package

To be done in future development work.

This is currently possible in a separate repo: https://github.com/nik01010/dashboardThemeSwitcher, but is more convenient be integrated into the package itself.

Code to recreate dashboardthemes with fresh?

Dear Nik,

sad to see that dashboardthemes is not continued!

Could you perhaps post instructions on how to recreate your themes with fresh? I understand of course if that's too much work!

Best
Carlo

Sidebar menuSubItem's Text Changes to Selected Color

When adding menuSubItem's to the Sidebar and then clicking to expand the menu; all of the SubItems's text changes to sidebarTabTextColorSelected value. Is there a way to specify the color of these menuStubItem's?

I found where someone was able to solve this issue using the below code in the dashboardSidebar section, but it would be nice to set this in the shinyDashboardThemeDIY function.

tags$style(HTML(".main-sidebar .sidebar .sidebar-menu .treeview-menu li.active a {background-color: #1E282C !important;}")),
tags$style(HTML(".main-sidebar .sidebar .sidebar-menu .treeview-menu li:hover a {background-color: #1E282C !important;}"))

DT Table Styling

Hi,
thanks for this awesome packages - I really like the theme editor and it really helps me understand the CSS styling part and moving forward in creating own themes.

I just have a question about the Datatable styling when I use the DT functions for colors.

I use the DTs formatStyle to change the backgroundcolor by DeviceName variable to help the user

With Standard theme:

With Theme Switcher:

It seems the colors are set by the CSS and DT can't overrule this.

Is there a way to apply DTs formatStyle ?

Thank you very much,
Bernd

Is there way to add a "none" theme

Hi, I'm playing with the module to set the choices for the different themes available, but I cannot to set the theme "none", I mean reset the theme with the shinydashboard defaults , I tried to add the default option with different values but none of them restore the shinydashboard.

Is there a way to add an option and set none theme?

  changeThemeChoices <- c(
    "Default" = NA, # NA, NULL, "", "none"
    "Blue gradient" = "blue_gradient",
    "BoE website" = "boe_website",
    "Grey light" = "grey_light",
    "Grey dark" = "grey_dark",
    "OneNote" = "onenote",
    "Poor man's Flatly" = "poor_mans_flatly",
    "Purple gradient" = "purple_gradient"
  )

regards

dashboardthemes with shinydashboardplus

Hi, this looks fantastic! Just a question: I tend to work with shinydashboardplus more often these days. Is the dashboardthemes package compatible with shinydashboardplus? If not are there any plans to make a version that is compatible?
Many thanks

Not available for R 3.6.0

I just updated my R using installr on Windows. My previous packages didn't get copied over to the new directory, so I had to reinstall everything. Everything got reinstalled, except this:

Warning in install.packages : package ‘dashboardthemes’ is not available (for R version 3.6.0)

Any chance this could be fixed soon?

Gradient in Tabbox background color

Hi,

Is it possible to apply a color gradient as the background color of tabBox?

Thanks

Is it possible to change the font color of a box Panel?

I have the following panel. I was able to change the box color but I can't change the box title color!
I'd like to change the title of all boxes to white. Is this possible in the current DIY theme?

This is my custom theme:

`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(255,255,255)"
  
  ### header
  ,logoBackColor = "rgb(255,255,255)"
  ,headerButtonBackColor = "rgb(255,255,255)"
  ,headerButtonIconColor = "rgb(255,255,255)"
  ,headerButtonBackColorHover = "rgb(255,255,255)"
  ,headerButtonIconColorHover = "rgb(0,0,0)"
  
  ,headerBackColor = "rgb(255,255,255)"
  ,headerBoxShadowColor = "rgb(255,255,255)"
  ,headerBoxShadowSize = "2px 3px 2px"
  
  ### sidebar
  ,sidebarBackColor = cssGradientThreeColors(
    direction = "right"
    ,colorStart = "rgb(255,255,255)"
    ,colorMiddle = "rgb(255,255,255)"
    ,colorEnd = "rgb(255,255,255)"
    ,colorStartPos = 0
    ,colorMiddlePos = 97
    ,colorEndPos = 100
  )
  ,sidebarPadding = 0
  
  ,sidebarMenuBackColor = "transparent"
  ,sidebarMenuPadding = 0
  ,sidebarMenuBorderRadius = 0
  
  ,sidebarShadowRadius = "0px 0px 0px"
  ,sidebarShadowColor = ""
  
  ,sidebarUserTextColor = "rgb(0,0,0)"
  
  ,sidebarSearchBackColor = "rgb(255,255,255)"
  ,sidebarSearchIconColor = "rgb(255,255,255)"
  ,sidebarSearchBorderColor = "rgb(255,255,255)"
  
  ,sidebarTabTextColor = "rgb(0,0,0)"
  ,sidebarTabTextSize = 13
  ,sidebarTabBorderStyle = "none"
  ,sidebarTabBorderColor = ""
  ,sidebarTabBorderWidth = 0
  
  ,sidebarTabBackColorSelected = cssGradientThreeColors(
    direction = "down"
    ,colorStart = "rgb(255,255,255)"
    ,colorMiddle = "rgb(255,255,255)"
    ,colorEnd = "rgb(255,255,255)"
    ,colorStartPos = 0
    ,colorMiddlePos = 5
    ,colorEndPos = 100
  )
  ,sidebarTabTextColorSelected = "rgb(0,0,0)"
  ,sidebarTabRadiusSelected = "0px"
  
  ,sidebarTabBackColorHover = cssGradientThreeColors(
    direction = "right"
    ,colorStart = "rgb(230,230,230)"
    ,colorMiddle = "rgb(225,225,225)"
    ,colorEnd = "rgb(210,210,210)"
    ,colorStartPos = 0
    ,colorMiddlePos = 97
    ,colorEndPos = 100
  )
  ,sidebarTabTextColorHover = "rgb(0,0,0)"
  ,sidebarTabBorderStyleHover = "none"
  ,sidebarTabBorderColorHover = ""
  ,sidebarTabBorderWidthHover = 0
  ,sidebarTabRadiusHover = "0px"
  
  ### boxes
  ,boxBackColor = "rgb(255,255,255)"
  ,boxBorderRadius = 0
  ,boxShadowSize = "none"
  ,boxShadowColor = "rgb(255,255,255)"
  ,boxTitleSize = 18
  ,boxDefaultColor = "rgb(225,225,225)"
  ,boxPrimaryColor = "rgb(255,255,255)"
  ,boxInfoColor = "(11,152,203)"   # color tabs box
  ,boxSuccessColor = "rgb(255,255,255)"
  ,boxWarningColor = "rgb(255,255,255)"
  ,boxDangerColor = "rgb(255,255,255)"
  
  ,tabBoxTabColor = "rgb(255,255,255)"
  ,tabBoxTabTextSize = 14
  ,tabBoxTabTextColor = "rgb(255,255,255)"
  ,tabBoxTabTextColorSelected = "rgb(255,255,255)"
  ,tabBoxBackColor = "rgb(255,255,255)"
  ,tabBoxHighlightColor = "rgb(210,210,210)"
  ,tabBoxBorderRadius = 0
  
  ### inputs
  ,buttonBackColor = "rgb(240,240,240)"
  ,buttonTextColor = "rgb(80,80,80)"
  ,buttonBorderColor = "rgb(185,185,185)"
  ,buttonBorderRadius = 5
  
  ,buttonBackColorHover = "rgb(227,227,227)"
  ,buttonTextColorHover = "rgb(80,80,80)"
  ,buttonBorderColorHover = "rgb(210,210,210)"
  
  ,textboxBackColor = "rgb(255,255,255)"
  ,textboxBorderColor = "rgb(210,210,210)"
  ,textboxBorderRadius = 0
  ,textboxBackColorSelect = "rgb(255,255,255)"
  ,textboxBorderColorSelect = "rgb(210,210,210)"
  
  ### tables
  ,tableBackColor = "rgb(255,255,255)"
  ,tableBorderColor = "rgb(255,255,255)"
  ,tableBorderTopSize = 1
  ,tableBorderRowSize = 1
)` 

Fix lintr unit test

Currently the linter unit test is failing because of a relative path issue introduced in the latest lintr package version.

This could be resolved using guidance in the following link: r-lib/lintr#421

test_that("LintRules_ShouldPass_WhenRun", {
  # Arrange
  linterPath <- getwd()

  # Act / Assert
  lintr::expect_lint_free(path = linterPath, relative_path = FALSE)
})

To be fixed in the next release.

Extra body tag in shinyDashboardLogoDIY

From say rstudio type:

shinyDashboardLogoDIY(
  boldText = "SD"
  ,mainText = "Themes"
  ,textSize = 16
  ,badgeText = "BETA"
  ,badgeTextColor = "white"
  ,badgeTextSize = 2
  ,badgeBackColor = "#40E0D0"
  ,badgeBorderRadius = 3
)

The result is

<p style="font-size:16px">
      <b> SD </b>Themes<span> &nbsp; </span>
      <span style="background-color: #40E0D0;
      border-radius: 3px; "> &nbsp;
      <font color="white" size="2">BETA  </font> &nbsp; </span> <body> </p>

There's a surplus <body> tag

Is there a way to change the logo text in dashboardlogo function

By default, it gives something that should be changed for every product.

Package checks

I ran the checks on the package in RStudio and I got 1 error and 2 notes. You might want to fix them if you are thinking about putting dashboardthemes on CRAN.

• checking for missing documentation entries ... WARNING
  Undocumented code objects:
  ‘logo_blue_gradient’ ‘logo_boe_website’ ‘logo_grey_dark’
  ‘logo_grey_light’ ‘logo_onenote’ ‘logo_poor_mans_flatly’
  ‘logo_purple_gradient’ ‘theme_blue_gradient’ ‘theme_boe_website’
  ‘theme_grey_dark’ ‘theme_grey_light’ ‘theme_onenote’
  ‘theme_poor_mans_flatly’ ‘theme_purple_gradient’
• checking for unstated dependencies in examples ... WARNING
  Warning: parse error in file 'dashboardthemes-Ex.R':
  5: unexpected symbol
  53: )
  54: ...
• checking examples ... ERROR
  Running examples in ‘dashboardthemes-Ex.R’ failed

Later, I used goodpractice to check your package and found quite a lot of notes. They were mostly about the lack of unit tests, using <- instead of = for assignments, and avoiding long lines of code. There were too many of those cases to list here but it might be worth addressing them. This will make your code more readable and will follow good practices.

CRAN Availability

Hello,

Are you planning to make this package available via CRAN? I have an internal CRAN mirror configured so I can only consume packages from CRAN, not ancillary github repos.

Thank you,
John

shinyDashboardThemes errors on DIY custom theme

shinyDashboardThemes errors when provided a custom theme made by shinyDashboardThemeDIY. The reason is that the custom theme is a shiny.tag object and not character. The function also throws a bunch of warnings (the condition has length > 1 and only the first element will be used) because theme length is > 1. Here is a proposed fix:

• error when theme is character but not part of supported themes
• return the css definition when not character

shinyDashboardThemes <- function (theme) {
  if (is.character(theme)) {
    if (length(theme) > 1L)
      stop("theme must be of length 1")
    if (theme == "blue_gradient") {
        return(dashboardthemes::theme_blue_gradient)
    }
    else if (theme == "flat_red") {
        return(dashboardthemes::theme_flat_red)
    }
    else if (theme == "grey_light") {
        return(dashboardthemes::theme_grey_light)
    }
    else if (theme == "grey_dark") {
        return(dashboardthemes::theme_grey_dark)
    }
    else if (theme == "onenote") {
        return(dashboardthemes::theme_onenote)
    }
    else if (theme == "poor_mans_flatly") {
        return(dashboardthemes::theme_poor_mans_flatly)
    }
    else if (theme == "purple_gradient") {
        return(dashboardthemes::theme_purple_gradient)
    }
    else if (theme == "boe_website") {
        stop("The boe_website theme has been discontinued after v1.1.0, please use flat_red instead.")
    }
    else {
        stop("The chosen theme isn't supported.")
    }
  } else {
    theme
  }
}

I can imagine stricter checking (i.e. shinyDashboardThemeDIY could set the object class to c("custom.theme", "shiny.tag") and then test if inherits(theme, "custom.theme")).

Change back to default theme with selectInput

Hi!
I love this package. I implemented a selectInput box with which I can choose the theme. Is there a possibility to switch back to the default shiny theme after switching to a theme with shinyDashboardThemes(theme = input$theme).
Switching to other themes works nicely.