CODEWITHSUNDEEP
cssrshiny
Jordan Mackie
Jordan Mackie

Reputation: 1213

How to change shiny widget colour

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?

Upvotes: 3

Views: 5866

Answers (2)

Mikko Marttila
Mikko Marttila

Reputation: 11933

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

Upvotes: 6

knocked loose
knocked loose

Reputation: 3314

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.

Upvotes: 3

Related Questions