如何更改闪亮的小部件颜色

Question

使用闪亮的小部件库作为参考，我想知道是否可以更改小部件的配色方案？具体来说，尽管有些似乎继承了CSS主题元素，但有些-例如sliderInput小部件-保留了默认的蓝色。

另外，在闪亮的应用程序中突出显示文本也采用蓝色突出显示颜色。我敢肯定有一种简单的方法可以按照相同的方式进行更改吗？

Answer 1

这是修改Shiny滑杆颜色的特定情况的最小示例：

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

如果您使用支持它的浏览器（例如Chrome或Firefox），则可以右键单击网页并选择“检查元素”。这将打开一个查看器，向您显示HTML源代码和附加的样式等。它对于理解HTML元素的结构非常方便。

在其他答案之后，您也可以将此行添加到ui标签中，以更改选择突出显示的颜色：

tags$style(HTML("::selection {background: tomato}")),

如果您发现自己正在修改许多不同的CSS样式并ui.R用style标签弄乱您的情况，则还可以将CSS编写在一个单独的.css文件中，并使用includeCSS函数将其包含在Shiny应用程序中-这将使您的代码成为可能更加干净，您将获得额外的好处，即可以从文本编辑器中突出显示CSS语法。

这是一个使用外部CSS文件创建“番茄主题”的示例，本质上将滑块和选择主题的颜色更改为tomato：

1.tomatoTheme.css在您的应用文件夹中创建一个名为的文件：

tags$style(HTML("::selection {background: tomato}")),

2.使用includeCSS以下命令在您的用户界面中包括CSS ：

::selection {
    background: tomato
}

::-moz-selection {
    background: tomato
}

.irs-single {background: tomato}

[class|="irs-bar"] {
    background: tomato;
    border: tomato
}