如何设置gt表格使其响应Quarto网站的主题切换？

问题背景 #

在Quarto中，可通过配置_quarto.yml实现明暗主题切换，示例配置如下：

project:
  type: website

format:
  html:
    theme: 
      light: flatly
      dark: darkly

但使用gt包生成的表格，切换到darkly暗色主题时，仅代码块响应主题变化，表格样式无改动，需要让gt表格跟随Quarto主题自动切换。

解决方案 #

方法一：自定义CSS适配暗色主题 #

在项目中创建styles.css文件，添加以下CSS代码，针对Quarto暗色主题标识（页面根元素的data-bs-theme="dark"属性）覆盖gt表格样式：

/* 暗色主题下gt表格基础样式 */
[data-bs-theme="dark"] .gt_table {
  background-color: #212529;
  color: #f8f9fa;
}

/* 表头样式适配 */
[data-bs-theme="dark"] .gt_header {
  background-color: #343a40;
  border-color: #495057;
}

/* 脚注与来源注释样式 */
[data-bs-theme="dark"] .gt_footnote,
[data-bs-theme="dark"] .gt_source_notes {
  background-color: #212529;
  color: #adb5bd;
  border-color: #495057;
}

/* 分组行样式 */
[data-bs-theme="dark"] .gt_group_row {
  background-color: #343a40;
  border-color: #495057;
}

/* 单元格边框样式 */
[data-bs-theme="dark"] .gt_table td,
[data-bs-theme="dark"] .gt_table th {
  border-color: #495057;
}

然后在_quarto.yml中引入该CSS文件：

format:
  html:
    theme: 
      light: flatly
      dark: darkly
    css: styles.css

方法二：R代码层面动态适配主题 #

通过JS监听Quarto主题切换事件，结合gt的主题配置实现动态样式更新：

library(gt)
library(glue)

# 定义动态主题函数
gt_dynamic_theme <- function(table) {
  table |>
    # 配置明暗主题对应的基础样式
    opt_theme(
      cell_fill = list(light = "white", dark = "#212529"),
      cell_text_color = list(light = "#212529", dark = "#f8f9fa"),
      header_fill = list(light = "#e9ecef", dark = "#343a40"),
      header_text_color = list(light = "#212529", dark = "#f8f9fa"),
      table_border_color = list(light = "#dee2e6", dark = "#495057")
    ) |>
    # 添加JS监听主题切换
    opt_js(
      script = glue('
        document.addEventListener("DOMContentLoaded", function() {{
          function updateGtTheme() {{
            const isDark = document.documentElement.getAttribute("data-bs-theme") === "dark";
            document.querySelectorAll(".gt_table").forEach(table => {{
              table.classList.toggle("gt-dark-theme", isDark);
            }});
          }}
          // 初始化时检测主题
          updateGtTheme();
          // 监听Quarto主题切换事件
          document.addEventListener("quarto-theme-change", updateGtTheme);
        }});
      ')
    )
}

# 生成表格并应用动态主题
sp500 |>
  dplyr::filter(date >= start_date & date <= end_date) |>
  dplyr::select(-adj_close) |>
  gt() |>
  tab_header(
    title = "S&P 500",
    subtitle = glue("{start_date} to {end_date}")
  ) |>
  fmt_currency() |>
  fmt_date(columns = date, date_style = "wd_m_day_year") |>
  fmt_number(columns = volume, suffixing = TRUE) |>
  gt_dynamic_theme()

方法三：利用Quarto内置适配（推荐） #

确保Quarto和gt包为最新版本，在_quarto.yml中开启gt的自动主题适配：

format:
  html:
    theme: 
      light: flatly
      dark: darkly
    gt:
      theme: auto

此配置下，gt表格会自动识别Quarto当前主题，同步应用对应样式。

验证效果 #

重新渲染Quarto网站，切换明暗主题，gt表格的背景色、文字色、边框色会随主题同步变化。

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