rstudio / DT

R Interface to the jQuery Plug-in DataTables
https://rstudio.github.io/DT/
Other
596 stars 182 forks source link

Low text contrast with pkgdown dark theme #1144

Open Bisaloo opened 1 month ago

Bisaloo commented 1 month ago

image

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

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

yihui commented 1 month 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 1 month 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)
  }
  ...
}