css - 如何根据 rshiny 中的用户输入切换外部 css 文件？

Question

我希望在我的应用程序中构建暗模式。我意识到我们可以使用 bs_theme() 实现这一目标，但我的应用程序在外部 css 文件中有更多设置，当我使用 bs_theme() 时无法读取这些设置。

我想要 2 个单独的 CSS 文件，一个用于浅色主题，一个用于深色主题。根据用户输入，相关的主题文件应该加载到我的 Rshiny 应用程序中。关于如何做到这一点有什么建议吗？

Answer 1

我会创建两个不同的 css classes在这种情况下。

Here您将了解如何将 css 文件(任意多)包含到 Shiny 的应用程序中。

要在类之间切换，我们可以使用 library(shinyjs) 中的 addCssClass/removeCssClass(或 toggleCssClass) >:

library(shiny)
library(shinyjs)

if(!dir.exists("www")){
  dir.create("www")
}

writeLines(".dark {
  background-color: black;
  color: white; /* text color */
}", con = "www/dark_mode.css")

writeLines(".light {
  background-color: white;
  color: black; /* text color */
}", con = "www/light_mode.css")

ui <- fluidPage(
  useShinyjs(),
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "dark_mode.css"),
    tags$link(rel = "stylesheet", type = "text/css", href = "light_mode.css")
  ),
  radioButtons("mode", "Select mode", choices = c("dark", "light"), selected  = "light")
)

server <- function(input, output, session) {
  observeEvent(input$mode, {
    if(input$mode == "dark"){
      addCssClass(class = "dark", selector = "body")
      removeCssClass(class = "light", selector = "body")
    } else {
      addCssClass(class = "light", selector = "body")
      removeCssClass(class = "dark", selector = "body")
    }
  })
}

shinyApp(ui, server)

同样可以通过 Shiny.addCustomMessageHandler 完成和一些自定义 JS 使用例如element.classList.add("myclass");(参见 this)。

---

编辑:将addCssClass应用于不同类的输入:

library(shiny)
library(shinyjs)

if(!dir.exists("www")){
  dir.create("www")
}

writeLines(".dark {
  background-color: black !important;
  color: white; /* text color */
}", con = "www/dark_mode.css")

writeLines(".light {
  background-color: white !important;
  color: black; /* text color */
}", con = "www/light_mode.css")

ui <- fluidPage(
  useShinyjs(),
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "dark_mode.css"),
    tags$link(rel = "stylesheet", type = "text/css", href = "light_mode.css")
  ),
  radioButtons("mode", "Select mode", choices = c("dark", "light"), selected  = "light"),
  selectizeInput("Test", "Test Input", choices = 1:10),
  actionButton("testButton", "Test Button")
)

server <- function(input, output, session) {
  observeEvent(input$mode, {
    applyTo <- list(".selectize-input", ".btn-default")
    if(input$mode == "dark"){
      lapply(applyTo, function(x){
        addCssClass(class = "dark", selector = x)
        removeCssClass(class = "light", selector = x)
      })
    } else {
      lapply(applyTo, function(x){
        addCssClass(class = "light", selector = x)
        removeCssClass(class = "dark", selector = x)
      })
    }
  })
}

shinyApp(ui, server)

---

编辑:使用forEach:

library(shiny)
library(shinyjs)

if(!dir.exists("www")){
  dir.create("www")
}

writeLines(".dark {
  background-color: black !important;
  color: white; /* text color */
}", con = "www/dark_mode.css")

writeLines(".light {
  background-color: white !important;
  color: black; /* text color */
}", con = "www/light_mode.css")

ui <- fluidPage(
  useShinyjs(),
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "dark_mode.css"),
    tags$link(rel = "stylesheet", type = "text/css", href = "light_mode.css")
  ),
  radioButtons("mode", "Select mode", choices = c("dark", "light"), selected  = "light"),
  selectizeInput("Test", "Test Input", choices = 1:10),
  actionButton("testButton", "Test Button")
)

server <- function(input, output, session) {
  
  dm_classes <- paste(c(".selectize-input", ".btn-default"), collapse = ", ")
  
  observeEvent(input$mode, {
    if(input$mode == "dark"){
      runjs(sprintf("document.querySelectorAll('%s').forEach(x=>x.classList.add('dark'));
                     document.querySelectorAll('%s').forEach(x=>x.classList.remove('light'));", dm_classes, dm_classes))
    } else {
      runjs(sprintf("document.querySelectorAll('%s').forEach(x=>x.classList.add('light'));
                     document.querySelectorAll('%s').forEach(x=>x.classList.remove('dark'));", dm_classes, dm_classes))
    }
  })
}

shinyApp(ui, server)