2.9 Creador de temas: XaringanThemer

2.9.1 Introducción

xaringanthemer es un paquete construido para facilitar la personalización de nuestras presentaciones sin necesidad de hacer uso de lenguaje CSS. Este paquete ofrece la posibilidad de modificar un amplio conjunto de argumentos para, de manera intuitiva y rápida, definir el estilo de nuestras diapositivas.

El primer paso consiste en descargar e instalar el paquete, para ello basta con ejecutar:

install.packages("xaringanthemer")

El siguiente paso es agregar el archivo ´xaringan-themer.css´ al encabezado del documento:

output:
  xaringan::moon_reader:
    css: xaringan-themer.css

Luego, en un chunk oculto justo después del ´knitr setup chunk´ debe cargar el paquete e ingresar dentro de alguna de las funciones de temas predefinidos de ´xaringanthemer´ los argumentos de diseño que desea establecer para su presentación.

Ejemplo:

```{r xaringan-themer, include=FALSE, warning=FALSE}
library(xaringanthemer)
style_mono_accent(
  base_color = "#1c5253",
  header_font_google = google_font("Josefin Sans"),
  text_font_google   = google_font("Montserrat", "300", "300i"),
  code_font_google   = google_font("Fira Mono")
)
```

A continuación se detalla este último paso y se presentan las opciones posibles.

2.9.2 Temas

xaringanthemer incluye una serie de funciones que definen diferentes estilos tematicos, dentro de las cuales podemos suministrar argumentos de diseño para personalizarlos.

Todas las funciones de estilo empiezan por el prefijo style_. El objetivo de cada función de estilo es configurar rápidamente una paleta de colores coordinada para las diapositivas basada en uno o dos colores iniciales. Los estilos basados en un color comienzan con style_mono_ y los estilos basados en dos colores comienzan con style_duo_. La forma en que se utilizan los colores iniciales se describe en la parte final del nombre de la función de estilo. Por ejemplo, style_mono_accent () usa un solo color como color de acento o contraste.

Si su paleta de colores usa más de dos colores, puede agregar colores adicionales con el argumento colors. Consulte la sección Colores para obtener más información.

2.9.2.1 `Mono`

style_mono_accent : Tema por defecto de xaringan con un solo color para acentuar elementos seleccionados (encabezados, texto en negrita, etc.).
style_mono_accent_inverse: Tema inverso por defecto de xaringan con un solo color para acentuar elementos seleccionados (encabezados, texto en negrita, etc.).
style_mono_dark : Un tema oscuro basado en un solo color.
style_mono_light : Un tema claro basado en un solo color.

2.9.2.2 `Duo`

style_duo : Un tema de dos colores complementarios basado en un color primario y otro secundario.
style_duo_accent : Tema por defecto de xaringan con dos colores para acentuar elementos seleccionados (encabezados, texto en negrita, etc.).
style_duo_accent_inverse: Tema inverso por defecto de xaringan con dos colores para acentuar elementos seleccionados (encabezados, texto en negrita, etc.).

2.9.2.3 `Solarized`

También hay dos temas basados en la paleta de colores solarizada, style_solarized_light () y style_solarized_dark (). Para ambos temas, se recomienda cambiar el tema de resaltado de sintaxis a solarized-light o solarized-dark.

output:
  xaringan::moon_reader:
    css: ["xaringan-themer.css"]
    nature:
      highlightStyle: solarized-dark
      highlightLines: true
      countIncrementalSlides: false

style_solarized_dark :
style_solarized_light :

2.9.3 Opciones de diseño

Las funciones tematicas mencionadas anteriormente son todas basadas en la función style_xaringan(). Si desea partir desde el tema por defecto de xaringan y hacerle algunas modificaciones entonces debería usar esa función.

Todos las opciones de diseño son configurables en todas las funciones tematicas. Para modificar alguna opción por defecto basta con definir el argumento apropiado dentro de la función tematica.

style_mono_accent(
  base_color = "#1c5253",
  header_font_google = google_font("Josefin Sans"),
  text_font_google   = google_font("Montserrat", "300", "300i"),
  code_font_google   = google_font("Fira Mono")
)

Para ver una descripción de todas las opciones configurables puede correr dentro de la consola de R:

vignette("template-variables", "xaringanthemer")

La siguiente tabla muestra los argumentos configurables, sus valores predeterminados en el tema estándar xaringanthemer, el elemento principal al que se le aplica la propiedad, y una breve descripción.

Por ejemplo, background_color por defecto establece la propiedad CSS background-color de la clase .remark-slide-content en #FFF.

Puede utilizar esta tabla para encontrar el argumento que le gustaría modificar y también para encontrar la clase o el elemento CSS asociados con un elemento de la plantilla en particular.

