Low text contrast with pkgdown dark theme

Bisaloo commented 4 months ago

https://epiverse-trace.github.io/epiparameter/articles/database.html (different theme but same issue)

I can also create a reprex package if that's helpful.

The latest pkgdown version enables dark themes (by setting light-switch: true in _pkgdown.yml). But the dark background causes contrast issues with the text in the DT because text color is hardcoded in DT:

https://github.com/rstudio/DT/blob/4e63a4664d9caa9fb9d4fb17061ce5eab94bec18/inst/htmlwidgets/lib/datatables/css/jquery.dataTables.extra.css#L26-L28

Are these lines still necessary? Is it possible to inherit from the body text colour, as mentioned in https://github.com/DataTables/DataTablesSrc/issues/157#issuecomment-600526294?

Session info

``` R version 4.4.1 Patched (2024-07-07 r86880) Platform: x86_64-pc-linux-gnu Running under: Ubuntu 22.04.4 LTS, RStudio 2024.4.2.764 Locale: LC_CTYPE=en_GB.UTF-8 LC_NUMERIC=C LC_TIME=en_GB.UTF-8 LC_COLLATE=en_GB.UTF-8 LC_MONETARY=en_GB.UTF-8 LC_MESSAGES=en_GB.UTF-8 LC_PAPER=en_GB.UTF-8 LC_NAME=C LC_ADDRESS=C LC_TELEPHONE=C LC_MEASUREMENT=en_GB.UTF-8 LC_IDENTIFICATION=C Package version: base64enc_0.1.3 bslib_0.7.0 cachem_1.1.0 cli_3.6.3 crosstalk_1.2.1 digest_0.6.36 DT_0.33.1 evaluate_0.24.0 fastmap_1.2.0 fontawesome_0.5.2 fs_1.6.4 glue_1.7.0 graphics_4.4.1 grDevices_4.4.1 highr_0.11 htmltools_0.5.8.1 htmlwidgets_1.6.4 httpuv_1.6.15 jquerylib_0.1.4 jsonlite_1.8.8 knitr_1.48 later_1.3.2 lazyeval_0.2.2 lifecycle_1.0.4 magrittr_2.0.3 memoise_2.0.1 methods_4.4.1 mime_0.12 promises_1.3.0 R6_2.5.1 rappdirs_0.3.3 Rcpp_1.0.12 rlang_1.1.4 rmarkdown_2.27 sass_0.4.9 stats_4.4.1 tinytex_0.51 tools_4.4.1 utils_4.4.1 xfun_0.45 yaml_2.3.9 ```

By filing an issue to this repo, I promise that

[x] I have fully read the issue guide at https://yihui.org/issue/.
[ ] I have provided the necessary information about my issue.
- If I'm asking a question, I have already asked it on Stack Overflow or RStudio Community, waited for at least 24 hours, and included a link to my question there.
- If I'm filing a bug report, I have included a minimal, self-contained, and reproducible example, and have also included xfun::session_info('DT'). I have upgraded all my packages to their latest versions (e.g., R, RStudio, and R packages), and also tried the development version: remotes::install_github('rstudio/DT').
- If I have posted the same issue elsewhere, I have also mentioned it in this issue.
[x] I have learned the Github Markdown syntax, and formatted my issue correctly.

I understand that my issue may be closed if I don't fulfill my promises.

yihui commented 4 months ago

My gut feeling is that we should use color: inherit instead of hardcoding it to #333, but someone needs to verify if that would fix https://github.com/rstudio/DT/issues/447.

glin commented 4 months ago

Agreed with double checking #447, because I think that would still be an issue in the latest RStudio IDE. https://github.com/rstudio/rstudio/issues/6489 never got a resolution as far as I know

Having hit this same issue in reactable (https://github.com/glin/reactable/issues/21), what I did was inherit text colors by default. And then for RStudio R Notebooks specifically, hack in a terrible workaround to explicitly set the widget's text color ONLY when running inside an R Notebook:

reactable_html <- function(id, style, class, ...) {
  # Set text color in R Notebooks to prevent contrast issues when
  # using a dark editor theme and htmltools 0.4.0.
  if (isTRUE(getOption("rstudio.notebook.executing"))) {
    style <- paste0("color: #333;", style)
  }
  ...
}

rstudio / DT

Low text contrast with pkgdown dark theme #1144