CODEWITHSUNDEEP
rshinybootstrap-switchshinywidgets
Bastián Olea Herrera
Bastián Olea Herrera

Reputation: 1008

Change shinyWidget's switchInput default colors in Shiny app

How to change color for SwitchInput elements (from ShinyWidgets package)?

Upvotes: 1

Views: 1167

Answers (1)

Bastián Olea Herrera
Bastián Olea Herrera

Reputation: 1008

First, in your switchInput() function, you must specify an "on" and "off" status by changing the onStatus and offStatus arguments:

switchInput(
                       inputId = "switch",
                       label = "Label", 
                       labelWidth = "120px", 
                       onLabel = "ON",
                       offLabel = "OFF",
                       onStatus = "danger",
                       offStatus = "info"
                     ),

Then, in your UI.r file or UI section of your Shiny app, add the following CSS tags:

#switchInput color while on
            tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
                                        background: green;
                                        color: white;
                                        }'))),
            
#switchInput color while off
            tags$head(tags$style(HTML('.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info,
                                       .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info {
                                        background: red;
                                        color: black;
                                        }'))),

Use background to set the background color of the switch, and color to set the text color.

Upvotes: 4

Related Questions