gt table doesn't play well with dark theme in quarto

[jlduan]

Hi,

Thanks for developing and maintaining this wonderful package. I use it extensively in my projects.

I just found out some parts of the gt table doesn't change color when switching to dark theme in Quarto html output.

qmd file content:

---
title: "gt demo"
format:
  html:
    theme:
      light: [flatly]
      dark: [darkly]
---

```{r}
library(tidyverse)
library(gt)

gtcars %>%
  group_by(ctry_origin) %>%
  slice_head(n = 2) %>%
  ungroup() %>%
  filter(ctry_origin != "United Kingdom") %>%
  group_by(ctry_origin) %>%
  gt() %>%
  gt::summary_rows(
    columns = hp:msrp,
    fns = c(
        Average = ~ mean(.)
    ),
    formatter = gt::fmt_number,
    decimals = 2,
    suffixing = TRUE
)

light theme:
![SCR-20220923-1ar](https://user-images.githubusercontent.com/699489/191899863-4dd2d4ad-72bc-4db5-9e6c-eadc41b31744.png)

dark theme:
![SCR-20220923-1au](https://user-images.githubusercontent.com/699489/191899906-a9c7b75a-c43f-4506-8e46-eb47550071c9.png)

Best,

devtools::session_info()

─ Session info ─────────────────────────────────────────────────────────────── setting value version R version 4.2.1 (2022-06-23) os macOS Monterey 12.6 system aarch64, darwin21.6.0 ui unknown language (EN) collate en_US.UTF-8 ctype en_US.UTF-8 tz America/Chicago date 2022-09-23 pandoc 2.19.2 @ /opt/homebrew/bin/ (via rmarkdown)

─ Packages ─────────────────────────────────────────────────────────────────── package version date (UTC) lib source cachem 1.0.6 2021-08-19 [1] CRAN (R 4.2.0) callr 3.7.2 2022-08-22 [1] CRAN (R 4.2.1) cli 3.4.0 2022-09-08 [1] CRAN (R 4.2.1) colorspace 2.0-3 2022-02-21 [1] CRAN (R 4.2.0) crayon 1.5.1 2022-03-26 [1] CRAN (R 4.2.0) devtools 2.4.4.9000 2022-08-11 [1] Github (r-lib/devtools@c9696a6) digest 0.6.29 2021-12-01 [1] CRAN (R 4.2.0) dplyr 1.0.99.9000 2022-09-21 [1] Github (tidyverse/dplyr@60f7a2d) ellipsis 0.3.2 2021-04-29 [1] CRAN (R 4.2.0) evaluate 0.16 2022-08-09 [1] CRAN (R 4.2.1) fansi 1.0.3 2022-03-24 [1] CRAN (R 4.2.0) fastmap 1.1.0 2021-01-25 [1] CRAN (R 4.2.0) forcats 0.5.2.9000 2022-08-20 [1] Github (tidyverse/forcats@bd319e0) fs 1.5.2.9000 2022-08-24 [1] Github (r-lib/fs@238032f) generics 0.1.3 2022-07-05 [1] CRAN (R 4.2.1) ggplot2 3.3.6.9000 2022-09-12 [1] Github (tidyverse/ggplot2@a58b48c) glue 1.6.2.9000 2022-04-22 [1] Github (tidyverse/glue@d47d6c7) gt 0.7.0.9000 2022-09-21 [1] Github (rstudio/gt@3c7a529) gtable 0.3.1.9000 2022-09-01 [1] Github (r-lib/gtable@c1a7a81) hms 1.1.2 2022-08-19 [1] CRAN (R 4.2.1) htmltools 0.5.3 2022-07-18 [1] CRAN (R 4.2.1) htmlwidgets 1.5.4 2022-08-23 [1] Github (ramnathv/htmlwidgets@400cf1a) httpuv 1.6.6 2022-09-08 [1] CRAN (R 4.2.1) jsonlite 1.8.0 2022-02-22 [1] CRAN (R 4.2.0) knitr 1.40 2022-08-24 [1] CRAN (R 4.2.1) later 1.3.0 2021-08-18 [1] CRAN (R 4.2.0) lifecycle 1.0.2.9000 2022-09-09 [1] Github (r-lib/lifecycle@a2666fc) lubridate 1.8.0.9000 2022-05-24 [1] Github (tidyverse/lubridate@0bb49b2) magrittr 2.0.3 2022-03-30 [1] CRAN (R 4.2.0) memoise 2.0.1 2021-11-26 [1] CRAN (R 4.2.0) mime 0.12 2021-09-28 [1] CRAN (R 4.2.0) miniUI 0.1.1.1 2018-05-18 [1] CRAN (R 4.2.0) munsell 0.5.0 2018-06-12 [1] CRAN (R 4.2.0) pillar 1.8.1 2022-08-19 [1] CRAN (R 4.2.1) pkgbuild 1.3.1 2021-12-20 [1] CRAN (R 4.2.0) pkgconfig 2.0.3 2019-09-22 [1] CRAN (R 4.2.0) pkgload 1.3.0 2022-06-27 [1] CRAN (R 4.2.1) prettyunits 1.1.1.9000 2022-04-22 [1] Github (r-lib/prettyunits@8706d89) processx 3.7.0 2022-07-07 [1] CRAN (R 4.2.1) profvis 0.3.7 2020-11-02 [1] CRAN (R 4.2.0) promises 1.2.0.1 2021-02-11 [1] CRAN (R 4.2.0) ps 1.7.1 2022-06-18 [1] CRAN (R 4.2.0) purrr 0.9000.0.9000 2022-09-21 [1] Github (tidyverse/purrr@194b8ef) R6 2.5.1.9000 2022-08-04 [1] Github (r-lib/R6@87d5e45) Rcpp 1.0.9 2022-07-08 [1] CRAN (R 4.2.1) readr 2.1.2.9000 2022-09-20 [1] Github (tidyverse/readr@5cac6ed) remotes 2.4.2 2022-09-12 [1] Github (r-lib/remotes@bc0949d) rlang 1.0.5.9000 2022-09-16 [1] Github (r-lib/rlang@5a25ff4) rmarkdown 2.16.1 2022-08-25 [1] Github (rstudio/rmarkdown@b8a9879) sass 0.4.2 2022-07-16 [1] CRAN (R 4.2.1) scales 1.2.1.9000 2022-08-20 [1] Github (r-lib/scales@b3df2fb) sessioninfo 1.2.2 2021-12-06 [1] CRAN (R 4.2.0) shiny 1.7.2 2022-07-19 [1] CRAN (R 4.2.1) stringi 1.7.8 2022-07-11 [1] CRAN (R 4.2.1) stringr 1.4.1.9000 2022-08-21 [1] Github (tidyverse/stringr@792bc92) tibble 3.1.8.9001 2022-09-20 [1] Github (tidyverse/tibble@b740af1) tidyr 1.2.1.9000 2022-09-09 [1] Github (tidyverse/tidyr@653def2) tidyselect 1.1.2.9000 2022-09-21 [1] Github (r-lib/tidyselect@edd0a3b) tidyverse 1.3.2.9000 2022-09-12 [1] Github (tidyverse/tidyverse@3be8283) tzdb 0.3.0 2022-03-28 [1] CRAN (R 4.2.0) urlchecker 1.0.1 2021-11-30 [1] CRAN (R 4.2.0) usethis 2.1.6.9000 2022-09-15 [1] Github (r-lib/usethis@7c34252) utf8 1.2.2 2021-07-24 [1] CRAN (R 4.2.0) vctrs 0.4.1.9000 2022-09-19 [1] Github (r-lib/vctrs@0a219ba) withr 2.5.0 2022-03-03 [1] CRAN (R 4.2.0) xfun 0.33 2022-09-12 [1] CRAN (R 4.2.1) xtable 1.8-4 2019-04-21 [1] CRAN (R 4.2.0) yaml 2.3.5 2022-02-21 [1] CRAN (R 4.2.0)

[1] /opt/homebrew/lib/R/4.2/site-library [2] /opt/homebrew/Cellar/r/4.2.1_4/lib/R/library

[rich-iannone]

Thank you for this bug report. I’m currently working with the Quarto team to fix integration problems like this. #1007 will help to address this (along with changes in Quarto).

[drleehw]

Given that the Bootswatch themes Quarto uses use CSS which is very opinionated and replete, would the simplest solution perhaps be to add to the opt_stylize() function, e.g. something like opt_stylize(style = "theme") which would apply just set all the background colours in the gt object to inherit var(--bs-body-bg) and likewise for the body text color etc? (I appreciate there would need to be error handling so the code does't fall over when run inside RStudio or similar as those css variables aren't available in that context.) Just an idea. It would seem to make gt play nice with colour schemes from any theme and make it reasonably future proof too.

[LukasWallrich]

Is there any workaround on this? Currently, it makes it impossible to use gt() in webpages that allow users to set the mode ... e.g. https://lydiae.com/2020/04/13/gt-tables/