一些浏览器会忽略 Shiny 应用程序的 CSS 中的颜色值

Question

我们开发了一个新的 Shiny 应用程序用于研究目的。对于它的一般外观和感觉，应用了来自 shinythemes 的雪人主题。为了提高可读性，我想将所有地方的字体颜色从深灰色更改为黑色。为实现这一点，我只是将 tags$style 添加到 UI 定义中。令人惊讶的是，此修复在某些但并非所有浏览器中都成功了。结果如下：

Firefox 112.0.1 (Windows)：正确
Firefox 112.0.1 (macOS)：正确
Chrome 112.0 (Windows)：不正确
Chrome 112.0 (macOS)：正确
Edge 112.0 (Windows)：不正确
Safari 16.4.1 (macOS)：正确

我检查了 Windows 上 Chrome 和 Edge 中的 CSS。来自 yeti.min.css 和 scaffolding.less 的灰色值被黑色覆盖。那么为什么那些浏览器最终会忽略它呢？我如何调整 R Shiny 代码以在任何浏览器中工作？

补充：事实证明，Chrome 和 Edge 确实将其他颜色值应用于字体，例如蓝色的。他们只是忽略了黑色，这很奇怪，因为这应该是最典型的文本颜色。

这是一个最小的闪亮应用程序来演示这个问题：

library(shiny)
library(shinythemes)

# Define UI for application that draws a histogram
ui <- fluidPage(theme = shinytheme("yeti"),
                
    tags$style(HTML("
      h2 {
        color: black;
        }
    ")),

    # Application title
    titlePanel("Old Faithful Geyser Data (this title should appear in black)"),

    # Sidebar with a slider input for number of bins 
    sidebarLayout(
        sidebarPanel(
            sliderInput("bins",
                        "Number of bins:",
                        min = 1,
                        max = 50,
                        value = 30)
        ),

        # Show a plot of the generated distribution
        mainPanel(
           plotOutput("distPlot")
        )
    )
)

# Define server logic required to draw a histogram
server <- function(input, output) {

    output$distPlot <- renderPlot({
        # generate bins based on input$bins from ui.R
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

        # draw the histogram with the specified number of bins
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
    })
}

# Run the application 
shinyApp(ui = ui, server = server)

Answer 1

黑色字体颜色的细微差别可能与 CSS 无关，而是浏览器渲染文本以供显示的方式。我检查了其他几个使用黑色字体颜色的网站。在 Firefox 中运行的文本总是比 Chrome 稍暗（在 Windows 上）。对于标题，差异很小，但在放大的屏幕截图中仍然很明显。所以我们可以把这个问题当作已经回答了。