Setting separate theme for panels does not work

[dmenne]

This example is from f7Tab, but any other one would do. The color of the panels is always the base color of the app, different settings are not honoured.

      panels = tagList(
        f7Panel(title = "Left Panel", side = "left", theme = "light", "Blabla", effect = "cover"),
        f7Panel(title = "Right Panel", side = "right", theme = "dark", "Blabla", effect = "cover")
      ),

Possibly related: In shinyMobile.js, `dark_mode is not defined.

            if (dark_mode) $(newTab).css("background-color", "");

[DivadNojnarg]

I'll check but it could be a Framework7 internal issue. If you change the global theme to light, panels have correct CSS.

[jpiaskowski]

I'm having trouble getting the pre-set colors to work:

Setting color = "red" (one of the colors in the F7 framework), nothing happens. When the color is set to a hex value, color = "#FF0000", this color is applied to the main header and various FAB items.

library(shiny)
library(shinyMobile)

shinyApp(
  ui = f7Page(
    title = "Menus",
    options = list(
      #color = "red",  # color not showing up
      color = "#FF0000", # works
      theme = "auto",
      filled = TRUE,
      dark = FALSE),
    f7SingleLayout(
      navbar = f7Navbar(
        title = "f7Menu",
        hairline = FALSE,
        shadow = TRUE
      ),
      f7Button(inputId = "toggle", label = "Toggle menu"),
      f7Menu(
        f7MenuDropdown(
          id = "menu1",
          label = "Menu 1",
          f7MenuItem(inputId = "item1", "Item 1"),
          f7MenuItem(inputId = "item2", "Item 2"),
          f7MenuDropdownDivider(),
          f7MenuItem(inputId = "item3", "Item 3")
        )
      )
    )
  ),
  server = function(input, output, session) {

  }
)

[jpiaskowski]

I have a work-around by adding a custom CSS file per F7 documentation:

:root {
  --f7-theme-color: #0C8346;
  --f7-theme-color-rgb: 12, 131, 70; /* same as theme-color */
  --f7-theme-color-shade: #095e32; /* darker version of theme-color */
  --f7-theme-color-tint: #0fa85a;  /* lighter version of theme-color */
  --f7-navbar-text-color: #fff; /* controls navbar and panels titles */
  --f7-block-text-color: #fff; /* font color for panel menu text */
  --f7-block-font-size: 18px; /* font size  for panel menu text */
 }
/* for the left and right menu background */
.page {
  background-color: #095e32 !important;
}

[DivadNojnarg]

Yes there was an undocumented breaking change in the API. Thanks for reporting it. However, I will now use https://rdrr.io/cran/gplots/man/col2hex.html:

gplots::col2hex("red")
[1] "#FF0000"

which will avoid this situation so you can pass either the name or the code, like before.

[DivadNojnarg]

That being said, gplots::col2hex only supports a limited number of colors and some of the framework7 one are not like deeporange.

[jpiaskowski]

Thank you. Setting the color option via your suggestion works, but there is still is the problem that the panel menus (left or right) are running a the default colors for the "light" theme (some very light shade of gray?) - hence this CSS workaround:

.page {
  background-color: #095e32 !important;
}

[DivadNojnarg]

@jpiaskowski and @dmenne : finally found the issue, a bit obvious. In the JS code, the theme-dark class is added at the top level on the html tag, which propagates to all children. A way to workaround would be to add theme-dark to an element such as .view, which is a sibling of panels. That way, panel theme can be applied independently of the main app theme:

toggleDarkTheme: function() {
        var self = this;
        var $view = self.$(".view-main");
        $view.toggleClass("theme-dark");
      }

[DivadNojnarg]

After further investigations, my modification breaks many other things like notification style, popovers, ... in dark mode (they appear in grey/white). From the Framework7 documentation, I can set a callback when a widget opens (notification) and add it the theme-dark class on the fly:

Shiny.addCustomMessageHandler(widget, (function(message) {
                message.on = {
                    open: function(target) {
                        if (target.app.params.dark) $(target.el).addClass("theme-dark");
                    }
                };
                app[widget].create(message).open();
            }))

Keep you updated on the progress ...