Also fixed an issue with `outfile` argument not getting passed back to write_xaringan_theme!tags/v0.1.1
| export(mono_light) | export(mono_light) | ||||
| export(solarized_dark) | export(solarized_dark) | ||||
| export(solarized_light) | export(solarized_light) | ||||
| export(write_extra_css) | |||||
| export(write_xaringan_theme) | export(write_xaringan_theme) | ||||
| importFrom(grDevices,col2rgb) | importFrom(grDevices,col2rgb) | ||||
| importFrom(grDevices,hsv) | importFrom(grDevices,hsv) |
| #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | ||||
| #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | ||||
| #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | ||||
| #' @param outfile Customized xaringan CSS output file name | |||||
| #' @template extra_css | |||||
| #' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css" | |||||
| #' @template duo | #' @template duo | ||||
| #' @family Duotone themes | #' @family Duotone themes | ||||
| #' @export | #' @export | ||||
| code_font_family = "'Source Code Pro'", | code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | code_font_family_fallback = "'Lucida Console', Monaco", | ||||
| extra_css = NULL, | |||||
| outfile = "xaringan-themer.css" | outfile = "xaringan-themer.css" | ||||
| ) { | ) { | ||||
| # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R | # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R |
| #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | ||||
| #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | ||||
| #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | ||||
| #' @param outfile Customized xaringan CSS output file name | |||||
| #' @template extra_css | |||||
| #' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css" | |||||
| #' @template duo_accent | #' @template duo_accent | ||||
| #' @family Duotone themes | #' @family Duotone themes | ||||
| #' @export | #' @export | ||||
| code_font_family = "'Source Code Pro'", | code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | code_font_family_fallback = "'Lucida Console', Monaco", | ||||
| extra_css = NULL, | |||||
| outfile = "xaringan-themer.css" | outfile = "xaringan-themer.css" | ||||
| ) { | ) { | ||||
| # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R | # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R |
| #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | ||||
| #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | ||||
| #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | ||||
| #' @param outfile Customized xaringan CSS output file name | |||||
| #' @template extra_css | |||||
| #' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css" | |||||
| #' @template duo_accent_inverse | #' @template duo_accent_inverse | ||||
| #' @family Duotone themes | #' @family Duotone themes | ||||
| #' @export | #' @export | ||||
| code_font_family = "'Source Code Pro'", | code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | code_font_family_fallback = "'Lucida Console', Monaco", | ||||
| extra_css = NULL, | |||||
| outfile = "xaringan-themer.css" | outfile = "xaringan-themer.css" | ||||
| ) { | ) { | ||||
| # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R | # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R |
| #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | ||||
| #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | ||||
| #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | ||||
| #' @param outfile Customized xaringan CSS output file name | |||||
| #' @template extra_css | |||||
| #' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css" | |||||
| #' @template mono_accent | #' @template mono_accent | ||||
| #' @family Monotone themes | #' @family Monotone themes | ||||
| #' @export | #' @export | ||||
| code_font_family = "'Source Code Pro'", | code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | code_font_family_fallback = "'Lucida Console', Monaco", | ||||
| extra_css = NULL, | |||||
| outfile = "xaringan-themer.css" | outfile = "xaringan-themer.css" | ||||
| ) { | ) { | ||||
| # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R | # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R |
| #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | ||||
| #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | ||||
| #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | ||||
| #' @param outfile Customized xaringan CSS output file name | |||||
| #' @template extra_css | |||||
| #' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css" | |||||
| #' @template mono_accent_inverse | #' @template mono_accent_inverse | ||||
| #' @family Monotone themes | #' @family Monotone themes | ||||
| #' @export | #' @export | ||||
| code_font_family = "'Source Code Pro'", | code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | code_font_family_fallback = "'Lucida Console', Monaco", | ||||
| extra_css = NULL, | |||||
| outfile = "xaringan-themer.css" | outfile = "xaringan-themer.css" | ||||
| ) { | ) { | ||||
| # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R | # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R |
| #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | ||||
| #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | ||||
| #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | ||||
| #' @param outfile Customized xaringan CSS output file name | |||||
| #' @template extra_css | |||||
| #' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css" | |||||
| #' @template mono_dark | #' @template mono_dark | ||||
| #' @family Monotone themes | #' @family Monotone themes | ||||
| #' @export | #' @export | ||||
| code_font_family = "'Source Code Pro'", | code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | code_font_family_fallback = "'Lucida Console', Monaco", | ||||
| extra_css = NULL, | |||||
| outfile = "xaringan-themer.css" | outfile = "xaringan-themer.css" | ||||
| ) { | ) { | ||||
| # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R | # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R |
| #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | ||||
| #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | ||||
| #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | ||||
| #' @param outfile Customized xaringan CSS output file name | |||||
| #' @template extra_css | |||||
| #' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css" | |||||
| #' @template mono_light | #' @template mono_light | ||||
| #' @family Monotone themes | #' @family Monotone themes | ||||
| #' @export | #' @export | ||||
| code_font_family = "'Source Code Pro'", | code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | code_font_family_fallback = "'Lucida Console', Monaco", | ||||
| extra_css = NULL, | |||||
| outfile = "xaringan-themer.css" | outfile = "xaringan-themer.css" | ||||
| ) { | ) { | ||||
| # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R | # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R |
| #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | ||||
| #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | ||||
| #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | ||||
| #' @param outfile Customized xaringan CSS output file name | |||||
| #' @template extra_css | |||||
| #' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css" | |||||
| #' @template solarized_dark | #' @template solarized_dark | ||||
| #' @family Solarized themes | #' @family Solarized themes | ||||
| #' @export | #' @export | ||||
| code_font_family = "'Source Code Pro'", | code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | code_font_family_fallback = "'Lucida Console', Monaco", | ||||
| extra_css = NULL, | |||||
| outfile = "xaringan-themer.css" | outfile = "xaringan-themer.css" | ||||
| ) { | ) { | ||||
| # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R | # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R |
| #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | ||||
| #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | ||||
| #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | ||||
| #' @param outfile Customized xaringan CSS output file name | |||||
| #' @template extra_css | |||||
| #' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css" | |||||
| #' @template solarized_light | #' @template solarized_light | ||||
| #' @family Solarized themes | #' @family Solarized themes | ||||
| #' @export | #' @export | ||||
| code_font_family = "'Source Code Pro'", | code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | code_font_family_fallback = "'Lucida Console', Monaco", | ||||
| extra_css = NULL, | |||||
| outfile = "xaringan-themer.css" | outfile = "xaringan-themer.css" | ||||
| ) { | ) { | ||||
| # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R | # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R |
| call_write_xaringan_theme <- function() { | call_write_xaringan_theme <- function() { | ||||
| paste0("write_xaringan_theme(", | paste0("write_xaringan_theme(", | ||||
| paste(template_variables$variable, collapse = ", "), | paste(template_variables$variable, collapse = ", "), | ||||
| ", extra_css, outfile", | |||||
| ")") | ")") | ||||
| } | } | ||||
| #' Write Extra CSS arguments | |||||
| #' | |||||
| #' Manually adds css elements to target `outfile`. | |||||
| #' | |||||
| #' @section css list: | |||||
| #' The `css` input must be a named list of css properties and values within a | |||||
| #' named list of class identifiers, for example | |||||
| #' `list(".class-id" = list("css-property" = "value"))`. | |||||
| #' | |||||
| #' @param css A named list of CSS definitions each containing a named list | |||||
| #' of CSS property-value pairs, i.e. | |||||
| #' `list(".class-id" = list("css-property" = "value"))` | |||||
| #' @inheritParams write_xaringan_theme | |||||
| #' @export | |||||
| write_extra_css <- function(css, outfile = "xaringan-themer.css") { | |||||
| cat("\n\n/* Extra CSS */", list2css(css), file = outfile, | |||||
| append = TRUE, sep = "\n") | |||||
| } | |||||
| #' @inheritParams write_extra_css | |||||
| #' @keywords internal | |||||
| list2css <- function(css) { | |||||
| `%.%` <- function(x, y) paste0(x, y) | |||||
| error <- NULL | |||||
| if (is.null(names(css))) { | |||||
| stop("All elements in `css` list must be named", call. = FALSE) | |||||
| } | |||||
| if (purrr::vec_depth(css) != 3) { | |||||
| stop("`css` list must be a named list within a named list, e.g.:\n", | |||||
| ' list(".class-id" = list("css-property" = "value"))') | |||||
| } | |||||
| if (any(names(css) == "")) { | |||||
| not_named <- which(names(css) == "") | |||||
| if (length(not_named) > 1) stop(call. = FALSE, | |||||
| "All elements in `css` list must be named. Items ", | |||||
| paste(not_named, collapse = ", "), " are unnamed." | |||||
| ) else stop(call. = FALSE, | |||||
| "All elements in `css` list must be named. Item ", not_named, " is not named.") | |||||
| } | |||||
| child_unnamed <- purrr::map_lgl(purrr::map(css, ~ {is.null(names(.)) || names(.) == ""}), ~ any(.)) | |||||
| if (any(child_unnamed)) { | |||||
| has_unnamed <- names(css)[child_unnamed] | |||||
| msg <- paste( | |||||
| "All properties of elements in `css` list must be named.", | |||||
| if (length(has_unnamed) > 1) "Elements" else "Element", | |||||
| paste(has_unnamed, collapse = ", "), | |||||
| if (length(has_unnamed) > 1) "have" else "has", | |||||
| "unnamed property or properties." | |||||
| ) | |||||
| stop(msg, call. = FALSE) | |||||
| } | |||||
| purrr::map_chr(names(css), function(el) { | |||||
| paste(sep = "\n", | |||||
| el %.% " {", | |||||
| paste( | |||||
| purrr::map_chr(names(css[[el]]), function(prop) { | |||||
| " " %.% prop %.% ': ' %.% css[[el]][[prop]] %.% ';' | |||||
| }), | |||||
| collapse = "\n" | |||||
| ), | |||||
| "}" | |||||
| ) | |||||
| }) | |||||
| } |
| #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | #' @param code_font_family Code Font Family, defaults to 'Source Code Pro' | ||||
| #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 | ||||
| #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco | ||||
| #' @param outfile Customized xaringan CSS output file name | |||||
| #' @template extra_css | |||||
| #' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css" | |||||
| #' @template write_xaringan_theme | #' @template write_xaringan_theme | ||||
| #' @export | #' @export | ||||
| write_xaringan_theme <- function( | write_xaringan_theme <- function( | ||||
| code_font_family = "'Source Code Pro'", | code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | code_font_family_fallback = "'Lucida Console', Monaco", | ||||
| extra_css = NULL, | |||||
| outfile = "xaringan-themer.css" | outfile = "xaringan-themer.css" | ||||
| ) { | ) { | ||||
| # Make sure font names are wrapped in quotes if they have spaces | # Make sure font names are wrapped in quotes if they have spaces | ||||
| template <- paste(template, collapse = "\n") | template <- paste(template, collapse = "\n") | ||||
| x <- glue::glue(template, .open = "{{", .close = "}}") | x <- glue::glue(template, .open = "{{", .close = "}}") | ||||
| cat(x, file = outfile) | cat(x, file = outfile) | ||||
| if (!is.null(extra_css)) write_extra_css(extra_css, outfile) | |||||
| outfile | outfile | ||||
| } | } |
| fig.path = "man/figures/README-", | fig.path = "man/figures/README-", | ||||
| out.width = "100%" | out.width = "100%" | ||||
| ) | ) | ||||
| library(xaringanthemer) | |||||
| ``` | ``` | ||||
| # xaringanthemer | # xaringanthemer | ||||
| [xaringan]: https://github.com/yihui/xaringan | [xaringan]: https://github.com/yihui/xaringan | ||||
| [remarkjs]: https://github.com/gnab/remark | |||||
| Easily style your [xaringan] slides with **xaringanthemer**. | Easily style your [xaringan] slides with **xaringanthemer**. | ||||
| countIncrementalSlides: false | countIncrementalSlides: false | ||||
| ``` | ``` | ||||
| ### Fully Customized | |||||
| ## Theme Settings | |||||
| The theme functions listed above are just wrappers around the central function of this package, `write_xaringan_theme()`. | The theme functions listed above are just wrappers around the central function of this package, `write_xaringan_theme()`. | ||||
| If you want to start from the default **xaringan** theme and make a few modifications, start there. | If you want to start from the default **xaringan** theme and make a few modifications, start there. | ||||
| cat(paste0("- `", tvv[grepl("^title_slide_", tvv)], "`"), sep = "\n") | cat(paste0("- `", tvv[grepl("^title_slide_", tvv)], "`"), sep = "\n") | ||||
| ``` | ``` | ||||
| ## Adding Custom CSS | |||||
| You can also add custom CSS classes using the `extra_css` argument in the theme functions. | |||||
| This argument takes a named list of CSS definitions each containing a named list of CSS property-value pairs. | |||||
| ```r | |||||
| extra_css <- list( | |||||
| ".red" = list(color = "red"), | |||||
| ".small" = list("font-size" = "90%"), | |||||
| ".full-width" = list( | |||||
| display = "flex", | |||||
| width = "100%", | |||||
| flex = "1 1 auto" | |||||
| ) | |||||
| ) | |||||
| ``` | |||||
| If you would rather keep your additional css definitions in a separate file, you can call `write_extra_css()` separately. | |||||
| Just be sure to include your new CSS file in the list of applied files in your YAML header. | |||||
| ```r | |||||
| write_extra_css(css = extra_css, outfile = "custom.css") | |||||
| ``` | |||||
| ```{r results='asis', echo=FALSE} | |||||
| extra_css <- list( | |||||
| ".red" = list(color = "red"), | |||||
| ".small" = list("font-size" = "90%"), | |||||
| ".full-width" = list( | |||||
| display = "flex", | |||||
| width = "100%", | |||||
| flex = "1 1 auto" | |||||
| ) | |||||
| ) | |||||
| cat( | |||||
| "\n```css", | |||||
| "/* Extra CSS */", | |||||
| xaringanthemer:::list2css(extra_css), | |||||
| "```", | |||||
| sep = "\n" | |||||
| ) | |||||
| ``` | |||||
| This is most helpful when wanting to define helper classes to work with the [remark.js][remarkjs] `.class[]` syntax. | |||||
| Using the above example, we could color text red `.red[like this]` or write `.small[in smaller font size]`. | |||||
| ## Fonts | ## Fonts | ||||
| [google-fonts]: https://fonts.google.com | [google-fonts]: https://fonts.google.com |
| - [Monotone](#monotone) | - [Monotone](#monotone) | ||||
| - [Duotone](#duotone) | - [Duotone](#duotone) | ||||
| - [Solarized](#solarized) | - [Solarized](#solarized) | ||||
| - [Fully Customized](#fully-customized) | |||||
| - [Theme Settings](#theme-settings) | |||||
| - [Adding Custom CSS](#adding-custom-css) | |||||
| - [Fonts](#fonts) | - [Fonts](#fonts) | ||||
| ## Installation | ## Installation | ||||
| countIncrementalSlides: false | countIncrementalSlides: false | ||||
| ``` | ``` | ||||
| ### Fully Customized | |||||
| ## Theme Settings | |||||
| The theme functions listed above are just wrappers around the central | The theme functions listed above are just wrappers around the central | ||||
| function of this package, `write_xaringan_theme()`. If you want to start | function of this package, `write_xaringan_theme()`. If you want to start | ||||
| - `title_slide_background_color` | - `title_slide_background_color` | ||||
| - `title_slide_background_image` | - `title_slide_background_image` | ||||
| ## Adding Custom CSS | |||||
| You can also add custom CSS classes using the `extra_css` argument in | |||||
| the theme functions. This argument takes a named list of CSS definitions | |||||
| each containing a named list of CSS property-value pairs. | |||||
| ``` r | |||||
| extra_css <- list( | |||||
| ".red" = list(color = "red"), | |||||
| ".small" = list("font-size" = "90%"), | |||||
| ".full-width" = list( | |||||
| display = "flex", | |||||
| width = "100%", | |||||
| flex = "1 1 auto" | |||||
| ) | |||||
| ) | |||||
| ``` | |||||
| If you would rather keep your additional css definitions in a separate | |||||
| file, you can call `write_extra_css()` separately. Just be sure to | |||||
| include your new CSS file in the list of applied files in your YAML | |||||
| header. | |||||
| ``` r | |||||
| write_extra_css(css = extra_css, outfile = "custom.css") | |||||
| ``` | |||||
| ``` css | |||||
| /* Extra CSS */ | |||||
| .red { | |||||
| color: red; | |||||
| } | |||||
| .small { | |||||
| font-size: 90%; | |||||
| } | |||||
| .full-width { | |||||
| display: flex; | |||||
| width: 100%; | |||||
| flex: 1 1 auto; | |||||
| } | |||||
| ``` | |||||
| This is most helpful when wanting to define helper classes to work with | |||||
| the [remark.js](https://github.com/gnab/remark) `.class[]` syntax. Using | |||||
| the above example, we could color text red `.red[like this]` or write | |||||
| `.small[in smaller font size]`. | |||||
| ## Fonts | ## Fonts | ||||
| Yihui picked out great fonts for the default **xaringan** theme, but | Yihui picked out great fonts for the default **xaringan** theme, but |
| as.character( | as.character( | ||||
| glue::glue_data( | glue::glue_data( | ||||
| tv, "#' @param {variable} {description}, defaults to {stringr::str_replace_all(default, '[{{}}]', '`')}")) %,% | tv, "#' @param {variable} {description}, defaults to {stringr::str_replace_all(default, '[{{}}]', '`')}")) %,% | ||||
| "#' @param outfile Customized xaringan CSS output file name" %,% | |||||
| "#' @template extra_css" %,% | |||||
| "#' @param outfile Customized xaringan CSS output file name, default is \"xaringan-themer.css\"" %,% | |||||
| c(...) %,% | c(...) %,% | ||||
| glue::glue("{f_name} <- function(") %,% | glue::glue("{f_name} <- function(") %,% | ||||
| as.character(glue::glue_data( | as.character(glue::glue_data( | ||||
| tv, " {variable} = {ifelse(!stringr::str_detect(default, '^[{].+[}]$'), paste0('\"', default, '\"'), stringr::str_replace_all(default, '[{}]', ''))},")) %,% | tv, " {variable} = {ifelse(!stringr::str_detect(default, '^[{].+[}]$'), paste0('\"', default, '\"'), stringr::str_replace_all(default, '[{}]', ''))},")) %,% | ||||
| " extra_css = NULL," %,% | |||||
| " outfile = \"xaringan-themer.css\"" %,% | " outfile = \"xaringan-themer.css\"" %,% | ||||
| ") {" | ") {" | ||||
| if (!is.null(body)) x <- c(x, body, "}") | if (!is.null(body)) x <- c(x, body, "}") |
| template <- paste(template, collapse = "\n") | template <- paste(template, collapse = "\n") | ||||
| x <- glue::glue(template, .open = "{{", .close = "}}") | x <- glue::glue(template, .open = "{{", .close = "}}") | ||||
| cat(x, file = outfile) | cat(x, file = outfile) | ||||
| if (!is.null(extra_css)) write_extra_css(extra_css, outfile) | |||||
| outfile | outfile |
| #' @param extra_css A named list of CSS definitions each containing a named list | |||||
| #' of CSS property-value pairs, i.e. | |||||
| #' `list(".class-id" = list("css-property" = "value"))` |
| header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | ||||
| code_font_google = NULL, code_font_family = "'Source Code Pro'", | code_font_google = NULL, code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | |||||
| code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL, | |||||
| outfile = "xaringan-themer.css") | outfile = "xaringan-themer.css") | ||||
| } | } | ||||
| \arguments{ | \arguments{ | ||||
| \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | ||||
| \item{outfile}{Customized xaringan CSS output file name} | |||||
| \item{extra_css}{A named list of CSS definitions each containing a named list | |||||
| of CSS property-value pairs, i.e. | |||||
| `list(".class-id" = list("css-property" = "value"))`} | |||||
| \item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"} | |||||
| } | } | ||||
| \description{ | \description{ | ||||
| A duotone theme designed to work well with two complementary | A duotone theme designed to work well with two complementary |
| header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | ||||
| code_font_google = NULL, code_font_family = "'Source Code Pro'", | code_font_google = NULL, code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | |||||
| code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL, | |||||
| outfile = "xaringan-themer.css") | outfile = "xaringan-themer.css") | ||||
| } | } | ||||
| \arguments{ | \arguments{ | ||||
| \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | ||||
| \item{outfile}{Customized xaringan CSS output file name} | |||||
| \item{extra_css}{A named list of CSS definitions each containing a named list | |||||
| of CSS property-value pairs, i.e. | |||||
| `list(".class-id" = list("css-property" = "value"))`} | |||||
| \item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"} | |||||
| } | } | ||||
| \description{ | \description{ | ||||
| An default xaringan theme with a two colors used for color | An default xaringan theme with a two colors used for color |
| header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | ||||
| code_font_google = NULL, code_font_family = "'Source Code Pro'", | code_font_google = NULL, code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | |||||
| code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL, | |||||
| outfile = "xaringan-themer.css") | outfile = "xaringan-themer.css") | ||||
| } | } | ||||
| \arguments{ | \arguments{ | ||||
| \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | ||||
| \item{outfile}{Customized xaringan CSS output file name} | |||||
| \item{extra_css}{A named list of CSS definitions each containing a named list | |||||
| of CSS property-value pairs, i.e. | |||||
| `list(".class-id" = list("css-property" = "value"))`} | |||||
| \item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"} | |||||
| } | } | ||||
| \description{ | \description{ | ||||
| An "inverted" default xaringan theme with a two colors used | An "inverted" default xaringan theme with a two colors used |
| header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | ||||
| code_font_google = NULL, code_font_family = "'Source Code Pro'", | code_font_google = NULL, code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | |||||
| code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL, | |||||
| outfile = "xaringan-themer.css") | outfile = "xaringan-themer.css") | ||||
| } | } | ||||
| \arguments{ | \arguments{ | ||||
| \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | ||||
| \item{outfile}{Customized xaringan CSS output file name} | |||||
| \item{extra_css}{A named list of CSS definitions each containing a named list | |||||
| of CSS property-value pairs, i.e. | |||||
| `list(".class-id" = list("css-property" = "value"))`} | |||||
| \item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"} | |||||
| } | } | ||||
| \description{ | \description{ | ||||
| The default xaringan theme with a single color used for color | The default xaringan theme with a single color used for color |
| header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | ||||
| code_font_google = NULL, code_font_family = "'Source Code Pro'", | code_font_google = NULL, code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | |||||
| code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL, | |||||
| outfile = "xaringan-themer.css") | outfile = "xaringan-themer.css") | ||||
| } | } | ||||
| \arguments{ | \arguments{ | ||||
| \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | ||||
| \item{outfile}{Customized xaringan CSS output file name} | |||||
| \item{extra_css}{A named list of CSS definitions each containing a named list | |||||
| of CSS property-value pairs, i.e. | |||||
| `list(".class-id" = list("css-property" = "value"))`} | |||||
| \item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"} | |||||
| } | } | ||||
| \description{ | \description{ | ||||
| An "inverted" default xaringan theme with a single color used | An "inverted" default xaringan theme with a single color used |
| header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | ||||
| code_font_google = NULL, code_font_family = "'Source Code Pro'", | code_font_google = NULL, code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | |||||
| code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL, | |||||
| outfile = "xaringan-themer.css") | outfile = "xaringan-themer.css") | ||||
| } | } | ||||
| \arguments{ | \arguments{ | ||||
| \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | ||||
| \item{outfile}{Customized xaringan CSS output file name} | |||||
| \item{extra_css}{A named list of CSS definitions each containing a named list | |||||
| of CSS property-value pairs, i.e. | |||||
| `list(".class-id" = list("css-property" = "value"))`} | |||||
| \item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"} | |||||
| } | } | ||||
| \description{ | \description{ | ||||
| A dark monotone theme based around a single color. | A dark monotone theme based around a single color. |
| header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | ||||
| code_font_google = NULL, code_font_family = "'Source Code Pro'", | code_font_google = NULL, code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | |||||
| code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL, | |||||
| outfile = "xaringan-themer.css") | outfile = "xaringan-themer.css") | ||||
| } | } | ||||
| \arguments{ | \arguments{ | ||||
| \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | ||||
| \item{outfile}{Customized xaringan CSS output file name} | |||||
| \item{extra_css}{A named list of CSS definitions each containing a named list | |||||
| of CSS property-value pairs, i.e. | |||||
| `list(".class-id" = list("css-property" = "value"))`} | |||||
| \item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"} | |||||
| } | } | ||||
| \description{ | \description{ | ||||
| A light monotone theme based around a single color. | A light monotone theme based around a single color. |
| header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | ||||
| code_font_google = NULL, code_font_family = "'Source Code Pro'", | code_font_google = NULL, code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | |||||
| code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL, | |||||
| outfile = "xaringan-themer.css") | outfile = "xaringan-themer.css") | ||||
| } | } | ||||
| \arguments{ | \arguments{ | ||||
| \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | ||||
| \item{outfile}{Customized xaringan CSS output file name} | |||||
| \item{extra_css}{A named list of CSS definitions each containing a named list | |||||
| of CSS property-value pairs, i.e. | |||||
| `list(".class-id" = list("css-property" = "value"))`} | |||||
| \item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"} | |||||
| } | } | ||||
| \description{ | \description{ | ||||
| A dark theme based around on the solarized color scheme. | A dark theme based around on the solarized color scheme. |
| header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | ||||
| code_font_google = NULL, code_font_family = "'Source Code Pro'", | code_font_google = NULL, code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | |||||
| code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL, | |||||
| outfile = "xaringan-themer.css") | outfile = "xaringan-themer.css") | ||||
| } | } | ||||
| \arguments{ | \arguments{ | ||||
| \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | ||||
| \item{outfile}{Customized xaringan CSS output file name} | |||||
| \item{extra_css}{A named list of CSS definitions each containing a named list | |||||
| of CSS property-value pairs, i.e. | |||||
| `list(".class-id" = list("css-property" = "value"))`} | |||||
| \item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"} | |||||
| } | } | ||||
| \description{ | \description{ | ||||
| A light theme based around on the solarized color scheme. | A light theme based around on the solarized color scheme. |
| % Generated by roxygen2: do not edit by hand | |||||
| % Please edit documentation in R/write_extra_css.R | |||||
| \name{write_extra_css} | |||||
| \alias{write_extra_css} | |||||
| \title{Write Extra CSS arguments} | |||||
| \usage{ | |||||
| write_extra_css(css, outfile = "xaringan-themer.css") | |||||
| } | |||||
| \arguments{ | |||||
| \item{css}{A named list of CSS definitions each containing a named list | |||||
| of CSS property-value pairs, i.e. | |||||
| \code{list(".class-id" = list("css-property" = "value"))}} | |||||
| \item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"} | |||||
| } | |||||
| \description{ | |||||
| Manually adds css elements to target \code{outfile}. | |||||
| } | |||||
| \section{css list}{ | |||||
| The \code{css} input must be a named list of css properties and values within a | |||||
| named list of class identifiers, for example | |||||
| \code{list(".class-id" = list("css-property" = "value"))}. | |||||
| } | |||||
| header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", | ||||
| code_font_google = NULL, code_font_family = "'Source Code Pro'", | code_font_google = NULL, code_font_family = "'Source Code Pro'", | ||||
| code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", | ||||
| code_font_family_fallback = "'Lucida Console', Monaco", | |||||
| code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL, | |||||
| outfile = "xaringan-themer.css") | outfile = "xaringan-themer.css") | ||||
| } | } | ||||
| \arguments{ | \arguments{ | ||||
| \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} | ||||
| \item{outfile}{Customized xaringan CSS output file name} | |||||
| \item{extra_css}{A named list of CSS definitions each containing a named list | |||||
| of CSS property-value pairs, i.e. | |||||
| `list(".class-id" = list("css-property" = "value"))`} | |||||
| \item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"} | |||||
| } | } | ||||
| \description{ | \description{ | ||||
| Creates a customized Xaringan theme CSS file. | Creates a customized Xaringan theme CSS file. |
| context("test-list2css.R") | |||||
| test_that("list2css converts lists to css", { | |||||
| css <- list( | |||||
| '.remark-slide' = list( | |||||
| "color" = "#FFF", | |||||
| "font-size" = "30px" | |||||
| ) | |||||
| ) | |||||
| expected <- '.remark-slide {\n color: #FFF;\n font-size: 30px;\n}' | |||||
| expect_equal(list2css(css), expected) | |||||
| css[[".new-class"]] <- list("background-color" = "#000") | |||||
| expected <- c(expected, ".new-class {\n background-color: #000;\n}") | |||||
| expect_equal(list2css(css), expected) | |||||
| }) | |||||
| test_that("list2css errors if css list is not named", { | |||||
| css <- list(list( | |||||
| "color" = "#FFF", | |||||
| "font-size" = "30px" | |||||
| )) | |||||
| expect_error(list2css(css)) | |||||
| }) | |||||
| test_that("list2css errors if css list has unnamed elements", { | |||||
| css <- list( | |||||
| list( | |||||
| "color" = "#FFF", | |||||
| "font-size" = "30px" | |||||
| ), | |||||
| '.test' = list(color = 'red') | |||||
| ) | |||||
| expect_error(list2css(css)) | |||||
| }) | |||||
| test_that("list2css errors if css list has unnamed properties", { | |||||
| css <- list( | |||||
| ".class" = list( | |||||
| color = "#FFF", | |||||
| "font-size" = "30px" | |||||
| ), | |||||
| '.test' = list('red') | |||||
| ) | |||||
| expect_error(list2css(css)) | |||||
| css <- list( | |||||
| ".class" = list( | |||||
| "#FFF", | |||||
| "font-size" = "30px" | |||||
| ), | |||||
| '.test' = list('red') | |||||
| ) | |||||
| expect_error(list2css(css)) | |||||
| }) | |||||
| test_that("list2css errors if not list within list", { | |||||
| css <- list( | |||||
| ".class" = list( | |||||
| list(color = "red"), | |||||
| "font-size" = "30px" | |||||
| ), | |||||
| '.test' = list('red') | |||||
| ) | |||||
| expect_error(list2css(css)) | |||||
| }) |