Tenga en cuenta que cada función tematica tiene valores especificos por defecto, sin embargo, para todos los temas usted puede modificarlos sobreescribiendo cualquiera de los argumentos aquí enlistados al momento de llamar la función.

Variable	Description	Element	CSS Property	Default	CSS Variable
`text_color`	Text Color	body		#000	`--text_color`
`header_color`	Header Color	h1, h2, h3		#000	`--header-color`
`background_color`	Slide Background Color	.remark-slide-content		#FFF	`--background-color`
`link_color`	Link Color	a, a > code		rgb(249, 38, 114)	`--link-color`
`text_bold_color`	Bold Text Color	strong		NULL	`--text-bold-color`
`text_slide_number_color`	Slide Number Color	.remark-slide-number		inverse_background_color
`padding`	Slide Padding in `top right [bottom left]` format	.remark-slide-content	padding	16px 64px 16px 64px
`background_image`	Background image applied to each and every slide. Set `title_slide_background_image = "none"` to remove the background image from the title slide	.remark-slide-content		NULL
`background_size`	Background image size, requires `background_image` to be set. If `background_image` is set, `background_size` will default to `cover` so the background fills the screen. If both `background_image` and `background_position` are set, will default to 100 percent	.remark-slide-content	background-size	NULL
`background_position`	Background image position, requires `background_image` to be set, and it is recommended to adjust `background_size`	.remark-slide-content	background-position	NULL
`code_highlight_color`	Code Line Highlight	.remark-code-line-highlighted		rgba(255,255,0,0.5)	`--code-highlight-color`
`code_inline_color`	Inline Code Color	.remark-inline-code		#000
`code_inline_background_color`	Inline Code Background Color	.remark-inline-code		NULL
`code_inline_font_size`	Inline Code Text Font Size	.remark-inline-code	font-size	1em	`--code-inline-font-size`
`inverse_background_color`	Inverse Background Color	.inverse		#272822	`--inverse-background-color`
`inverse_text_color`	Inverse Text Color	.inverse		#d6d6d6	`--inverse-text-color`
`inverse_text_shadow`	Enables Shadow on text of inverse slides	.inverse		FALSE
`inverse_header_color`	Inverse Header Color	.inverse h1, .inverse h2, .inverse h3		#f3f3f3	`--inverse-header-color`
`inverse_link_color`	Inverse Link Color	.inverse a, .inverse a > code		link_color	`--inverse-link-color`
`title_slide_text_color`	Title Slide Text Color	.title-slide		inverse_text_color	`--title-slide-text-color`
`title_slide_background_color`	Title Slide Background Color	.title-slide		inverse_background_color	`--title-slide-background-color`
`title_slide_background_image`	Title Slide Background Image URL	.title-slide		NULL
`title_slide_background_size`	Title Slide Background Image Size, defaults to “cover” if background image is set	.title-slide	background-size	NULL
`title_slide_background_position`	Title Slide Background Image Position	.title-slide	background-position	NULL
`footnote_color`	Footnote text color (if `NA`, then it will be the same color as `text_color`)	.footnote		NULL
`footnote_font_size`	Footnote font size	.footnote	font-size	0.9em
`footnote_position_bottom`	Footnote location from bottom of screen	.footnote	position	60px
`left_column_subtle_color`	Left Column Text (not last)	.left-column h2, .left-column h3		#777
`left_column_selected_color`	Left Column Current Selection	.left-column h2:last-of-type, .left-column h3:last-child		#000
`blockquote_left_border_color`	Blockquote Left Border Color	blockquote		lightgray
`table_border_color`	Table top/bottom border	table: border-top, border-bottom		#666
`table_row_border_color`	Table row inner bottom border	table thead th: border-bottom		#ddd
`table_row_even_background_color`	Table Even Row Background Color	thead, tfoot, tr:nth-child(even)		#eee
`base_font_size`	Base Font Size for All Slide Elements (must be `px`)	html		20px	`--base-font-size`
`text_font_size`	Slide Body Text Font Size	.remark-slide-content	font-size	1rem	`--text-font-size`
`header_h1_font_size`	h1 Header Text Font Size	.remark-slide-content h1	font-size	2.75rem	`--header-h1-font-size`
`header_h2_font_size`	h2 Header Text Font Size	.remark-slide-content h2	font-size	2.25rem	`--header-h2-font-size`
`header_h3_font_size`	h3 Header Text Font Size	.remark-slide-content h3	font-size	1.75rem	`--header-h3-font-size`
`header_background_auto`	Add background under slide title automatically for h1 header elements. If not enabled, use `class: header_background` to enable			FALSE
`header_background_color`	Background Color for h1 Header with Background	.remark-slide-content h1		header_color	`--header-background-color`
`header_background_text_color`	Text Color for h1 Header with Background	.remark-slide-content h1		background_color	`--header-background-text-color`
`header_background_padding`	Padding for h1 Header with Background	.remark-slide-content h1	padding	NULL
`header_background_content_padding_top`	Top Padding for Content in Slide with Header with Background	.remark-slide-content		7rem
`header_background_ignore_classes`	Slide Classes Where Header with Background will not be Applied	.remark-slide-content		c(‘normal’, ‘inverse’, ‘title’, ‘middle’, ‘bottom’)
`text_slide_number_font_size`	Slide Number Text Font Size	.remark-slide-number	font-size	0.9rem
`text_font_google`	Use `google_font()` to specify body font	body		NULL
`text_font_family`	Body Text Font Family (xaringan default is `'Droid Serif'`)	body		xaringanthemer_font_default(“text_font_family”)	`--text-font-family`
`text_font_weight`	Body Text Font Weight	body	font-weight	xaringanthemer_font_default(“text_font_weight”)
`text_bold_font_weight`	Body Bold Text Font Weight	strong		bold
`text_font_url`	Body Text Font URL(s)	(import?) url()		xaringanthemer_font_default(“text_font_url”)
`text_font_family_fallback`	Body Text Font Fallbacks	body		xaringanthemer_font_default(“text_font_family_fallback”)	`--text-font-family-fallback`
`text_font_base`	Body Text Base Font (Total Failure Fallback)	body		sans-serif	`--text-font-base`
`header_font_google`	Use `google_font()` to specify header font	body		NULL
`header_font_family`	Header Font Family (xaringan default is `'Yanone Kaffeesatz'`)	h1, h2, h3		xaringanthemer_font_default(“header_font_family”)	`--header-font-family`
`header_font_weight`	Header Font Weight	h1, h2, h3	font-weight	xaringanthemer_font_default(“header_font_weight”)
`header_font_family_fallback`	Header Font Family Fallback	h1, h2, h3		Georgia, serif	`--header-font-family-fallback`
`header_font_url`	Header Font URL	(import?) url		xaringanthemer_font_default(“header_font_url”)
`code_font_google`	Use `google_font()` to specify code font	body		NULL
`code_font_family`	Code Font Family	.remark-code, .remark-inline-code		xaringanthemer_font_default(“code_font_family”)	`--code-font-family`
`code_font_size`	Code Text Font Size	.remark-inline	font-size	0.9rem	`--code-font-size`
`code_font_url`	Code Font URL	(import?) url		xaringanthemer_font_default(“code_font_url”)
`code_font_family_fallback`	Code Font Fallback	.remark-code, .remark-inline-code		xaringanthemer_font_default(“code_font_family_fallback”)
`link_decoration`	Text decoration of links	a, a > code	text-decoration	none

