Reputation: 1213
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
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
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