Improving theme customisation in R Markdown HTML-formats

Publishing Your Results
,
1

I recently made a comment about theme customisation in R Markdown in another thread:

This might be better broken off into a separate topic, but it seems like a lot of people are intimidated by slide theme customisation using CSS. I wonder if we could jam SASS into the xaringan build process and then have YAML parameters appended to or processed alongside the SASS.

It would mean that you could customise the theme directly from the YAML, and using SASS variables users would only need to make changes to a few variables set up by the theme author...

I'm splitting it off since it's not really on-topic where it is, but I'd like to see if anyone has had thoughts along these lines. If SASS could be run as part of the knitting process and given access to YAML options, it would be pretty easy for someone to write a theme in SASS and expose certain variables (like the font stack, colour palette or a general spacing variable). A package that did this could then provide an RMarkdown template where these variables are commented out to demonstrate to users how they can customise the theme. Something like:

---
title: "My awesome report"
date: "`r Sys.Date()`"
output:
  xaringan::moon_reader:
    css: ["sass-output.css"]
    # uncomment these lines to customise the theme!
    # sass:
    #   fonts: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif"
    #   colors:
    #     primary: "#ff00ff"
    #     secondary: red
    #     background: white
    #   spacing: 10px
---

I'm not sure if knitter can handle this sort of pre-processing (ie. pass YAML options off to another task), but I think worst case scenario you could just wrap the entire knitting function and trigger SASS before or after.

Does anyone have thoughts on this?

2 Likes
2

I asked myself the same question some times ago.
First of all, I do consider using CSS variables instead of SASS. Why? CSS preprocessors were developed before CSS variables (SASS is an old but reliable technology and CSS did a lot of progress). But now, we can do a lot of things using CSS variables. I do not say that CSS variables and CSS preprocessors are exclusive because they aren't: they are good complements. I would use CSS preprocessors only when I cannot do the job with CSS variables.
If you insert a CSS variables declaration in you Pandoc template, you can use Pandoc variables to customize the output (like the lang variable).
In order to use a CSS preprocessor, I would try first to bind htmltools::htmlDependency() in a function: pass the parameters to this binder, process the CSS in a temp file, return a htmldependency.
That's all my ideas on this topic.

2 Likes
3

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.

4

I really like this! It's on my backburner a little at the moment, but if I implement it I'll bump this thread :slight_smile:

1 Like