如何移除bs4Dash仪表盘头部的多余custom-control开关元素？

问题描述 #

运行bs4Dash官方文档的「Basic Example」代码时，页面头部会出现一个多余的custom-control开关（表现为主题切换按钮），影响页面布局。对应代码如下：

library(shiny)
library(bs4Dash)

shinyApp(
    ui = dashboardPage(
        header = dashboardHeader(
            title = dashboardBrand(
                title = "My dashboard",
                color = "primary",
                href = "https://adminlte.io/themes/v3",
                image = "https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png"
            )
        ),
        sidebar = dashboardSidebar(),
        body = dashboardBody(
            lapply(getAdminLTEColors(), function(color) {
                box(status = color)
            })
        ),
        controlbar = dashboardControlbar(),
        title = "DashboardPage"
    ),
    server = function(input, output) { }
)

问题原因 #

这个多余开关是bs4Dash默认启用的暗色模式切换控件。当你在dashboardPage中声明dashboardControlbar()但未做自定义配置时，bs4Dash会自动将这个主题切换按钮添加到页面头部。

解决方法 #

方法1：关闭暗色模式功能（推荐） #

直接在dashboardControlbar()中设置dark_mode = FALSE，彻底禁用暗色模式切换，开关会自动消失：

library(shiny)
library(bs4Dash)

shinyApp(
    ui = dashboardPage(
        header = dashboardHeader(
            title = dashboardBrand(
                title = "My dashboard",
                color = "primary",
                href = "https://adminlte.io/themes/v3",
                image = "https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png"
            )
        ),
        sidebar = dashboardSidebar(),
        body = dashboardBody(
            lapply(getAdminLTEColors(), function(color) {
                box(status = color)
            })
        ),
        controlbar = dashboardControlbar(dark_mode = FALSE), # 新增配置关闭暗色模式
        title = "DashboardPage"
    ),
    server = function(input, output) { }
)

方法2：通过CSS隐藏开关 #

如果需要保留控制栏功能但只想隐藏该开关，可以在dashboardBody中添加自定义CSS样式：

library(shiny)
library(bs4Dash)

shinyApp(
    ui = dashboardPage(
        header = dashboardHeader(
            title = dashboardBrand(
                title = "My dashboard",
                color = "primary",
                href = "https://adminlte.io/themes/v3",
                image = "https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png"
            )
        ),
        sidebar = dashboardSidebar(),
        body = dashboardBody(
            # 添加CSS隐藏开关元素
            tags$style(HTML(".custom-control.dark-mode-switch { display: none; }")),
            lapply(getAdminLTEColors(), function(color) {
                box(status = color)
            })
        ),
        controlbar = dashboardControlbar(),
        title = "DashboardPage"
    ),
    server = function(input, output) { }
)

内容的提问来源于stack exchange，提问作者Antônio