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.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:
= c(
colors 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
[se vería]
Este **.red[texto]** .white.bg-purple[manera]. _.orange[de la]_ siguiente .green
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
.
<- list(
extra_css ".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()