r - Change CSS properties based on shiny input

Question

In my app, CSS properties are in a separate file and included in the ui via includeCSS('./www/styles.css').

Is it possible to dynamically change the font-family property based on the value of an input?

e.g. ui contains:

selectInput(inputId = 'selected_language', label = 'Choose language', choices = c('lao', 'english'), selected = 'english')

When 'lao' is selected, body { font-family: Phetsarath OT; } is used while if 'english' is selected body { font-family: Arial, Helvetica, sans-serif; } is used.

Answer 1

You could include the css part in tags$style and put it within renderUI() on the server side.

The easiest way would be put the rest of the css on the server side as well, but you could also read from the styles.css file, see below.

Reproducible example:

library(shiny)

# Simulating a styles.css file
css_content <- "
h4 {
  font-family: 'Lobster', cursive;
  font-weight: 500;
  line-height: 1.1;
  color: #48ca3b;
}
"

writeLines(text = css_content, con = "styles.css")

css <- readLines(con = "styles.css") %>% 
  paste(collapse = "
")


ui <- fluidPage(
  selectInput(inputId = 'selected_language', label = 'lang', choices = c('lao', 'english'), selected = 'english'),
  uiOutput("css_style"),
  h3("one"),
  h4("two"),
  h5("three")
)

server <- function(input, output, session) {
  
  style <- reactive({
    ifelse(
      test = input$selected_language == "lao",
      yes = "body { font-family: Phetsarath OT; }",
      no = "body { font-family: Arial, Helvetica, sans-serif; }"
    )
  })
  
  output$css_style <- renderUI({
    tags$head(
      tags$style(
        HTML(
          paste0(c(style(), css), collapse = "
")
        )
      )
    )
  })
}

shinyApp(ui, server)