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

Question

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

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

Answer 1

我从未使用过这个，但它似乎是基于 Bootstrap 构建的，因此每个项目都有相同的元素。

.well是灰色背景，默认背景和边框为background-color: #f5f5f5; border: 1px solid #e3e3e3;

h3是页面上的标题，'Action Button,Single Checkbox'等。

.btn-default 是具有这些基本样式的基本按钮color: #333; background-color: #fff; border-color: #ccc;

---

至于更改高亮选择：

::selection {
  background: red; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: red; /* Gecko Browsers */
}

您还可以使用color 属性在突出显示时更改文本的颜色。

Answer 2

以下是修改闪亮滑块颜色的具体情况的一个最小示例：

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 函数的闪亮应用程序 - 这将使您的代码更清晰，并且您可以获得能够从文本编辑器获得 CSS 语法突出显示的额外好处。

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

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

::selection {
    background: tomato
}

::-moz-selection {
    background: tomato
}

.irs-single {background: tomato}

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

2. 使用 includeCSS 在您的 UI 中包含 CSS：

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