Question

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

除此之外，在闪亮的应用程序中突出显示文本也采用蓝色突出显示颜色。我确信有一种直接的方法可以沿着相同的路线改变它吗？

Answer 1

这是修改闪亮滑块颜色的具体情况的最小示例：

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），您可以右键单击网页并选择＆＃34;检查元素＆＃34;。这将打开一个向您显示HTML源代码和附加样式等的查看器。这对于理解HTML元素的结构非常方便。

根据其他答案，您还可以将此行添加到ui代码中，以便更改选择突出显示颜色：

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

如果您发现自己处于修改大量不同CSS样式并使ui.R标记为style的问题，您还可以将CSS编写在单独的{{1}中使用.css函数将文件包含在您的Shiny应用程序中 - 这将使您的代码更加清晰，并且您可以获得从文本编辑器中获取CSS语法高亮的额外好处。

以下是使用外部CSS文件创建＆＃34;番茄主题＆＃34;的示例，实际上将滑块和选择主题颜色更改为includeCSS：

1。在您的应用文件夹中创建一个名为tomato的文件：

tomatoTheme.css

2. 使用::selection { background: tomato } ::-moz-selection { background: tomato } .irs-single {background: tomato} [class|="irs-bar"] { background: tomato; border: tomato }在您的用户名中加入CSS：

includeCSS

Answer 2

我从来没有使用过这个，但它似乎是建立在Bootstrap之上的，所以每个项目都有相同的元素。

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

h3是页面上的标题，＆＃39;操作按钮,单一复选框＆＃39;等。

.btn-default是包含这些基本样式color: #333; background-color: #fff; border-color: #ccc;

的基本按钮

至于更改突出显示选择：

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

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

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

2 个答案: