英文:
Bslib change only navbar color
问题
在我的Shiny应用中，我有一个选项可以更改应用的主题。是否有一种方法可以创建一个主题，其中只有导航栏有颜色，而主体是黑色或白色的？我知道可以使用CSS来做到这一点，但由于我可以在应用中更改主题，所以无法进行自定义修复。
英文:
In my shiny app, I have an option allowing to change the theme app.
Is there a way to create a theme where only the navbar is colored and the body is black or white ?
I know it's possible to do it with CSS but as I could change the theme in the app it's not possible to do a custom fix.
library(shiny)
library(markdown)
library(bslib)
main_theme = bslib::bs_theme(
bg = "#86cecb",
fg = "#e12885",
primary = "#89cff0",
)
ui = navbarPage(
"Navbar!",
theme = main_theme,
tabPanel("Plot",
sidebarLayout(
sidebarPanel(radioButtons(
"plotType", "Plot type",
c("Scatter" = "p", "Line" = "l")
)),
mainPanel(plotOutput("plot"))
)),
navbarMenu(title = "Ressources",
tabPanel(
"Options d'interface",
selectInput(
"theme",
"Themes :",
c(
"Custom" = "custom",
"Dark" = "dark",
"Light" = "light"
)
)
))
)
server = function(input, output, session) {
light <- bs_theme()
dark <- bslib::bs_theme(
bg = "#222222",
fg = "#FFFFFF",
primary = "#FFFFFF",
secondary = "#434343"
)
main_theme = bslib::bs_theme(
bg = "#86cecb",
fg = "#e12885",
primary = "#89cff0",
)
observe(session$setCurrentTheme({
if (input$theme == "dark")
dark
else if (input$theme == "light")
light
else if (input$theme == "custom")
main_theme
}))
}
if (interactive())
shinyApp(ui, server)
答案1
得分: 3
你可以使用 Bootstrap 变量 navbar-bg 单独设置导航栏的背景颜色：
library(shiny)
library(markdown)
library(bslib)
ui <- navbarPage(
"导航栏！",
theme = bslib::bs_theme(
"navbar-bg" = "#86cecb",
bg = "#222222",
fg = "#e12885",
primary = "#89cff0",
),
tabPanel(
"图表",
sidebarLayout(
sidebarPanel(radioButtons(
"plotType", "图表类型",
c("散点图" = "p", "折线图" = "l")
)),
mainPanel(plotOutput("plot"))
)
),
navbarMenu(
title = "资源",
tabPanel(
"界面选项",
selectInput(
"theme",
"主题：",
c(
"自定义" = "custom",
"暗色" = "dark",
"亮色" = "light"
)
)
)
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
#>
#> 正在监听 http://127.0.0.1:5052
<!-- -->
英文:
You could set the background color for the navbar individually using the Bootstrap variable navbar-bg:
library(shiny)
library(markdown)
library(bslib)
ui <- navbarPage(
"Navbar!",
theme = bslib::bs_theme(
"navbar-bg" = "#86cecb",
bg = "#222222",
fg = "#e12885",
primary = "#89cff0",
),
tabPanel(
"Plot",
sidebarLayout(
sidebarPanel(radioButtons(
"plotType", "Plot type",
c("Scatter" = "p", "Line" = "l")
)),
mainPanel(plotOutput("plot"))
)
),
navbarMenu(
title = "Ressources",
tabPanel(
"Options d'interface",
selectInput(
"theme",
"Themes :",
c(
"Custom" = "custom",
"Dark" = "dark",
"Light" = "light"
)
)
)
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
#>
#> Listening on http://127.0.0.1:5052
<!-- -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论