How to change shiny widget colour

Question

Using the shiny widget gallery as reference, I was wondering whether it's possible to change the colour scheme of widgets? Specifically, while some seem to inherit css theme elements, some - such as the sliderInput widget - retain the default blue.

As a related aside, highlighting text within shiny apps also adopts a blue highlight colour. I'm sure there is a straightforward way to change this along the same lines?

Answer 1

Here's a minimal example for the specific case of modifying the colour of a Shiny slider bar:

library(shiny)

ui <- fluidPage(

  # CSS styles
  tags$style(HTML(".irs-bar {background: yellow}")),
  tags$style(HTML(".irs-bar {border-top: 1px solid green}")),
  tags$style(HTML(".irs-bar-edge {background: red}")),
  tags$style(HTML(".irs-bar-edge {border: 1px solid red}")),

  # Slider
  sliderInput("slider", "Pick a value:", value = 4, min = 1, max = 10)

)

server <- function(input, output) {}

runApp(list(ui = ui, server = server))

If you're using a browser that supports it (for example Chrome or Firefox), you can right click on a web page and select "Inspect Element". This will open a viewer that shows you the HTML source code and the attached styles etc. It's really handy for understanding the structure of HTML elements.

---

Following the other answer, you could also add this line to your ui tags in order to change the selection highlight colour:

tags$style(HTML("::selection {background: tomato}")),

If you find yourself in a situation where you're modifying lots of different CSS styles and cluttering your ui.R with style tags, you can also write your CSS in a separate .css file and include it in your Shiny app by using the includeCSS function - this will make your code a lot cleaner, and you gain the added benefit of being able to get CSS syntax highlighting from a text editor.

Here's an example of using an external CSS file to create a "tomato theme", essentially changing the slider and selection theme colour to tomato :

1. Create a file called tomatoTheme.css in your app folder:

::selection {
    background: tomato
}

::-moz-selection {
    background: tomato
}

.irs-single {background: tomato}

[class|="irs-bar"] {
    background: tomato;
    border: tomato
}

2. Include the CSS in your ui by using includeCSS :

library(shiny)

ui <- fluidPage(

  # CSS styles
  includeCSS("tomatoTheme.css"),

  # Slider
  sliderInput("slider", "Pick a value:", value = 4, min = 1, max = 10)

)

server <- function(input, output) {}

runApp(list(ui = ui, server = server))

Answer 2

I've never worked with this, but it seems to be built off of Bootstrap so each item has the same elements.

.well is the gray background, it has a default background and border of background-color: #f5f5f5; border: 1px solid #e3e3e3; background-color: #f5f5f5; border: 1px solid #e3e3e3;

h3 is the headers on the page, 'Action Button , Single Checkbox', etc..

.btn-default is the basic button with these base styles color: #333; background-color: #fff; border-color: #ccc; color: #333; background-color: #fff; border-color: #ccc;

---

As far as changing a highlight selection:

::selection {
  background: red; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: red; /* Gecko Browsers */
}

You can also change the color of the text while highlighted using the color attribute.