How to Simply Add a CSS File to Change The Background Color for My Shiny App

How can I simply add a css file to change the background color for my shiny app

Taken from Shiny article:

Once your Shiny app directory is set, you have two choices to link to your CSS file (your app won’t use the CSS until you do). You can:

set the theme argument of fluidPage to your document’s name

or
include the file with the tags object.

But the simplest way really seems to use the function includeCSS():

includeCSS(path, ...)

Or just add an inline style in the example:

plotOutput(outputId = "main_plot", height = "300px" style="background-color:pink;"),

Shiny App CSS Styling File not being applied on shiny server instance

Turns out in my case that I had to create the 'www' directory/folder where my app.R was, and drop the .css file in there. Now it works

How to change background color and text color of a titlePanel in R Shiny?

titlePanel("This is my title")
tags$style(HTML("
    body {
            background-color: Black;
            color: white;
            }"))

You can use titlePanel to set your title in shiny instead of wrapping in HTML, and then for the CSS, it needs to be completely wrapped by HTML() and Quotes for it to work.

Shiny app with theme can't change button background color

Perhaps you want to try actionBttn.

ui = fluidPage(
  theme = shinytheme("cerulean"), 
  navbarPage("App Name", selected = "Tab1", 
             id = "navbar",
             position = "fixed-top", 
             tabPanel("Tab1", id = "tab1Id",
                      #padding between navbar and page when using fixed-top
                      tags$style(type="text/css", "body {padding-top: 70px;}"), 
                      fluidPage(
                        actionBttn('insertBtn1', 
                                   'Add variable',
                                   style = "simple",
                                   color = "primary",
                                   icon=icon("floppy-o"),
                                   size = "sm",
                                   block = FALSE,
                                   no_outline = TRUE  
                        ),
                        actionButton("saveBtn2", "Update Schedule", 
                                     icon("floppy-o"), 
                                     #style="color: #0000ff;border-color: #2e6da4; background-color: #0000ff"
                                     style = "background-color: #e7e7e7; color: black"
                        )
                      )
             )
  )
)
server = function(input, output, session) {}
runApp(shinyApp(ui, server))

output

Apply background color for all page, including navigation bar in Shiny

Use this CSS:

library(shinyWidgets)
library(shiny)

css <- "
.navbar-default {
  background-color: inherit;
  border: none;
}
"

ui <- fluidPage(
  tags$head(tags$style(css)),
  setBackgroundColor(
    color = c("#F7FBFF", "#2171B5"),
    gradient = "linear",
    direction = c("bottom","left")
  ),
  ......

If you don't want to use shinyWidgets::setBackgroundColor, use this css:

css <- "
body {
  min-height: 100%; 
  width:100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  position: absolute; 
  background: -moz-linear-gradient(to bottom left, #F7FBFF, #2171B5) fixed;
  background: -webkit-linear-gradient(to bottom left, #F7FBFF, #2171B5) fixed;
  background: -ms-linear-gradient(to bottom left, #F7FBFF, #2171B5) fixed;
  background: -o-linear-gradient(to bottom left, #F7FBFF, #2171B5) fixed;
  background: linear-gradient(to bottom left, #F7FBFF, #2171B5) fixed;
}
.navbar-default {
  background-color: inherit;
  border: none;
}
"