How to change the color of the Shinymanager Login Page?

Question

I am trying to change the color tone of the login page from the shinymanager package. I have seen these posts:

1. Change Text and Colors in Shinymanager Login Page

2. Change the color tone of a shinytheme

3. How to style shimymanager login screen with CSS only?

4. How to modify the themes of shinythemes?

However, since I don't know much about CSS, I am struggling with this.

This is a reproducible example:

library(shiny)
library(shinydashboard)
library(shinyWidgets)
library(shinymanager)

credentials <- data.frame(
  user = c("shiny"),
  password = c("shiny"),
  stringsAsFactors = FALSE
)

css <- HTML(" body {
    background-color: #0dc5c1;
}")

ui <- dashboardPage(
  
  dashboardHeader(title = "Dashboard"),
  ## Sidebar content
  dashboardSidebar(
    sidebarMenu(
      menuItem("App1", tabName = "App1", icon = icon("th"))
      
    )
  ),
  
  dashboardBody(
    fluidRow(
      tabItems(
        
        tabItem(tabName = "App1",
                sidebarPanel(
                  numericInput("num",
                               "Select a number",
                               min = 1,
                               value = 10),
                  
                  sliderInput("slider1",
                              "Number of bins:",
                              min = 1,
                              max = 50,
                              value = 30),
                  checkboxInput("remove", "Remove...", value = FALSE),
                  
                  
                  
                ),
                mainPanel(
                  verbatimTextOutput("value"),
                  plotOutput("plot1"),
                  
                )
                
        )
    )
  )
)
)

ui <- secure_app(ui,
                 # changing theme for the credentials
                 
                 theme = shinythemes::shinytheme("united"),
                 tags_top = tags$div(
                   tags$head(tags$style(css)),
                   tags$img(
                     src = "https://marketplace.egi.eu/101-large_default/the-r-project-for-statistical-computing.jpg", width = 200, height = 200, alt="Logo not found", deleteFile=FALSE
                   ))
)

server <- function(input, output, session) {
  
  res_auth <- secure_server(
    check_credentials = check_credentials(credentials)
  )
  
}

shinyApp(ui, server)

My objective is to change the colour of the login page to the following tone #0dc5c1, in particular the border and the button of the page.

I tried adding:

css <- HTML(" body {
        background-color: #0dc5c1;
    }")

But it doesn't work.

Does anyone know how to solve it?

Thanks very much in advance

Answer 1

Please check the following:

library(shiny)
library(shinydashboard)
library(shinyWidgets)
library(shinymanager)

credentials <- data.frame(
  user = c("shiny"),
  password = c("shiny"),
  stringsAsFactors = FALSE
)

css <- HTML(".btn-primary {
                  color: #ffffff;
                  background-color: #0dc5c1;
                  border-color: #0dc5c1;
              }
              .panel-primary {
                  border-color: #0dc5c1;
              }")

ui <- dashboardPage(
  
  dashboardHeader(title = "Dashboard"),
  ## Sidebar content
  dashboardSidebar(
    sidebarMenu(
      menuItem("App1", tabName = "App1", icon = icon("th"))
      
    )
  ),
  
  dashboardBody(
    fluidRow(
      tabItems(
        
        tabItem(tabName = "App1",
                sidebarPanel(
                  numericInput("num",
                               "Select a number",
                               min = 1,
                               value = 10),
                  
                  sliderInput("slider1",
                              "Number of bins:",
                              min = 1,
                              max = 50,
                              value = 30),
                  checkboxInput("remove", "Remove...", value = FALSE),
                  
                  
                  
                ),
                mainPanel(
                  verbatimTextOutput("value"),
                  plotOutput("plot1"),
                  
                )
                
        )
      )
    )
  )
)

ui <- secure_app(ui,
                 # changing theme for the credentials
                 
                 theme = shinythemes::shinytheme("united"),
                 tags_top = tags$div(
                   tags$head(tags$style(css)),
                   tags$img(
                     src = "https://marketplace.egi.eu/101-large_default/the-r-project-for-statistical-computing.jpg", width = 200, height = 200, alt="Logo not found", deleteFile=FALSE
                   ))
)

server <- function(input, output, session) {
  
  res_auth <- secure_server(
    check_credentials = check_credentials(credentials)
  )
  
}

shinyApp(ui, server)

Answer 2

I modified the CSS.

ui <- secure_app(ui,
                 # changing theme for the credentials
                 
                 theme = shinythemes::shinytheme("united"),
                 tags_top = tags$div(
                   tags$head(
                     tags$style(
                       ".row {
                       background-color: #0dc5c1;"
                     ), 
                     tags$style(
                       ".panel-body {
                       background-color: #0dc5c1;"
                     ),
                     tags$style(
                       ".panel-auth {
                       background-color: #0dc5c1;"
                     )
                   ),
                   tags$img(
                     src = "https://marketplace.egi.eu/101-large_default/the-r-project-for-statistical-computing.jpg", width = 200, height = 200, alt="Logo not found", deleteFile=FALSE
                   ))
)

I am not sure where exactly the background color should be changed. If it's too much, just remove some of the CSS.