Folder/path for custom (revealjs) designs?

[roland-KA]

Where do I store custom (reveal) designs? It's not clear to me, in which folder they should be stored or how to configure a path for Quarto where to find custom designs.

[mcanouil]

What do you mean by "custom design"?

For short, the "where" does not matter as long as you tell the "where" to Quarto.

Are you talking about template?
If yes, take a look at https://quarto.org/docs/extensions/listing-revealjs.html and more generally at Quarto extension mechanism (https://quarto.org/docs/extensions/creating.html).

You can find more examples on the Awesome Quarto GitHub list: https://github.com/mcanouil/awesome-quarto#presentations.

Or if you don't want to take that road, you can do all the same locally using every YAML option at your disposal, see https://quarto.org/docs/reference/formats/presentations/revealjs.html.
You might also to read (or read again) the "Reveal.js" guide: https://quarto.org/docs/presentations/revealjs/.

[roland-KA]

Oh sorry, I've used the wrong expression. I was talking about custom themes (Revealjs-themes, HTML-themes).

I've seen, that if a put a custom.scss in the same folder as the .qmd-file, then Quarto can see it. But what about e.g. MyNewFancyTheme.scss, which may be used by a lot of documents? Is there a (central) default folder to put such custom themes? Or how can I tell Quarto where to find custom themes?

[cscheid]

Quarto will not in general search for anything outside its "project directory". In an actual project, the project directory is the root directory. In a standalone document, that's the directory where the file resides.

This is by design: we want documents to be reproducible as much as possible, and so we do not want projects to (hypothetically) depend on $HOME/.quarto-themes or anything like that.

If you need to share themes/formats across multiple projects, the recommended approach is to create an extension and then import it on each of your different projects.

[roland-KA]

Ah, now I understand! Thanks for explaining the concepts.

[krivit]

Apologies to @cscheid and others. This appears to have been an error on my end, which I interpreted as a deliberate design choice based on @cscheid's reply.

[thealanjason]

I am facing the same issue as OP. Particularly, I define the theme in a file called _slides.yml and if I include this in my index.qmd using the metadata-files option, quarto does not find the custom.scss.

Following is my directory structure:

ajc@mbd:~/slides$ tree
.
├── custom.scss
├── index.qmd
├── introduction
│   ├── index.qmd
│   └── references.bib
├── listing.yaml
└──  _slides.yml

The important parts of the _slides.yml is as follows:

format:
  revealjs:
    footer: "{{< meta date >}} // {{< meta author >}} // Course Name // {{< meta subtitle >}}"
    theme: [default, "../custom.scss"]

And my introduction/index.qmd file has the following metadata:

---
title: "Title"
subtitle: "Introduction"
author: "John Doe"
date: 01.01.2025

format: revealjs
metadata-files: 
  - "../_slides.yml"
---

On running quarto preview index.qmd from within the slides/introduction directory, I get the following error:

ERROR: NotFound: No such file or directory (os error 2): readfile '/opt/quarto-1.6.42/share/formats/revealjs/custom.scss.scss'
Path: /opt/quarto-1.6.42/share/formats/revealjs/custom.scss.scss

However, if I paste a copy of the custom.scss file into the introduction folder like OP did, then it works.
I don't understand why quarto is not looking for the custom.scss file in the project directory

Any help is appreciated :)

[mcanouil]

Please open a separate discussion and provide a simple Git repository that allows us to reproduce and clearly understand your use case.
You can reference this discuss if you appropriate.

[bastianolea]

Just to provide a direct answer to the question, even if this practice is discouraged, to use a quarto html theme across multiple reports you need to provide the full path (i.e. without using the ~ symbol or relative paths) to the .css and/or .scss files used, like this:

format:
  html:
    css: /Users/username/folder/folder/folder/folder/styles.css
theme:
  - /Users/username/folder/folder/folder/folder/theme.scss