# Fresh themes

    library(fresh)

{fresh} allow to create custom themes to use in {shiny} applications, currently you can create themes to use with:

- shiny itself, with `shiny::fluidPage` or `shiny::navbarPage` or themes from Bootswatch
- {shinydashboard}: Shiny Dashboarding framework
- {bs4Dash}: Bootstrap 4 shinydashboard using AdminLTE3

## Create a theme

Use function `create_theme` to create a new theme, this function accept variables to set specific parameters of the theme. There’s 3 type of variables depending on which framework you use:

- `bs_vars_*` to create a shiny theme
- `adminlte_*` to create a shinydashboard theme
- `bs4dash_*` to create a bs4Dash theme

When using `bs_vars_*`, you can specify `theme` argument to use a Bootswatch template.

    create_theme(
      theme = "default",
      bs_vars_button(
        default_color = "#FFF",
        default_bg = "#112446",
        default_border = "#112446",
        border_radius_base = "15px"
      ),
      bs_vars_wells(
        bg = "#FFF",
        border = "#112446"
      )
    )

Here we modify `shiny::actionButton` appearance with `bs_vars_button` and appearance of `shiny::sidebarPanel` with `bs_vars_wells`.

Result looks like :

## Use a theme

There’s two way to use a newly created theme :

1. inline in the UI (useful to quickly visualize your theme)
2. using a CSS file (recommended)

### Inline

Don’t specify an output file and use result of `create_theme()` in `use_theme()` directly in your application :

    mytheme <- create_theme(
      theme = "default",
      bs_vars_navbar(
        default_bg = "#75b8d1",
        default_color = "#FFFFFF",
        default_link_color = "#FFFFFF",
        default_link_active_color = "#75b8d1",
        default_link_active_bg = "#FFFFFF",
        default_link_hover_color = "firebrick"
      ),
      output_file = NULL
    )

    navbarPage(
      title = "Custom navbar",
      header = tagList(
        use_theme(mytheme) # <-- use your theme
      ),
      tabPanel("Tab 1"),
      tabPanel("Tab 2")
    )

### File

When you create a theme, you can specify an output file :

    create_theme(
      theme = "default",
      ...,
      output_file = "my-custom-theme.css"
    )

Put the file `my-custom-theme.css` in the `www/` folder of your application, and reference it like that in your UI’s `fluidPage` or `navbarPage` :

    fluidPage(

      theme = "my-custom-theme.css",

      # ...
    )

    # or if using a navbar page
    navbarPage(

      title = "My application",
      theme = "mytheme.css",

      # ...
    )

In {shinydashboard} or {bs4Dash}, you can use `use_theme()` with a path inside `dashboardBody` or `bs4DashBody` :

    dashboardBody(
      use_theme("path/to/theme.css")
    )

    bs4DashBody(
      use_theme("path/to/theme.css")
    )

Note that the path must be in the `www/` folder of your application.