Since I have been fearing that too many people will use the same style for xaringan-based slides, which will make xaringan a boring package, I’m looking forward to more user-contributed CSS themes. Currently, the css argument of the output format xaringan::moon_reader takes a default theme, and I hope to bundle more themes in this package, so that users can easily choose a theme they prefer. This is similar to LaTeX beamer themes.
In a previous post “Why xaringan”, I mentioned John Little created a Duke theme, which is a good example of what I’m looking for. I hope such CSS themes could be provided by xaringan (under the directory inst/rmarkdown/templates/xaringan/resources/) so that a user can specify something like css: duke to change the default theme.
I know this will at least help Mine.
Anyone?
P. S. If you really want to kill time, see if you can “reproduce” a Microsoft PowerPoint style with CSS, or LaTeX beamer. The latter may be more challenging. I’ll be waiting for pull requests on GitHub.
Appendix: Technical Instructions for Contributors
Before you work on a new theme, please install the development version of xaringan:
remotes::install_github('yihui/xaringan')
Unless you want to overhaul the default theme (default.css), I recommend you to build your theme on top of it. That is, only change a (small) subset of default.css, and submit the new CSS rules in your pull request. For example, in default.css, the color of links is red(dish):
a, a > code {
color: rgb(249, 38, 114);
}
If you want to contribute a theme with a different link color, your CSS file only needs to include this rule. For example, Alison contributed the rladies theme (rladies.css), in which she defined the color to be purple:
a, a > code {
color: #88398a;
}
For users, they can use rladies.css to override the link color in default.css, e.g., the R Markdown output format settings can be:
output:
xaringan::moon_reader:
css: ["default", "rladies", "rladies-fonts"]
In general, I recommend that you use two CSS files foo.css and foo-fonts.css to define a theme, where foo is your theme name. In foo.css, you define all styles except the font styles, and apparently, foo-fonts.css is for fonts. This is to make it easier for users to customize fonts, because we often use Google web fonts via @import, e.g.,
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
If this is included in the theme base CSS file but users do not want to use the font, it is just a waste of bandwidth (the font will be downloaded every time). For example, you may like the colors of the rladies theme, but want to use a different Google web font, you can provide your own CSS file:
output:
xaringan::moon_reader:
css: ["default", "rladies", "other-fonts.css"]
where other-fonts.css is a local CSS file that you prepared. Of course, if your theme does not import web fonts, it is totally okay to only use one CSS file.