shinyDarkmode :为shiny应用程序添加黑暗模式

绪论

在这篇文章中，我们将介绍如何将darkmode添加到Shiny Apps中。它使用darkmode.js脚本，允许你在黑暗和光明模式之间进行切换。它非常容易实现，不会影响你现有的代码和你的应用程序的风格。它有内置的切换按钮，所以你不需要添加任何小部件来实现。显然，如果你不喜欢默认的按钮风格，你也可以自定义它。

安装

我很高兴为此发布了名为shinyDarkmode 的R包。你可以从github上安装它。它在CRAN中还没有出现。

remotes::install_github("deepanshu88/shinyDarkmode")

基本实例

下面的程序是K Means Clustering的演示程序。你会看到右下角的按钮是用来切换的。

第一步是在用户界面中添加use_darkmode() 。下一步是在服务器中添加darkmode(label = "⏳") 。

library(shiny)
library(shinyDarkmode)

# UI
vars <- setdiff(names(iris), "Species")
ui <- fluidPage(
  
  titlePanel("Sample App"),
  
  # Setup
  use_darkmode(),
  
  sidebarPanel(
    selectInput('xcol', 'X Variable', vars),
    selectInput('ycol', 'Y Variable', vars, selected = vars[[2]]),
    numericInput('clusters', 'Cluster count', 3, min = 1, max = 9)
  ),
  mainPanel(
    plotOutput('plot1')
  ),
  
  column(width = 12,
         DT::dataTableOutput("mydt")
  )
)

# Server
server <- function(input, output, session) {
  
  darkmode(label = "⏳")
  
  # Combine the selected variables into a new data frame
  selectedData <- reactive({
    iris[, c(input$xcol, input$ycol)]
  })
  
  clusters <- reactive({
    kmeans(selectedData(), input$clusters)
  })
  
  output$plot1 <- renderPlot({
    palette(c("#E41A1C", "#377EB8", "#4DAF4A", "#984EA3",
              "#FF7F00", "#FFFF33", "#A65628", "#F781BF", "#999999"))
    
    par(mar = c(5.1, 4.1, 0, 1))
    plot(selectedData(),
         col = clusters()$cluster,
         pch = 20, cex = 3)
    points(clusters()$centers, pch = 4, cex = 4, lwd = 4)
  })
  
  output$mydt <- DT::renderDataTable(iris,
                                     options = list(pageLength = 10, autoWidth = TRUE),
                                     rownames= FALSE)
}

# Run App
shinyApp(ui = ui, server = server)

darkmode( ) 功能允许你自定义默认的按钮。请看下面的默认设置 -

bottom = "32px",
  right = "32px",
  left = "unset",
  time = "0.5s",
  mixColor = "#fff",
  backgroundColor = "#fff",
  buttonColorDark = "#100f2c",
  buttonColorLight = "#fff",
  saveInCookies = FALSE,
  label = "⏳",
  autoMatchOsTheme = TRUE

基于复选框切换黑暗模式

你可以使用darkmode_toggle( ) ，该函数与复选框部件进行交互。

library(shiny)
library(shinyDarkmode)

ui <- fluidPage(
  
  titlePanel("Sample App"),
  
  # Setup
  use_darkmode(),
  
  # Inputs
  fluidRow(
    tags$div(style = "margin-top: -25px; float: right; margin-right: -150px;",
             checkboxInput("togglemode", "Dark Mode", value = FALSE)
    )
  ), DT::dataTableOutput("mydt")
  
)


# Server
server <- function(input, output, session) {
  
  darkmode_toggle(inputid = 'togglemode')
  
  output$mydt <- DT::renderDataTable(mtcars,
                                     options = list(pageLength = 10, autoWidth = TRUE),
                                     rownames= FALSE)
  
}

# Run App
shinyApp(ui = ui, server = server)

shinyWidgets 库有很多漂亮的复选框部件，使仪表盘更加生动和具有视觉吸引力。这里我们使用库中的prettySwitch( ) 函数。它的工作原理类似于闪亮的checkboxInput widget，但也有参数来设计开关。

library(shiny)
library(shinyWidgets)
library(shinyDarkmode)

ui <- fluidPage(
  
  titlePanel("Sample App"),
  
  # Setup
  use_darkmode(),
  
  # Inputs
  fluidRow(
    tags$div(style = "margin-top: -25px; float: right; margin-right: -150px;",
             prettySwitch("togglemode", "Dark Mode", value = FALSE, fill = TRUE, status = "info")
    )
  ), DT::dataTableOutput("mydt")
  
)


# Server
server <- function(input, output, session) {
  
  darkmode_toggle(inputid = 'togglemode')
  
  output$mydt <- DT::renderDataTable(mtcars,
                                     options = list(pageLength = 10, autoWidth = TRUE),
                                     rownames= FALSE)
  
}

# Run App
shinyApp(ui = ui, server = server)

当黑暗模式激活时，javascript会添加CSS类darkmode--activated 你可以用它来定制黑暗模式的样式。

.darkmode--activated button:not(.darkmode-toggle) {background: #bd9e68; border-color: #bd9e68; color: #000; font-weight : 700;}
.darkmode--activated .pretty.p-switch.p-fill input:checked~.state.p-info:before {background-color: #bd9e68 !important; border-color: #bd9e68;}
.darkmode--activated .pretty.p-switch.p-fill input:checked~.state label:after {background-color: #333 !important;}

`