R Shiny: How to Change The Background Color of The Header

How to change color in shiny dashboard?

Based on the example you posted a link to you can try:

ui.R

dashboardPage(
                dashboardHeader(
                        title = "Example of a long title that needs more space",
                        titleWidth = 450
                ),
                dashboardSidebar( sidebarMenu(
                        menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
                        menuItem("Widgets", icon = icon("th"), tabName = "widgets",
                                 badgeLabel = "new", badgeColor = "green")
                )),
                dashboardBody(
                        # Also add some custom CSS to make the title background area the same
                        # color as the rest of the header.
                        tags$head(tags$style(HTML('
        /* logo */
        .skin-blue .main-header .logo {
                              background-color: #f4b943;
                              }

        /* logo when hovered */
        .skin-blue .main-header .logo:hover {
                              background-color: #f4b943;
                              }

        /* navbar (rest of the header) */
        .skin-blue .main-header .navbar {
                              background-color: #f4b943;
                              }        

        /* main sidebar */
        .skin-blue .main-sidebar {
                              background-color: #f4b943;
                              }

        /* active selected tab in the sidebarmenu */
        .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
                              background-color: #ff0000;
                              }

        /* other links in the sidebarmenu */
        .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                              background-color: #00ff00;
                              color: #000000;
                              }

        /* other links in the sidebarmenu when hovered */
         .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                              background-color: #ff69b4;
                              }
        /* toggle button when hovered  */                    
         .skin-blue .main-header .navbar .sidebar-toggle:hover{
                              background-color: #ff69b4;
                              }
                              ')))
                )

)

I commented the CSS to point out what it modifies.

How to change the background color of the Shiny Dashboard Body

Ok, ideally I would like you to use dashboardthemes package https://github.com/nik01010/dashboardthemes, where you can create your own themes with ease, however you can css the .content-wrapper like so:

#rm(list = ls())
library(shinydashboard)
library(shiny)
library(DT)
library(shinyWidgets)
library(dplyr)
ui=shinyUI(
  dashboardPage(
    dashboardHeader(
      title = "Example of a long title that needs more space",
      titleWidth = 450
    ),
    dashboardSidebar( sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", icon = icon("th"), tabName = "widgets",
               badgeLabel = "new", badgeColor = "green")
    )),
    dashboardBody(
      
      tags$head(tags$style(HTML('
                                /* logo */
                                .skin-blue .main-header .logo {
                                background-color: #f4b943;
                                }
                                
                                /* logo when hovered */
                                .skin-blue .main-header .logo:hover {
                                background-color: #f4b943;
                                }
                                
                                /* navbar (rest of the header) */
                                .skin-blue .main-header .navbar {
                                background-color: #f4b943;
                                }
                                
                                /* main sidebar */
                                .skin-blue .main-sidebar {
                                background-color: #f4b943;
                                }
                                
                                /* active selected tab in the sidebarmenu */
                                .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
                                background-color: #ff0000;
                                }
                                
                                /* other links in the sidebarmenu */
                                .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                                background-color: #00ff00;
                                color: #000000;
                                }
                                
                                /* other links in the sidebarmenu when hovered */
                                .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                                background-color: #ff69b4;
                                }
                                /* toggle button when hovered  */
                                .skin-blue .main-header .navbar .sidebar-toggle:hover{
                                background-color: #ff69b4;
                                }

                                /* body */
                                .content-wrapper, .right-side {
                                background-color: #7da2d1;
                                }
                                
                                ')))
      )
    
    
      )
      )
server=shinyServer(function(input,output,session){})
shinyApp(ui,server)

Sample Image

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.

R Shiny: How do you change the background color of the Header?

Try something like

tags$style(".span12 {background-color: black;}")

instead of

tags$style("body {background-color: black;}")

Change the title header color permanently in shiny dashboard

You can create a custom theme to use with {shinydashboard} with the {fresh} package, more documentation here : https://dreamrs.github.io/fresh/articles/vars-shinydashboard.html

Here an example to modify header background color:

library(fresh)
# Create the theme
mytheme <- create_theme(
  adminlte_color(
    light_blue = "#E7FF6E"
  )
)

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  header = dashboardHeader(title = "My dashboard"),
  sidebar = dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Settings", tabName = "settings", icon = icon("sliders"))
    )
  ),
  body = dashboardBody(

    use_theme(mytheme) # <-- use the theme
  )
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

how to change background and text color of DT Datable header in R Shiny

If the column names text is 'white' and background 'red'

server <- function(input, output) {
  
  data <- tibble(name = c("Justin", "Corey", "Sibley"),
                 grade = c(50, 100, 100))
  
  output$table <- DT::renderDT({
    datatable(data, options = list(
      
      initComplete = JS(
        "function(settings, json) {",
        "$(this.api().table().header()).css({'background-color': 'red', 'color': 'white'});",
        "}")
    ))
  })
  
  
}

-output

Sample Image

How to customise background colors in shinydashoard

   .skin-blue .main-header .logo {
    background-color: black;
    color: white;
    border-bottom: 0 solid transparent;
}
   .skin-blue .main-header .logo:hover {
    background-color: black;
  }

adding this to css file should change the header logo background color to black and text white.

Here is the link for css file see line (1-139) for blue skin-
shinydashboard_blue_skin

I think you have to play around little bit with color (search sidebar in the above css file and you will find where to change)