2.9.4 Fuentes

Las fuentes predeterminadas de encabezado y cuerpo que se utilizan en xaringanthemer son diferentes de las fuentes predeterminadas de xaringan. En xaringanthemer, Cabin se usa para los títulos y Noto Sans para el cuerpo del texto.

Estas fuentes son más fáciles de leer en las pantallas y a distancia durante las presentaciones, y admiten una amplia variedad de idiomas. Otra razón para el cambio es que la fuente de cuerpo predeterminada xaringan, Droid Serif, ya no se incluye oficialmente en Google Fonts.

Si desea utilizar las fuentes del tema xaringan predeterminado, puede utilizar los siguientes argumentos en su función de estilo.

style_xaringan(
  text_font_family = "Droid Serif",
  text_font_url = "https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic",
  header_font_google = google_font("Yanone Kaffeesatz")
)

2.9.4.1 Fuentes personalizadas

xaringanthemer facilita el uso de Google Fonts en sus presentaciones (siempre que tenga una conexión a Internet durante la presentación) o puede también especificar localmente sus archivos de fuentes.

Para usar Google Fonts, configure los argumentos <type>_font_google (text_font_google, header_font_google, code_font_google) usando como ayuda la función google_font().

style_mono_light(
  header_font_google = google_font("Josefin Slab", "600"),
  text_font_google   = google_font("Work Sans", "300", "300i"),
  code_font_google   = google_font("IBM Plex Mono")
)

Para ver como usar la función google_font() puede usar la documentación de guía ejecutando ?google_font() en la consola.

