html - 从调色板设置背景后，如何使用 INLINE HTML 在深色背景上自动使文本变白

Question

这个问题在某种程度上是相关的，但不依赖于这个 Can you color an adjacent cell in gt table in r? :

我正在明确寻找对 <span style=\...</span> 的修改我的代码的一部分!

我有这个示例数据集，背景颜色为 mpg列取决于 html 应用的值。

library(dplyr)
library(purrr)
library(gt)
library(viridis)

head(mtcars[,1:2]) %>% 
  mutate(
    color = scales::col_numeric(
      palette = viridis(20, direction = 1, option ="D"), #color from viridis package
      domain = NULL)(mpg),
    mpg = glue::glue('<span style=\"display: inline-block; direction: ltr; border-radius: 5px; padding-right: 2px; background-color: {color}; width: 100%\"> {mpg} </span>'),
    mpg = map(mpg, ~gt::html(as.character(.x)))
  ) %>% 
  select(-color) %>% 
  gt()

给出:

我想要 mpg 中的文本以白色为条件的列以深色背景在我的代码的内联 html 部分中编码，例如在转换为 gt 之前对象。

虽然这有效:这不是我要找的!

library(dplyr)
library(gt)
library(viridis)

head(mtcars[,1:2]) %>%  
  gt() %>% 
  data_color(
    columns = c(mpg),
    colors = scales::col_numeric(
      palette = viridis(20, direction = 1, option ="D"), #color from viridis package
      domain = NULL)
  )

给出:

到目前为止我已经尝试过: 添加 color:white内联 html

head(mtcars[,1:2]) %>% 
  mutate(
    color = scales::col_numeric(
      palette = viridis(20, direction = 1, option ="D"), #color from viridis package
      domain = NULL)(mpg),
    mpg = glue::glue('<span style=\"display: inline-block; direction: ltr; color:white; border-radius: 5px; padding-right: 2px; background-color: {color}; width: 100%\"> {mpg} </span>'),
    mpg = map(mpg, ~gt::html(as.character(.x)))
  ) %>% 
  select(-color) %>% 
  gt()

给出:

Answer 1

一个选项是prismatic::best_contrast。默认情况下它不会使用纯 white 所以我们必须设置颜色:

prismatic::best_contrast("red", c("white", "black"))
#> [1] "black"

prismatic::best_contrast("purple", c("white", "black"))
#> [1] "white"

这可以很容易地添加到您的 glue 字符串中，以根据背景颜色设置字体颜色:

head(mtcars[, 1:2]) %>%
  mutate(
    color = scales::col_numeric(
      palette = viridis(20, direction = 1, option = "D"), # color from viridis package
      domain = NULL
    )(mpg),
    mpg = glue::glue(
      '<span style=\"display: inline-block; direction: ltr; border-radius: 5px; padding-right: 2px;',
      'color: {prismatic::best_contrast(color, c("white", "black"))}; background-color: {color}; width: 100%\"> {mpg} </span>'
    ),
    mpg = map(mpg, ~ gt::html(as.character(.x)))
  ) %>%
  select(-color) %>%
  gt()