ShinyDashboard切换默认与暗黑模式后取消勾选无法恢复默认求助

问题根因 #

• 原服务端逻辑仅在勾选暗黑模式时输出主题样式，取消勾选时无任何样式返回，已经注入到页面的暗黑主题CSS不会自动被清除，因此主题不会恢复
• dashboardthemes包未内置shinydashboard原生默认主题的预设，需要自行通过shinyDashboardThemeDIY()函数配置默认主题的样式参数

修复后的完整可运行代码 #

library(shiny)
library(shinydashboard)
library(dashboardthemes)

# Functions
uiDarkModeCheckBox <- function()
{
  ns <- NS("moduleChangeTheme")
  checkbox <- tagList(
    checkboxInput(
      inputId = ns("dbxChangeTheme"),
      label = "Dark Mode",
      value = FALSE
    )
  )
  
  return(checkbox)
}

uiChangeThemeOutput <- function()
{
  ns <- NS("moduleChangeTheme")
  themeOutput <- tagList(
    uiOutput(ns("uiChangeTheme"))
  )
  
  return(themeOutput)
}

serverChangeTheme <- function(input, output, session)
{
  observeEvent(
    input$dbxChangeTheme, 
    {
      output$uiChangeTheme <- renderUI({
        if (input$dbxChangeTheme == TRUE) {
          # 暗黑模式
          shinyDashboardThemes(theme = "grey_dark")
        } else {
          # 原生默认白蓝主题DIY配置
          shinyDashboardThemeDIY(
            
            ### general
            appFontFamily = "Helvetica Neue,Helvetica,Arial,sans-serif",
            appFontColor = "#333333",
            primaryFontColor = "#ffffff",
            infoFontColor = "#ffffff",
            successFontColor = "#ffffff",
            warningFontColor = "#ffffff",
            dangerFontColor = "#ffffff",
            bodyBackColor = "#ffffff",
            
            ### header
            logoBackColor = "#367fa9",
            headerButtonBackColor = "#3c8dbc",
            headerButtonIconColor = "#ffffff",
            headerButtonBackColorHover = "#367fa9",
            headerButtonIconColorHover = "#ffffff",
            headerBackColor = "#3c8dbc",
            headerBoxShadowColor = "#aaaaaa",
            headerBoxShadowSize = "0px 1px 1px",
            
            ### sidebar
            sidebarBackColor = "#f4f4f4",
            sidebarPadding = 0,
            sidebarMenuBackColor = "transparent",
            sidebarMenuPadding = 0,
            sidebarMenuBorderRadius = 0,
            sidebarShadowSize = "0px 0px 0px",
            sidebarShadowColor = "transparent",
            sidebarUserTextColor = "#333333",
            sidebarSearchBackColor = "#ffffff",
            sidebarSearchIconColor = "#999999",
            sidebarSearchBorderColor = "#d2d6de",
            sidebarTabTextColor = "#444444",
            sidebarTabTextSize = 12,
            sidebarTabBorderColor = "transparent",
            sidebarTabBackColor = "#f4f4f4",
            sidebarTabIconColor = "#555555",
            sidebarTabTextColorHover = "#000000",
            sidebarTabBorderColorHover = "transparent",
            sidebarTabBackColorHover = "#e1e3e9",
            sidebarTabIconColorHover = "#555555",
            sidebarTabTextColorActive = "#ffffff",
            sidebarTabBorderColorActive = "transparent",
            sidebarTabBackColorActive = "#3c8dbc",
            sidebarTabIconColorActive = "#ffffff",
            
            ### body
            contentHeaderBackColor = "#ffffff",
            contentHeaderPadding = "10px 15px 10px 15px",
            contentHeaderRadius = "0px",
            contentBackColor = "#ecf0f5",
            contentPadding = "15px",
            contentBoxBorderRadius = "0px",
            contentBoxShadowSize = "0px 1px 1px",
            contentBoxShadowColor = "rgba(0,0,0,0.1)",
            
            ### inputs
            buttonBackColor = "#3c8dbc",
            buttonBorderColor = "#367fa9",
            buttonBorderRadius = "3px",
            buttonTextColor = "#ffffff",
            buttonBackColorHover = "#367fa9",
            buttonBorderColorHover = "#2f6f99",
            buttonTextColorHover = "#ffffff",
            textboxBackColor = "#ffffff",
            textboxBorderColor = "#d2d6de",
            textboxBorderRadius = "0px",
            textboxTextColor = "#555555",
            textboxBackColorSelect = "#ffffff",
            textboxBorderColorSelect = "#3c8dbc",
            textboxTextColorSelect = "#555555",
            
            ### tables
            tableBackColor = "#ffffff",
            tableBorderColor = "#f4f4f4",
            tableBorderTopSize = "1px",
            tableRowHoverColor = "#f5f5f5"
          )
        }
      })
    }
  )
}

# UI
ui <- dashboardPage(dashboardHeader(),
                    dashboardSidebar(),
                    dashboardBody(
                      uiChangeThemeOutput(),
                      tabItem(tabName = "inputs_tab",
                              uiDarkModeCheckBox(),
                      )
                    )
                    
)

# SERVER
server <- function(input, output, session) {
  
  callModule(module = serverChangeTheme, id = "moduleChangeTheme")
}

shinyApp(ui, server)

核心修改点 #

• 补全了主题切换的分支逻辑，取消勾选时返回DIY的原生默认主题样式，新注入的CSS会自动覆盖之前的暗黑主题样式
• 删除了服务端逻辑中冗余的uiChangeThemeOutput()调用，避免重复生成UI节点
• 默认主题的参数完全对齐shinydashboard原生的白蓝配色，切换后和初始加载的默认样式完全一致

内容的提问来源于stack exchange，提问作者Mark Perez