Dark mode switch doesn't work using navbarPage - shiny - r

Question

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 !

Answer 1

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)