CODEWITHSUNDEEP
cssrshiny
tic-toc-choc
tic-toc-choc

Reputation: 960

Change CSS properties based on shiny input

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.

Upvotes: 1

Views: 1274

Answers (1)

Tonio Liebrand
Tonio Liebrand

Reputation: 17719

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 = "\n")


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 = "\n")
        )
      )
    )
  })
}

shinyApp(ui, server)

Upvotes: 5

Related Questions