Estou criando um aplicativo Shiny que tem uma aba para documentação e pretendo usar tags$iframe
um site Quarto renderizado para ele.
No Quarto, é possível definir um switch para display . Isso também mostrará um botão switch para controlar o tema do site.
O aplicativo de exemplo é mostrado abaixo:
Embora ambos suportem a alternância do modo claro para o escuro, os usuários precisam clicar em diferentes interruptores duas vezes, o que não é o ideal para a melhor experiência:
Apenas a entrada Brilhante mudou para escura:
Tanto a entrada Shiny quanto a entrada Quarto mudaram para escuro:
Minha pergunta é: É possível usar um botão de entrada do Shiny para controlar o tema no aplicativo Shiny e o tema no site do Quarto?
O código do aplicativo Shiny de exemplo é:
library(shiny)
library(bslib)
library(htmltools)
ui <- page_fillable(
input_dark_mode(id = "shiny_control", mode = "light"),
tags$iframe(
src = "_site/index.html",
style = "height:86vh"
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
E a estrutura completa do aplicativo está disponível no github :
├── app.R <- Shiny app
├── control_quarto_theme_from_Shiny.Rproj
└── www
└── _site <- Rendered Quarto Website files
├── about.html
├── index.html
├── search.json
├── site_libs
│ ├── bootstrap
│ │ ├── bootstrap-dark.min.css
│ │ ├── bootstrap-icons.css
│ │ ├── bootstrap-icons.woff
│ │ ├── bootstrap.min.css
│ │ └── bootstrap.min.js
│ ├── clipboard
│ │ └── clipboard.min.js
│ ├── quarto-html
│ │ ├── anchor.min.js
│ │ ├── popper.min.js
│ │ ├── quarto-syntax-highlighting-dark.css
│ │ ├── quarto-syntax-highlighting.css
│ │ ├── quarto.js
│ │ ├── tippy.css
│ │ └── tippy.umd.min.js
│ ├── quarto-nav
│ │ ├── headroom.min.js
│ │ └── quarto-nav.js
│ └── quarto-search
│ ├── autocomplete.umd.js
│ ├── fuse.min.js
│ └── quarto-search.js
└── styles.css