Para utilizar una fuente alojada fuera de Google Fonts, debe proporcionar tanto <type>_font_family como <type>_font_url. Por ejemplo, suponga que desea utilizar una fuente de código con ligaduras para sus fragmentos de código, como Fira Code, que se declararía con ´code_font_family´. La sección de Browser support de Fira Code README proporciona una URL CSS para usar con una sentencia @import que puede usar con el argumento code_font_url.

style_solarized_dark(
  code_font_family = "Fira Code",
  code_font_url = "https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/fira_code.css"
)

2.9.4.2 Como usar la fuente Ancizar - UNAL

2.9.4.3 Usar fuentes adicionales

Si desea usar fuentes adicionales para usar en definiciones CSS personalizadas, use el argumento extra_fonts para pasar una lista de URL o google_font(). Tenga en cuenta que para usar las fuentes importadas con extra_fonts debe añadir definiciones CSS propias a través de, por ejemplo, extra_css().

style_mono_light(
  extra_fonts = list(
    google_font("Sofia"),
    # Young Serif by upload.fr
    "https://cdn.jsdelivr.net/gh/uplaod/YoungSerif/fonts/webfonts/fontface.css",
  ),
  extra_css = list(
    ".title-slide h2" = list("font-family" = "Sofia"),
    blockquote = list("font-family" = "youngserifregular")
  )
)

2.9.5 Colores

Diseñando su tema para la presentación, es posible que desee incluir colores adicionales en su paleta de colores deseada además de los utilizados en los colores de acento o contraste de los estilos mono y duotone.

Las funciones style*() en xaringanthemer incluyen el argumento colors que le permite definir rápidamente colores adicionales para usar en sus diapositivas. Este argumento recibe un vector de colores con nombres asignados:

colors = c(
  red = "#f34213",
  purple = "#3e2f5b",
  orange = "#ff8811",
  green = "#136f63",
  white = "#FFFFFF",
)

De esta manera la función crea clases CSS a partir del código del color y del nombre asignado a este, por ejemplo, .red[texto con color], mostrará dicho texto con el color #f34213, o .bg-red[texto con color de fondo], mostrará el texto con fondo rojo.

Si usa CSS personalizado en sus diapositivas, el nombre del color también se almacena en una variable CSS que puede utilizar en su archivo de estilo, por ejemplo, var(--red).

Por ejemplo, el siguiente texto dentro de una diapositiva

Este **.red[texto]** .white.bg-purple[se vería] 
_.orange[de la]_ siguiente .green[manera].

se vería como:

Este texto se vería de la siguiente manera.

Tenga en cuenta que los nombres definidos en colors deben ser nombres CSS validos, por ejemplo, no deben tener espacios en medio, es decir, "purple-light" funcionará, pero "purple light" no lo hará.

2.9.6 Ajustes CSS personalizados

También puede agregar clases CSS personalizadas usando el argumento extra_css en la función tematica. Este argumento toma una lista con definiciones CSS, cada una de las cuales recibe una lista de propiedades CSS de la forma: propiedad de CSS = valor.

extra_css <- list(
  ".small" = list("font-size" = "90%"),
  ".full-width" = list(display = "flex",
                       width   = "100%",
                       flex    = "1 1 auto")
)

Si prefiere mantener sus definiciones CSS adicionales en un archivo separado, puede llamar a style_extra_css() por separado. Solo asegúrese de incluir su nuevo archivo CSS en la lista de archivos aplicados en el encabezado YAML.

style_extra_css(css = extra_css, outfile = "custom.css")

/* Extra CSS */
.small {
  font-size: 90%;
}
.full-width {
  display: flex;
  width: 100%;
  flex: 1 1 auto;
}

Esto es especialmente útil cuando se desea definir clases auxiliares para trabajar con la sintaxis remark.js: .class[]. Usando el ejemplo anterior, podríamos agregar texto más pequeño dentro de una diapositiva escribiendo, .small[texto con otro tamaño de fuente].

2.9.7 Temas y ggplot

xaringanthemer incluso proporciona un tema para ggplot2 con theme_xaringan() que usa los colores y fuentes del tema de la presentación. Construido sobre el paquete showtext y diseñado para funcionar sin problemas con Google Fonts.

También se proporcionan escalas de color y relleno para hacer coincidir escalas de color secuenciales en función del color primario utilizado en las diapositivas. Consulte ?Scale_xaringan para obtener más detalles.

Se pueden encontrar más detalles y ejemplos en “ggplot2-themes”.

library(ggplot2)
ggplot(diamonds) +
  aes(cut, fill = cut) +
  geom_bar(show.legend = FALSE) +
  labs(
    x = "Cut",
    y = "Count",
    title = "A Fancy diamonds Plot"
  ) +
  theme_xaringan(background_color = "#FFFFFF") +
  scale_xaringan_fill_discrete()