如何更改閃亮的控件顏色

Question

使用shiny widget gallery作爲參考，我想知道是否可以更改控件的顏色方案？具體來說，儘管有些人似乎繼承了css主題元素，但某些（如sliderInput小部件）仍保留默認的藍色。

作爲一個相關的方面，高亮閃亮的應用程序中的文本也採用了藍色的高亮顏色。我相信有一種直接的方法可以沿着同樣的路線改變這一點嗎？

Answer 1

我從來沒有用過這個，但它似乎是建立在Bootstrap的基礎上，所以每個項目都有相同的元素。

.well是灰色的背景，它有background-color: #f5f5f5; border: 1px solid #e3e3e3;

h3默認背景和邊框是頁，「動作按鈕,單個複選框」的標題，等等。

.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）瀏覽器，就可以對點擊一個網頁並選擇「Inspect Element」。這將打開一個查看器，顯示HTML源代碼和附加的樣式等。它對於理解HTML元素的結構非常方便。

---

按照對方的回答，你也該線，以改變選擇高亮顏色添加到您的ui標籤：

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

如果你發現自己在一個情況下，你正在修改許多不同的CSS樣式和塞滿您的ui.R與style標籤，你也可以通過使用includeCSS功能編寫CSS在一個單獨的.css文件，並將其包含在你的閃亮的應用程序 - 這會讓你的代碼會更加清晰，並且你獲得的能夠增加的好處從文本編輯器獲取CSS語法突出顯示。

下面是使用外部CSS文件來創建一個「番茄主題」，本質上改變滑塊和選擇的主題顏色tomato的例子：

創建一個在您的應用程序文件夾，名爲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))