代码之家 › 专栏 › 技术社区 › Karsten W.

在bslib应用程序中以暗/亮模式确定前景/背景颜色

bslib r

1

Karsten W. · 技术社区 · 4 月前

我正在做实验 bslib 的暗/亮模式功能。我想根据暗/亮模式重新绘制基础R图形。特别是,我想设置 fg 和 bg 选项到 par() .

快速搜索后显示了这些功能 bs_current_theme 和 bs_get_variables :

current_theme <- bslib::bs_current_theme()
bg <- bslib::bs_get_variables(current_theme, "body-bg")[["body-bg"]]

然而,价值 bg 之后似乎没有改变 toggle_dark_mode() 被称为。这是一个打印的示例应用程序 bg 每次按下暗/亮模式按钮时:

ui <- bslib::page_navbar(
  title = "Dark Mode Demo",
  theme = bslib::bs_theme(version=5),
  bslib::nav_panel(
    title = "Base Graphics",
    bslib::card(
      bslib::card_header("Mosaic"),
      shiny::plotOutput("base_mosaic")
    )
  ),
  bslib::nav_spacer(),
  bslib::nav_item(
    bslib::input_dark_mode(id = "theme_toggle", mode = "light")
  )
)

server <- function(input, output, session) {
  # dark / light mode
  shiny::observeEvent(input$theme_toggle, {
    bslib::toggle_dark_mode(mode=input$theme_toggle)
    current_theme <- bslib::bs_current_theme()
    message("bg=", bslib::bs_get_variables(current_theme, "body-bg")[["body-bg"]])
    par(bg = bslib::bs_get_variables(current_theme, "body-bg")[["body-bg"]]) 
  })
  output$base_mosaic <- shiny::renderPlot({ 
    plot(1:10)
  })
}

shiny::shinyApp(ui, server)

确定当前背景和前景(=文本)颜色的最佳方法是什么 bslib ?

2 回复 | 直到 4 月前

1

Jan 4 月前

这是一种使用小 custom message handler :它获取Bootstrap变量的当前值 --bs-body-bg 并将其发送给Shiny:

library(shiny)
library(bslib)

ui <- page_navbar(
  tags$head(
    tags$script("
      Shiny.addCustomMessageHandler('get_bg', function(value) {
        var bg = getComputedStyle(document.body).getPropertyValue('--bs-body-bg');
        Shiny.setInputValue('current_bg', {bg});
      });
    ")
  ),
  title = "Dark Mode Demo",
  theme = bs_theme(version=5),
  nav_panel(
    title = "Base Graphics",
    card(
      card_header("Mosaic"),
      plotOutput("base_mosaic")
    )
  ),
  nav_spacer(),
  nav_item(
    input_dark_mode(id = "theme_toggle", mode = "light")
  )
)

server <- function(input, output, session) {
  # dark / light mode
  observeEvent(input$theme_toggle, {
    toggle_dark_mode(mode=input$theme_toggle)
    
    session$sendCustomMessage("get_bg", "")
    req(input$current_bg)
    message("bg=", input$current_bg)
  })
  output$base_mosaic <- renderPlot({ 
    par(bg = input$current_bg)
    plot(1:10)
  })
}

shinyApp(ui, server)

2

0

Karsten W. 4 月前

除了@Jan的回答,我还发现了 here Bootstrap根据颜色模式使用不同的变量。例如,有变量 body-bg-dark 和 body-color-dark 。因此,我的问题的另一种解决方法是:

if(input$theme_toggle=="dark") {
    bg <- bslib::bs_get_variables(current_theme, "body-bg-dark")[["body-bg-dark"]]
    fg <- bslib::bs_get_variables(current_theme, "body-color-dark")[["body-color-dark"]]
    clr <- khroma::color("dark")(2)
} else {
    bg <- bslib::bs_get_variables(current_theme, "body-bg")[["body-bg"]]
    fg <- bslib::bs_get_variables(current_theme, "body-color")[["body-color"]]
    clr <- khroma::color("light")(2)
}

将基础图形调整到彩色模式并不容易,但我让它工作起来了。请参阅 here .