# Dark-Theme

#### David Granjon

#### 2019-11-27

By default, shinyMobile opens in light mode. However, specifying the `f7Init()` theme option to “dark” will enable this mode.

    library(shiny)
    library(shinyMobile)
    library(echarts4r)
    library(shinyWidgets)

    shiny::shinyApp(
      ui = f7Page(
        title = "My app",
        init = f7Init(theme = "dark"),
        f7TabLayout(
          panels = tagList(
           f7Panel(title = "Left Panel", side = "left", theme = "light", "Blabla", effect = "cover"),
           f7Panel(title = "Right Panel", side = "right", theme = "dark", "Blabla", effect = "cover")
          ),
          navbar = f7Navbar(
            title = "Tabs",
            hairline = TRUE,
            shadow = TRUE,
            left_panel = TRUE,
            right_panel = TRUE
          ),
          f7Tabs(
            animated = TRUE,
            #swipeable = TRUE,
            f7Tab(
              tabName = "Tab 1",
              icon = f7Icon("email"),
              active = TRUE,

              f7Flex(
                prettyRadioButtons(
                  inputId = "theme",
                  label = "Select a theme:",
                  thick = TRUE,
                  inline = TRUE,
                  selected = "md",
                  choices = c("ios", "md"),
                  animation = "pulse",
                  status = "info"
                ),

                prettyRadioButtons(
                  inputId = "color",
                  label = "Select a color:",
                  thick = TRUE,
                  inline = TRUE,
                  selected = "dark",
                  choices = c("light", "dark"),
                  animation = "pulse",
                  status = "info"
                )
              ),

              shiny::tags$head(
                shiny::tags$script(
                  'Shiny.addCustomMessageHandler("ui-tweak", function(message) {
                    var os = message.os;
                    var skin = message.skin;
                    if (os === "md") {
                      $("html").addClass("md");
                      $("html").removeClass("ios");
                      $(".tab-link-highlight").show();
                    } else if (os === "ios") {
                      $("html").addClass("ios");
                      $("html").removeClass("md");
                      $(".tab-link-highlight").hide();
                    }

                    if (skin === "dark") {
                     $("html").addClass("theme-dark");
                    } else {
                      $("html").removeClass("theme-dark");
                    }

                   });
                  '
                )
              ),

              f7Shadow(
                intensity = 10,
                hover = TRUE,
                f7Card(
                  title = "Card header",
                  sliderTextInput(
                    inputId = "by",
                    label = "Date Selector:",
                    choices = c("day", "week", "month"),
                    selected = "day"
                  ),
                  br(),
                  echarts4rOutput("river"),
                  footer = tagList(
                    f7Button(color = "blue", label = "My button", src = "https://www.google.com"),
                    f7Badge("Badge", color = "green")
                  )
                )
              )
            ),
            f7Tab(
              tabName = "Tab 2",
              icon = f7Icon("today"),
              active = FALSE,
              f7Shadow(
                intensity = 10,
                hover = TRUE,
                f7Card(
                  title = "Card header",
                  prettySwitch(
                    inputId = "show",
                    label = "Show Plot",
                    status = "danger"
                  ),
                  echarts4rOutput("network"),
                  footer = tagList(
                    f7Button(color = "blue", label = "My button", src = "https://www.google.com"),
                    f7Badge("Badge", color = "green")
                  )
                )
              )
            ),
            f7Tab(
              tabName = "Tab 3",
              icon = f7Icon("cloud_upload"),
              active = FALSE,
              f7Shadow(
                intensity = 10,
                hover = TRUE,
                f7Card(
                  title = "Card header",
                  prettyCheckboxGroup(
                    "variable",
                    "Variables to show:",
                    c("Cylinders" = "cyl",
                      "Transmission" = "am",
                      "Gears" = "gear"),
                    inline = TRUE,
                    status = "danger",
                    animation = "pulse"
                  ),
                  tableOutput("data"),
                  footer = tagList(
                    f7Button(color = "blue", label = "My button", src = "https://www.google.com"),
                    f7Badge("Badge", color = "green")
                  )
                )
              )
            )
          )
        )
      ),
      server = function(input, output, session) {

        # river plot
        dates <- reactive(seq.Date(Sys.Date() - 30, Sys.Date(), by = input$by))

        output$river <- renderEcharts4r({
          df <- data.frame(
            dates = dates(),
            apples = runif(length(dates())),
            bananas = runif(length(dates())),
            pears = runif(length(dates()))
          )

          df %>%
            e_charts(dates) %>%
            e_river(apples) %>%
            e_river(bananas) %>%
            e_river(pears) %>%
            e_tooltip(trigger = "axis") %>%
            e_title("River charts", "(Streamgraphs)") %>%
            e_theme("dark")
        })

        # network
        nodes <- reactive({
          data.frame(
            name = paste0(LETTERS, 1:300),
            value = rnorm(300, 10, 2),
            size = rnorm(300, 10, 2),
            grp = rep(c("grp1", "grp2", "grp3"), 100),
            stringsAsFactors = FALSE
          )
        })

        edges <- reactive({
          data.frame(
            source = sample(nodes()$name, 400, replace = TRUE),
            target = sample(nodes()$name, 400, replace = TRUE),
            stringsAsFactors = FALSE
          )
        })

        output$network <- renderEcharts4r({
          req(input$show)
          e_charts() %>%
            e_graph_gl() %>%
            e_graph_nodes(nodes(), name, value, size, grp) %>%
            e_graph_edges(edges(), source, target) %>%
            e_theme("dark")
        })

        # datatable
        output$data <- renderTable({
          mtcars[, c("mpg", input$variable), drop = FALSE]
        }, rownames = TRUE)

        # send the theme to javascript
        observe({
          session$sendCustomMessage(
            type = "ui-tweak",
            message = list(os = input$theme, skin = input$color)
          )
        })

      }
    )