Change colors outside the pre-defined ones

[fcecinati]

I love shinyWidgets and I use a lot of them in my applications, but I struggle with colors as they do not correspond to my company's colors. While for some I find it easier to over-write .css properties, so to use company colors instead of the pre-defined statuses (e.g. buttons), for others it seems very complicated to change colors outside the pre-defined ones (e.g. awesome check boxes). Is there any reference on how to find the correct handlers to modify properties?

Additionally, it would be great to change the statuses in one place (e.g. warning -> #FF9900) so that every object that uses the warning status can take the assigned value, rather than defining it for each object. Is there a way to do so? Am I missing something? I currently define almost all my css in a separate .css file.

Just to leave a reproducible example, would it be possible to modify the rule I made up in the .css to make it work for the three widgets at once?:

global.R

library(shiny)
library(shinydashboard)
library(shinyWidgets)

ui.R

ui <- dashboardPage(

    dashboardHeader(
        title = "AppName"
    ),

    dashboardSidebar(
        sidebarMenu(
            menuItem("Tab", tabName = "Tab", icon = icon("home"))
        )
    ),

    dashboardBody(
        fluidRow(

            # Style
            tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "my.css")),

            tabItems(
                tabItem(
                    tabName = "Tab",

                    box(12,
                        awesomeCheckboxGroup('awesomecheck',
                                             'Awesome Check Boxes',
                                             choices=c('a','b','c'),
                                             selected='a',
                                             status = "danger"),

                        switchInput('switch',
                                    'Awesome Switch',
                                    onStatus='success',
                                    offStatus='danger'),

                        actionBttn("actionbttn",
                                   'Action Bttn',
                                   style = "jelly", 
                                   color = "danger")
                        )

                    )
                )
            )
        )
    )

server.R

shinyServer(function(input, output, session) {})

my.css

.handler-danger {
  background: #FFBB00 !important;
}

[pvictor]

Hello,

Yes colors are an important issue. Currently there's no method to change them easily, widgets come from differents places, different rule...

I'm working on an other project to make this easier : https://github.com/dreamRs/fresh, this work for global shiny elements, but not all widgets are integrated yet.

When it'll be done you'll be able to specify a danger status color and it will affect all widgets using it. Unfortunately for now, you have to do it manually...

Here the CSS for widgets in your example:

.handler-danger {
  background: #FFBB00 !important;
}

.checkbox-bs-danger input[type="checkbox"]:checked + label::before,
.checkbox-bs-danger input[type="radio"]:checked + label::before {
    background-color: #FFBB00;
    border-color: #FFBB00;
}
.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
    background-color: #FFBB00;
    border-color: #FFBB00;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
  background: #FFBB00;
}

.bttn-jelly.bttn-danger {
  background: #FFBB00;
}

If you want to use variables in CSS, you look at the sass package:

library(sass)
sass(input = list(

  "$danger: #FFBB00;",

  '.handler-danger {
  background: $danger !important;
}

.checkbox-bs-danger input[type="checkbox"]:checked + label::before,
.checkbox-bs-danger input[type="radio"]:checked + label::before {
    background-color: $danger;
    border-color: $danger;
}
.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
    background-color: $danger;
    border-color: $danger;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
  background: $danger;
}

.bttn-jelly.bttn-danger {
  background: $danger;
}'
))

Victor

[HugoGit39]

Hi has this been integrated yet? Cause I use bs4dash and changed the colors there with primary etc...but when I set the actionBttn to primary I get the standard color