如何为我的shinyMobile应用程序定义全局背景颜色？

Question

shinyMobile 应用程序的默认背景颜色是浅灰色（特别是：gainsboro

#DCDCD

）。我想将其设置为蓝色（尤其是：深小丸

#162580

）。

我的应用程序的图片：

我想要它的外观的图片：

这是我的应用程序代码的简化版本：

library(shiny)
library(shinyMobile)

shinyApp(
    ui = f7Page(
        title = "My App",
        options = list(theme = "auto"),
        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) {}
)

我想将背景颜色设置为蓝色。

我找到了要修改的文件名，以便使用元素检查器更改背景颜色。它的名字是

shinyMobile.css

。我尝试在 FluidPage 的不同实例中使用

tags

。我找不到解决方案。

此外，这是作者的注释：

自定义皮肤shinyMobile有3种皮肤：

aurora 适用于桌面应用程序 ios 和 md 适用于移动应用程序 它会自动 检测应用程序是在 android 还是 iOS 上运行，并相应地 调整布局。当然可以应用iOS皮肤 android 和相反，尽管不推荐。

shinyMobile还提供了2种主题，即浅色和深色。尽管 Framework7 不仅允许在全局应用深色或浅色主题 但在“小部件级别”，shinyMobile 不支持 功能，提高整体一致性。只有面板可以有 颜色独立于全局主题。

Answer 1

我知道我在聚会上回答这个问题已经太晚了，但我想我会为其他正在寻找的人提供答案。您需要做的就是复制shinyMobile.css 文件并将其保存到应用程序的“www”文件夹中。如果您的应用程序没有，请制作一个并将shinyMobile.css 文件放入其中。在该文件中，您可以将第 22 行的背景颜色代码编辑为您想要的颜色。以下是在新的shinyMobile.css 文件中将背景更改为所需颜色的代码：

.light .split-layout .page-content:not(.login-screen-content, .panel-content),
.light .single-layout .page-content:not(.login-screen-content, .panel-content),
.light .tab-layout .page-content:not(.login-screen-content, .panel-content),
.light div.messages {
  background-color: #ff0000;
}

我希望这对接下来遇到它的人有帮助！