How to modify the themes of shinythemes?

Question

How to modify the themes of shinythemes? For example, let us assume I want to change darkly's background black.

library(shiny)
library(shinythemes)

ui <- fluidPage(
  theme = shinytheme("darkly"),
  "How to change this black?")

server <- function(input, output) {}

shinyApp(ui, server)

I guess one solution would be to copy the CSS of darkly with the modified black to the www-folder of my app and then use theme = "darkly_modified_black.css". Is there a simpler solution I am missing?

Answer 1

You can include your own css-arguments, if you just want to change the background-color. But yes, you can also copy the css of darkly, modify it, include it in the www folder and load it from there.

library(shiny)
library(shinythemes)

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

ui <- fluidPage(
  tags$head(tags$style(css)),
  theme = shinytheme("darkly"),
  "How to change this black?")

server <- function(input, output) {}

shinyApp(ui, server)

If you want a separate .css-file you can use includeCSS with the path to the file.

Answer 2

I know that it is a quite old question, but I have just found another way to do it. The fresh package can be helpful too. In fact, someone posted about how to change the tone of shinythemes using NavbarPage and I have just answered.

This is my solution:

library(shiny)
library(shinythemes)
library(fresh)

ui <- fluidPage(

  use_theme(create_theme(
    theme = "default",
    bs_vars_global(
      body_bg = "#000",
      text_color = "#FFF"
    ))),
  theme = shinytheme("darkly"),
  
  "How to change this black?")

server <- function(input, output) {}

shinyApp(ui, server)

You can create themes to use with:

• Shiny itself, with shiny::fluidPage or shiny::navbarPage or themes from Bootswatch (https://dreamrs.github.io/fresh/articles/vars-shiny.html)
• Shinydashboard (https://dreamrs.github.io/fresh/articles/vars-shinydashboard.html)
• bs4Dash (https://dreamrs.github.io/fresh/articles/vars-bs4dash.html)

Here you have more info about the package.