Empêche les fichiers CSS brillants dynamiques de s'écraser les uns les autres

Question

J'ai créé une application Shiny qui permet la sélection dynamique de Bootswatch themes. La sélection dynamique se produit dans le fichier server.R en utilisant tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "...")) avec chaque fichier .css enregistré dans le répertoire www de mon application en tant que "themename.min.css". Voici un exemple minimal:

library(shiny) 

shinyApp(
    ui <- fluidPage(

    # style ui output (changed on server side) 
    uiOutput("style"), 

    # navigation toolbar 
    navbarPage(id = "navbar", 
       title = "Themes", 
       position = "fixed-top", 
       collapsible = T, 
       navbarMenu(title = "Theme Selector", 
          tabPanel("Cosmo", value = "cosmo"), 
          tabPanel("Journal", value = "journal"), 
          tabPanel("Slate", value = "slate"), 
          tabPanel("United", value = "united")) 
    ) # END NAVBAR PAGE 
), # END UI 

    server <- function(input, output, session){ 

    # dynamically update bootswatch theme 
    output$style <- renderUI({ 

     # themes 
     themes <- c("cosmo", "journal", "slate", "united") 

     # loop through layouts and apply css file accordingly 
     for(i in 1:length(themes)){ 
     if(input$navbar == themes[i]){ 
      return(tags$head(tags$link(rel = "stylesheet", type = "text/css", href = paste0(themes[i], ".min.css")))) 
     } 
     } # END LOOP 
    }) # END RENDER UI 

    } # END SERVER 
) # END SHINY APP 

Ainsi, dans cet exemple, j'ai les 4 thèmes enregistrés dans mon répertoire www comme « cosmo.min.css », « journal.min.css, etc. » La sélection dynamique les thèmes fonctionnent dans un sens - les thèmes changent lorsque l'utilisateur les sélectionne dans le menu déroulant de la barre de navigation. MAIS il semble que certains éléments CSS écrasent les autres lorsque l'utilisateur change de sélection de thème. Par exemple, le thème Slate a une barre de navigation grise/argentée. Après avoir sélectionné ce thème, toutes les sélections de thème suivantes affichent la même barre de navigation en argent. Chaque thème fonctionne individuellement, mais les sélectionner de façon dynamique provoque des problèmes.

Il semble que using tags$head overwrites certain elements from each CSS file? Mais je n'arrive pas à utiliser includeCSS dans le fichier server.R pour rendre la sélection dynamique, mais je ne sais pas non plus comment rendre la sélection de thème dynamique dans le fichier ui.R. Je connais le package shinythemes, qui possède un sélecteur de thème dynamique, mais le package indique explicitement que cette fonction doit uniquement être utilisée en développement, alors que je veux déployer mon application de sélection de thème. J'ai vérifié le source code pour cette fonction, mais je ne sais pas Javascript pour pouvoir l'adapter à mes besoins spécifiques.

Answer 1

J'ai été en mesure d'accomplir cela en utilisant includeCSS au lieu de balises HTML pour faire référence à la feuille de style.

for(i in 1:length(themes)){ 
    if(!is.null(input$themes)){ 
    if(input$themes == themes[i]){ 
     return(includeCSS(paste0("www/", themes[i], ".css"))) 
    } 
    } 
} # END LOOP