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?

It seems that the slider input widgets that you mention specifically are styled with a different stylesheet: most default shiny widgets seem to get their theme from `bootstrap.min.css`, but not the sliders. If you want to change them, their css classes are `.irs-bar` and `.irs-bar-edge` (assuming you know how to manipulate css properties) — Mikko Marttila, Jul 21 '15 at 16:28
Unfortunately I'm not familiar with manipulating CSS classes, would you mind expanding? — Jordan Mackie, Jul 22 '15 at 11:12
A good place to start would be [this Shiny article](http://shiny.rstudio.com/articles/css.html) explaining how to include CSS styling in your Shiny app. For basic CSS syntax, I found [this tutorial at W3Schools](http://www.w3schools.com/css/default.asp) quite helpful when starting off. If you familiarize yourself a bit with these sources, my comment and the answer below should make a bit more sense. — Mikko Marttila, Jul 22 '15 at 11:24
Mikko, sorry for the delayed response, but having had a play with this (+ getting my head around CSS) I can't actually seem to find the `.iris-bar` property that I'm looking for. I've tried color, background-color, border-bottom-color, none of which seem to work. Could you advise? — Jordan Mackie, Aug 05 '15 at 12:10
Strange, as far as I can tell, `background-color` should have done the trick. I posted a short working example for the slider as an answer, see if that helps. — Mikko Marttila, Aug 05 '15 at 12:43

Mikko Marttila · Answer 1 · 2015-08-05T13:44:44.157

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))

That worked exactly, thanks very much. All that I would change now is the background of the hovering number above the slider, which also assumes the `bootstrap.min.css` blue. I've had a scan through the [w3schools](http://www.w3schools.com/cssref/) reference but can't see which property I should be changing? — Jordan Mackie, Aug 05 '15 at 13:04
I believe the hovering number element has the class `.irs-single`, so using `.irs-single {background: tomato}` should work. — Mikko Marttila, Aug 05 '15 at 13:11

score 3 · Answer 2 · answered Jul 21 '15 at 12:45

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;

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;

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.

How to change shiny widget colour

2 Answers2

Linked