Dark mode switch doesn't work using navbarPage

I have a shiny app for which I'd like to add a dark mode switch. I've managed to do that after some research online but as I was trying to implement this bit of code in my app I encountered issues. I have been trying several things on a simpler app to try to identify what causes the switch to not work and I came to the conclusion that adding a navbarPage to my app is what makes it crash. Below is a simple example:

library(shiny)
library(DT)
library(shinyWidgets)
library(bslib)

ui <- fluidPage(
  theme=bs_theme(),
  # navbarPage("TITLE",
             sidebarLayout(
               sidebarPanel(
                 numericInput("num", label = h3("Numeric input"), value = 1),
                 materialSwitch(inputId = "mode", label = icon("moon"), right=TRUE,status = "success")),
               mainPanel(verbatimTextOutput("value")) #fin main panel
             ) 
       # )
)


server <- function(input, output,session) {
  observe({
    if(input$mode==TRUE)
      session$setCurrentTheme(bs_theme_update(theme, bootswatch = "superhero"))
    if(input$mode==FALSE)
      session$setCurrentTheme(bs_theme_update(theme, bootswatch = "default"))
  })
  
  output$value <- renderPrint({ input$num })
}
shinyApp(ui, server)

As long as the navbar line and corresponding ")" is considered as a comment it works fine but as soon as I uncomment these two lines I get this error:

Warning: Navigation containers expect a collection of `bslib::nav()`/`shiny::tabPanel()`s and/or `bslib::nav_menu()`/`shiny::navbarMenu()`s. Consider using `header` or `footer` if you wish to place content above (or below) every panel's contents.

Listening on http://--.--
Warning: Error in : session$setCurrentTheme() cannot be used to change the Bootstrap version from  to 4. Try using `bs_theme(version = 4)` for initial theme.
  47: stop
  46: session$setCurrentTheme
  45: observe [C:/Users/user/Documents/shiny/SHINY-APP/app4.R#23]
  44: <observer>
   1: runApp

I am very new to shiny despite being familiar with R but I really don't understand this error. I have been trying to find answers in the documentation associated to the different functions I'm using as well as in previously asked questions on SO but I haven't been able to fix this yet.

Any help would be greatly appreciated! Thank you !

CodePudding user response：

You have to specify the theme both in the fluidPage and the navbarPage (maybe you can get rid of fluidPage, didn't test it)

library(shiny)
library(DT)
library(shinyWidgets)
library(bslib)

ui <- fluidPage(
  theme=bs_theme(version = 4, bootswatch = "default"),
  navbarPage("TITLE",
             theme=bs_theme(version = 4, bootswatch = "default"),
             tabPanel("Tab",
                      sidebarLayout(
                        sidebarPanel(
                          numericInput("num", label = h3("Numeric input"), value = 1),
                          materialSwitch(inputId = "mode", label = icon("moon"),
                                         right=TRUE,status = "success")),
                        mainPanel(verbatimTextOutput("value")) #fin main panel
                      )
             )
  )
)


server <- function(input, output,session) {

  
  observe(session$setCurrentTheme(
    if(isTRUE(input$mode)){
      bs_theme(bootswatch = "superhero")
    } else {
      bs_theme(bootswatch = "default")
    }
  ))
  
  output$value <- renderPrint({ input$num })
}
shinyApp(ui, server)