如何更改闪亮的小部件颜色 [英] How to change shiny widget colour

问题描述

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

Using the shiny widget gallery as reference, I was wondering whether it's possible to change the colour scheme of widgets? Specifically, while some seem to inherit css theme elements, some - such as the sliderInput widget - retain the default blue.

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

As a related aside, highlighting text within shiny apps also adopts a blue highlight colour. I'm sure there is a straightforward way to change this along the same lines?

推荐答案

以下是修改发光"滑块条颜色的特定情况的最小示例:

Here's a minimal example for the specific case of modifying the colour of a Shiny slider bar:

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元素的结构非常方便.

If you're using a browser that supports it (for example Chrome or Firefox), you can right click on a web page and select "Inspect Element". This will open a viewer that shows you the HTML source code and the attached styles etc. It's really handy for understanding the structure of HTML elements.

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

Following the other answer, you could also add this line to your ui tags in order to change the selection highlight colour:

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

如果您发现自己正在修改许多不同的CSS样式并使用 style 标签使 ui.R 混乱，那么您也可以编写CSS在一个单独的 .css 文件中，并通过使用 includeCSS 函数将其包含在您的Shiny应用程序中-这将使您的代码更加整洁，并获得了更多的好处能够从文本编辑器中突出显示CSS语法.

If you find yourself in a situation where you're modifying lots of different CSS styles and cluttering your ui.R with style tags, you can also write your CSS in a separate .css file and include it in your Shiny app by using the includeCSS function - this will make your code a lot cleaner, and you gain the added benefit of being able to get CSS syntax highlighting from a text editor.

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

Here's an example of using an external CSS file to create a "tomato theme", essentially changing the slider and selection theme colour to tomato:

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

1. Create a file called tomatoTheme.css in your app folder:

::selection {
    background: tomato
}

::-moz-selection {
    background: tomato
}

.irs-single {background: tomato}

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

2..通过使用 includeCSS :

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

这篇关于如何更改闪亮的小部件颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！