如何自定义Shinydashboard皮肤颜色？

当然可以实现！Shinydashboard虽然官方只提供了有限的预定义皮肤，但通过自定义CSS样式，你完全可以替换成任意想要的颜色，包括你指定的#2666cc（等同于rgb(38, 102, 204)）。

下面是针对你截图中高亮区域的具体实现步骤：

1. 明确需要定制的区域 #

根据你提供的截图，高亮区域主要包含：

• 顶部导航栏（navbar）
• 侧边栏的标题栏
• 侧边栏中选中的菜单项
• 导航栏交互时的高亮状态（hover/点击）

2. 编写自定义CSS样式 #

你可以直接把以下样式内嵌到Shiny App中，或者保存为单独的CSS文件（放在App的www文件夹下）：

/* 顶部导航栏背景色 */
.main-header .navbar {
  background-color: #2666cc;
}

/* 顶部导航栏交互高亮（hover/点击状态） */
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:active,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav .open > a {
  background-color: #1a4a99; /* 同色系稍深色调，提升交互反馈 */
}

/* 侧边栏标题栏背景色 */
.main-sidebar .sidebar-header {
  background-color: #2666cc;
  color: #ffffff; /* 文字设为白色，保证可读性 */
}

/* 侧边栏选中菜单项样式 */
.main-sidebar .sidebar-menu > li.active > a {
  background-color: #2666cc;
  border-left-color: #ffffff; /* 左侧添加白色标识线，可选 */
}

/* 侧边栏菜单项hover状态 */
.main-sidebar .sidebar-menu > li > a:hover {
  background-color: #1a4a99;
}

3. 在Shiny App中应用样式 #

这里提供两种常用的实现方式：

方式一：内嵌CSS（无需额外文件） #

直接把样式代码写在tags$style()中，快速验证效果：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "自定义皮肤Demo"),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", tabName = "widgets", icon = icon("th"))
    )
  ),
  dashboardBody(
    tags$style(HTML("
      /* 顶部导航栏背景色 */
      .main-header .navbar {
        background-color: #2666cc;
      }

      /* 顶部导航栏交互高亮 */
      .main-header .navbar .nav > li > a:hover,
      .main-header .navbar .nav > li > a:active,
      .main-header .navbar .nav > li > a:focus,
      .main-header .navbar .nav .open > a {
        background-color: #1a4a99;
      }

      /* 侧边栏标题栏背景色 */
      .main-sidebar .sidebar-header {
        background-color: #2666cc;
        color: #ffffff;
      }

      /* 侧边栏选中菜单项样式 */
      .main-sidebar .sidebar-menu > li.active > a {
        background-color: #2666cc;
        border-left-color: #ffffff;
      }

      /* 侧边栏菜单项hover状态 */
      .main-sidebar .sidebar-menu > li > a:hover {
        background-color: #1a4a99;
      }
    "))
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

方式二：外部CSS文件（适合复杂样式管理） #

将之前的CSS代码保存为custom-skin.css，放在Shiny App目录下的www文件夹（没有就新建一个），然后在UI中引入：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "自定义皮肤Demo"),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", tabName = "widgets", icon = icon("th"))
    )
  ),
  dashboardBody(
    tags$link(rel = "stylesheet", type = "text/css", href = "custom-skin.css")
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

4. 按需扩展样式 #

如果还有其他需要替换颜色的元素（比如通知徽章、按钮等），可以用浏览器开发者工具（F12）查看对应元素的CSS类，然后添加到自定义样式中。比如调整通知徽章的背景色：

.navbar-nav > .notifications-menu > .dropdown-menu > li.header {
  background-color: #2666cc;
  color: #ffffff;
}

这样就能完全把你想要的颜色应用到目标区域了！

内容的提问来源于stack exchange，提问作者Gaurav Chaudhari