User selects new css stylesheet dynamically

[Matthew Leonawicz]

Hello,

I want to put a link to each of two css stylesheets in the corner of an app. One stylesheet is loaded by default when the app launches. But afterward the user can click the links and alternate between two css themes. I have not been able to find documentation anywhere that Shiny supports this specifically, so I am unsure if it's possible at this time.

The links work, and the css does update. However, it "breaks" in terms of displaying Shiny widgets, as shown below. For apps with more content spread across multiple tabs it also clearly appears to flash for a moment between styles sheets, where no styling is applied and the app displays as single-page unformatted html. For this simple example you may or may not see that depending on how quickly it responds. But in any case, after a moment of apparently no stylesheet in effect, the newly selected one takes over but the UI nevertheless is not properly rebuilt. Any ideas?

Thanks,

Matt

## server.R ##

shinyServer(function(input, output, session) output$x1out <- renderUI({ h1(paste(input$x1, collapse=" ")) }) )

## ui.R ##

shinyUI(

navbarPage(

tags$head(tags$link(rel="stylesheet", type="text/css", href="http://bootswatch.com/2/cosmo/bootstrap.css")),

tags$head(HTML(

'<script>

$(document).ready(function() { 

$("#mystyles li a").click(function() { 

$("link").attr("href",$(this).attr("rel"));

return false;

});

});

</script>

<ul id="mystyles">

<li><a href="#" rel="http://bootswatch.com/2/cosmo/bootstrap.css">Light Theme</a></li>

<li><a href="#" rel="http://bootswatch.com/2/cyborg/bootstrap.css">Dark Theme</a></li>

</ul>'

)),

title="My app",

tabPanel("Tab 1",

h4("Click a link in the topleft to switch between themes"),

fluidRow(

column(4, selectInput("x1", "Choose:", c("A", "B", "C"), multiple=T)),

column(8, uiOutput("x1out"))

), br(), br(), br(), br(), br(), br(),

value="tab1"),

collapsable=TRUE,

inverse=FALSE,

id="nbp"

)

)

[mts...@gmail.com]

any luck? I wanted to do this too:

Default css file, but user can change it to a different theme.

I found this, but didn't help me

http://stackoverflow.com/questions/20473821/how-to-add-javascript-to-change-css-file-in-r-shiny-application

Thanks

Mike

[mts...@gmail.com]

Hey - I did finally get something. I user a uiOutput on the client side and renderUI on the server side.

On my app I have an "organization" dependent css file. Depending on input$Org it pulls up different css file. I was able to change the colors of the boxes and sidebar this way.

server.R

  output$selectCSS<-renderUI({

    

    

    if (input$Org!='My Orgnazation'){

    return(

      tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "style.css"))

      )

    }

    else{

      return(

        tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "style_them.css")) 

      )

    }

      

    })

ui.R

sidebar <- dashboardSidebar(

  

  

  uiOutput('selectCSS'),

  ...

)

On Thursday, September 25, 2014 at 1:58:33 PM UTC-4, Matthew Leonawicz wrote: