如何为shinyMobile应用设置全局Deep Koamaru深蓝色背景？

问题说明 #

当前shinyMobile应用默认背景色为浅灰色（#DCDCDC），需要将全局背景修改为Deep Koamaru深蓝色（#162580）。shinyMobile自带3种皮肤：aurora（桌面应用）、ios和md（移动应用），会自动检测系统适配布局；仅支持light/dark两种主题，且仅面板可独立设置颜色，不支持组件级主题自定义。

解决方案 #

通过添加自定义CSS样式覆盖不同皮肤下的背景元素样式，直接在f7Page中嵌入tags$style实现：

修改后的完整代码 #

library(shiny)
library(shinyMobile)

shinyApp(
    ui = f7Page(
        title = "My App",
        options = list(theme = "auto"),
        # 添加自定义CSS覆盖背景色
        tags$style(HTML("
            /* 针对桌面aurora皮肤的页面内容背景 */
            .aurora .page-content {
                background-color: #162580 !important;
            }
            /* 针对iOS/md移动皮肤的页面背景 */
            .ios .page, .md .page {
                background-color: #162580 !important;
            }
            /* 可选：调整卡片文字颜色适配深色背景 */
            .card {
                color: #ffffff;
            }
            .card-header, .card-footer {
                color: #ffffff;
            }
        ")),
        f7SingleLayout(
            navbar = f7Navbar(
                title = "App"
            ),
            f7SmartSelect(
                inputId = "needs",
                label = "What are you looking for?",
                choices = list("need1", "need2", "need3"),
                openIn = "popup",
                multiple = TRUE
            ),
            f7SocialCard(
                author = "Me", 
                date = "Today",
                "Description",
                footer = tagList(
                    f7Button(
                        color = "green",
                        outline = FALSE, 
                        fill = FALSE,
                        label = f7Icon("phone_fill", style = "font-size: 25px;"),
                        href = paste0("tel:", 000)
                    )
                )
            )
        )
    ),
    server = function(session, input, output) {}
)

代码说明 #

• .aurora .page-content：针对桌面端aurora皮肤的页面内容区域设置背景色
• .ios .page, .md .page：针对移动端ios和md皮肤的页面容器设置背景色
• !important：强制覆盖默认样式优先级，确保自定义颜色生效
• 卡片文字颜色调整：深色背景下默认浅色文字更易读，可根据实际需求选择保留或移除

内容的提问来源于stack exchange，提问作者user20701170