Add clean theme for reveal to built in themes

[jlperla]

Description

The builtin revealjs themes are a little jarring for those used to presenting with latex slides.

The best I have found for people used to beamer slides is the clean theme: https://github.com/grantmcdermott/quarto-revealjs-clean

I tried to use the extension installatino mechanism but it didn't work especially well. I would propose that the theme is good enough that you should ask @grantmcdermott if you can add it as a built-in theme. It will significantly simplify experimentation from people used to beamer.

[mcanouil]

This would mean to take over the maintenance which is unlikely.
Also, this is highly opinionated which would lead to why this one and not the others? (see https://quarto.org/docs/extensions/listing-revealjs.html which is not a comprehensive list)
The whole point of the extension mechanism is to allow users to have opinionated template which is basically the opposite of what you ask here.

I tried to use the extension installatino mechanism but it didn't work especially well.

What did not work exactly? I have no issue installing or using it.
I am going ahead and change this as a Q&A about you having trouble using extension rather than a feature request about including a format extension inside Quarto CLI.

[jlperla]

There are no clean theme which matches a simple, clean latex beamer theme which works out of the box with revealjs and quarto. If someone just experiments with it, they will reach the wrong conclusions. Doesn't need to be that particular theme, but something like it would be very nice. It is hard to capture all of why it doesn't work, but if you just use the default theme in revealjs from latex slides with lots of math, it just doesn't look right. The clean theme does.

If someone looks to switch from beamer to revealjs they may try a bunch of themes and say "this is not intended for acadmeic presentations". It was blind luck that I found this theme and the extension mechanism before I gave up.

[mcanouil]

Did you try the "simple" built-in theme? (https://quarto.org/docs/presentations/revealjs/themes.html)

The goal of Reveal.js is not to match Beamer.
Here it's your opinion about styling that should match.
The 11 themes and the extension format are only SCSS styling, these don't add nor remove anything, it's only styling, which are all described in the link above.

I believe "clean" is only an alternative styling to "simple", having them both does not make much sense to me.

[grantmcdermott]

Hi folks.

@jlperla thanks for the kind words on the clean theme! Appealing to the beamer crowd (of which I am one) was a primary motivation for creating it in the first place. I don't have hard numbers besides GitHub stars, but I believe it's become one of the most popular Quarto theme options for this reason.

Maintenance and interest questions aside, I'd be happy in principle for the clean theme to be subsumed into the default themes. (As an aside: I settled on the "clean" name after seeing that it wasn't already taken by one of the defaults, and was somewhat surprised by this.)

However, I must say that I have included some features that are more tailored towards my specific uses, including automatic support for fixest regression tables (CSS / example). I personally wouldn't want to drop this feature, even though the set of users that it would appeal to is somewhat limited. (Even if do I think that all applied econometricians should be using fixest!) So @mcanouil may have the right of it, even though it's only SCSS and would be a pretty lightweight maintenance burden.

At the same time, I will push back on the assertion that "clean" is a synonym for "simple" here @mcanouli. They definitely mean different things to me in this context. I was certainly trying to provide something with a distinct aesthetic, as compared to the default presentation theme.

P.S. Jesse, please raise an issue if you think the extension or template use instructions are on the README are missing. I actually envisage most academics would prefer to use the template method than the extension. For example, imagine that you are in your parent course folder (call it econ101/). Then you just open up your terminal and run:

quarto use template grantmcdermott/quarto-revealjs-clean

and, when prompted, call the resulting sub-directory "lecture-1" etc. Treating each presentation (lecture) as its own sub-directory is a little bit unfamiliar if you're coming from beamer world, but I find it works better for the quarto context.

[mcanouil]

I wrote "alternative" not "synonym" or "similar".

And I did not look into details your SCSS as it was clearly opinionated (nothing bad there obviously) as any Quarto format extension since they were first created to address a personal need.

My point was mostly:

1. If the extension styling is the one wanted/needed, then the installation issue has to be addressed (and including it in Quarto CLI is not the right solution)
2. There is a "simple" theme already in Quarto which can be improved on concrete suggestion but adding a "clean" or whatever in addition to "simple" will likely cause confusion in my opinion.

[cscheid]

I tried to use the extension installatino mechanism but it didn't work especially well.

What happened?

[jlperla]

Yeah the simple theme just doesn't work for converting over standard presentations Hard to explain why without sitting through a bunch of economics/math/stats seminars, but font and their sizes/etc. are visually jarring relative to what a math or economics or stats person would have.

I am not saying that the goal of reveal.js is to match beamer - just that it would be great if there was one you could mark and say "if you switch from format: beamer to format: revealjs then try out the "clean" one as a starting point" etc.

But it sounds like @grantmcdermott has some specific features added which might make this less general, so I am a little less confident right now in my suggestion.

Sorry, will try to figure out why the setup instructions failed for me later. But when I downloaded the scss file and just threw it in my folder with the theme: clean.scss everything worked great.

All of this is to say: (1) quarto is amazing; (2) revealjs is cool but I almost gave up when I switched from my beamer and things looked hideous for all of the builtin themes; and (3) was thrilled to find the clean theme because it fixed all of my problems!

[jlperla]

Tried out the extension again with an installation of quarto install extension grantmcdermott/quarto-revealjs-clean in the root of my repo and had problems again. To summarize:

1. A top level build works (which includes files within source subdirectories). It correctly applies the theme.
2. The quarto preview in vscode fails to find the theme and says it can't read the extension. My files are in subdirectories of the root if that matters.

The error is

(base) ➜  ECON526_instructor git:(main) ✗ quarto preview /Users/jlperla/Documents/GitHub/ECON526_instructor/lectures/linear_algebra_foundations.qmd --no-browser --no-watch-inputs
ERROR: Unable to read the extension 'clean'.
Please ensure that you provided the correct id and that the extension is installed.

etc.

The YAML I used in the files within the folders has

format:
  clean-revealjs:

Given that it works if I run the top level web project quarto render it has me wondering whether I need to install the theme in every single subfolder with source files in it to get the render to work in the VS code UI?

Not sure if this is what you are talking about with themes vs. templates @grantmcdermott but when I looked at the template output it wasn't all that different from what I had?

[dragonstyle]

I'm not sure why you're having an issue with this- sorry! Extensions can either be installed into the project level (making them available project wide), or into a folder, making them available to any documents within that folder. If you run quarto install from within a quarto project, the command will prompt to confirm which of the two options you'd like. (Installing an extension is really as simple as placing the extension within a _extensions folder, so if you see this folder at the project level, it is a project wide installation, if you see that folder in another folder, it will only be available to files within that folder).

When installed into a project, the extension will be available to any document within that project. For example, I've attached a zip that has a simple website with a reveal presentation using the clean style in a subfolder.

website.zip

HTH!

[jlperla]

OK, I tracked down the issue. Some files in the .quarto or other cached files were being used by the internal "Preview" in VS Code, but not by the quarto render for the project. So by adding in the extension after I previously had files, it threw things off in subfolders. The solution was to delete all temporaries, and now both the internal preview renderer and the build process both work.

My guess is that this wouldn't happen if I had known about a the clean theme and template a month ago and started with its template, so not sure that this is really worthy of any sort of bug report.

To summarize my feelings after this discussion:

1. I still think it would be great to have a good "first try" theme for people to encourage switching from beamer. Calling it "clean" probably isn't the best idea though given the existing names but I would still consider it.
2. The extensions seems to work as long as it was done before anything else or if you delete the temporaries in the middle. Not as worried about that as I was before, but discoverability is still an issue.
3. It sounds like the clean theme in particular from @grantmcdermott might be sneaking in too many features specific to one domain (e.g. particular features for display of regression tables) which quarto would not want to maintain.

... so... given I would rather have domain specific features in the end, I retract my original suggestion to add the theme to quarto itself. I will close this issue.

[grantmcdermott]

Just a minor comment on (3). Perhaps I oversold this earlier. In the case of my clean theme, it's really a tiny bit of extra SCSS (to correctly recognize etable environments), so would be no overhead from the user perspective. Moreover, this additional SCSS is completely ignored if you aren't creating such environments yourself. But yes, I believe the in-built Quarto themes would want to avoid any domain-specific SCSS, even if they are harmless/ignored in other cases.

Circling back to (1), if the Quarto-devs are still interested in adopting the clean theme, or elements thereof, then I'm happy to give my blessing.

[jlperla]

Maybe a tiny bit now @grantmcdermott , but it could open floodgates ;-)

I guess another option is that there could be a version of the clean in the baseline quarto and then the extensions could just add SCSS stuff to it?

[grantmcdermott]

Yeah, for sure. You could easily pare off the necessary lines into a separate etable.scss file:

// Special catch for etable environment to ensure these table images
// don't overflow the slide.
// See: https://lrberge.github.io/fixest/articles/etable_new_features.html

.etable {
  width: 100%;
  height: calc(100% - 3em); 
  display: flex;
  align-items: center;
  justify-content: center;
}

.etable img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

And then import that as part of your yaml.

---
title: "Presentation"
format:
  revealjs: 
    theme: [clean, etable.scss]
---