1

How can I change the colors of a materialSwitch element in a Shiny app? I know that tags$style(...) can be used inside ui.R to modify CSS styles, but I don’t know the specific class names of these kind of elements.

Bastián Olea Herrera
  • 454
  • 4
  • 14
  • 2
    The CSS file is available [here](https://github.com/dreamRs/shinyWidgets/blob/master/inst/assets/material-switch/material-switch.css). Does it help? You should also try to inspect the HTML elements when you're looking for a class name (in Chrome: right-click on the element, then "Inspect"). – Stéphane Laurent Jul 17 '20 at 10:20
  • Thanks for the head-up, but no, I wasn’t able to change the color of the material-switch knob. I tried with ```tags$style(type = "text/css", ".material-switch > label::before {background: #1D60A4; !important}”)``` and many variations of ```.material-switch``` and ```label``` but I only got as far as changing text background color, which is not what I intended. – Bastián Olea Herrera Jul 17 '20 at 18:27

1 Answers1

1

I just found out how to change the color of an active MaterialSwitch button. Just add the following to your Shiny app on your ui.R file:

tags$style(type = "text/css", "
  .label-default {background-color: #1574D6;}
  "),

In this example, the switch turns to color blue when active.

Bastián Olea Herrera
  • 454
  • 4
  • 14
  • 1
    To change colors for inactive switches you can use ` tags$style(" .switch label .lever { background-color:rgba(44, 161, 245, .5); } .switch label .lever:after { background-color:rgba(44, 161, 245, .9); } "),` – Mxblsdl Jan 19 '21 at 04:16