-1

We have developed a new Shiny app for research purposes. For its general look and feel the yeti theme from shinythemes was applied. In order to improve the readability I wanted to change the font color everywhere from dark gray to black. To achieve this, I have simply added tags$style to the UI definition. Surprisingly, this fix was successful in some but not all browsers. Results are as follows:

Firefox 112.0.1 (Windows): correct
Firefox 112.0.1 (macOS): correct
Chrome 112.0 (Windows): incorrect
Chrome 112.0 (macOS): correct
Edge 112.0 (Windows): incorrect
Safari 16.4.1 (macOS): correct

I have inspected the CSS in Chrome and Edge on Windows. The gray color values from yeti.min.css as well as scaffolding.less get overwritten by black. So why do those browsers eventually ignore it? And how could I adjust the R Shiny code to work in any browser?

Addition: It turned out, that Chrome and Edge do apply other color values to the font, e.g. blue. They just ignore black, which is weird, as this should be the most typical color for text.

This is a minimal Shiny app to demontrate the issue:

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)

Browser comparison

Eric Berkmann
  • 19
  • 7
  • 1
    They both look black to me. One may appear lighter than the other due to differences in how browsers render fonts and anti-aliasing. It's still black, but it appears lighter than the other because the stroke is slightly thinner – Sean Apr 18 '23 at 13:43
  • Thanks, this might explain the differences. It is surprising to me, however, that the same browser on different OS (Chrome) or two browsers (Chrome+Firefox) on the same OS would render black font so differently. I'll wait a few more days and mark the question as resolved, if nobody can provide a solution addressing the CSS. – Eric Berkmann Apr 20 '23 at 08:36

1 Answers1

0

The slight difference in black font color is probably not related to CSS but the way browsers are rendering text for display. I have checked a couple of other websites using black font color. Running text always appeared slightly darker in Firefox than Chrome (both on Windows). For headlines the difference was marginal but still noticeable in magnified screenshots. So we can treat this question as answered.

Eric Berkmann
  • 19
  • 7