---
title: "Improved Skins"
author: "David Granjon"
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{Improved Skins}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

```{r setup, include=FALSE}
library(shiny)
library(bslib)
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)
```

## A Real Time Skin Selector

`{bs4Dash}` has a new feature called the `skinSelector()`. This is a JavaScript based widget 
allowing the end user to change the app skin. There are 20 unique colors with 2 versions, light or dark. 
Note that the `dashboardControlbar()` is the perfect place to host the `skinSelector()`.

```{r skinSelector-code, eval=TRUE, echo=FALSE}
card(
  bs4Dash:::create_link_iframe(bs4Dash:::shinylive_links["inst/examples/vignettes-demos/skinSelector"]),
  full_screen = TRUE,
  style = "margin: 0 auto; float: none;"
)
```

## Fresh
[`{fresh}`](https://dreamrs.github.io/fresh/index.html) is developed by the 
[dreamRs](https://www.dreamrs.fr/) team. It is built on top of `{sass}`, which 
provides a solid R [API](https://github.com/rstudio/sass) to write SASS variables and compile 
into CSS. `{fresh}` captures most of the AdminLTE2 (as well as AdminLTE3 for Bootstrap 4) SASS 
variables to allow deep customization, hiding all the compilation burden under the hood.

`bs4dash_color()` and `bs4Dash_status()` provide an interface to all available AdminLTE colors and 
allow to overwrite the default. 
I strongly suggest to avoid setting the default green to blue, as it might become confusing. 
Instead, it is better to play with color palettes. `bs4dash_sidebar_light()` allows to re-style 
the sidebar component, `bs4dash_layout()` controls the main background color, `bs4dash_yiq()` fine tune the global
contrast and `bs4dash_vars()` offers deeper customization (navbar, ...). 
The fresh theme below is based on some dark theme color palettes. 

```{r fresh-code, eval=TRUE, echo=FALSE}
card(
  bs4Dash:::create_link_iframe(bs4Dash:::shinylive_links["inst/examples/vignettes-demos/fresh-theming"]),
  full_screen = TRUE,
  style = "margin: 0 auto; float: none;"
)
```