How can I use variables in custom formats?

[liyongg]

Description

Hello.

For a custom RevealJS format I would like to be able to switch between some colours and ideally it would be with a variable in the yaml header.

For example, the template.qmd and a .scss file could look like this:

---
title: Untitled
format:
  customformat-revealjs: 
    theme_colour: '#FFFFFF'
date: last-modified
---

## Introduction

/*-- scss:defaults --*/
$theme_colour: {theme_colour};

$presentation-heading-color: $theme_colour;

Is this somehow supported already? Maybe with some Lua scripting?

[mcanouil]

You need to define a Lua filter and possibly create an extension, see https://quarto.org/docs/extensions/.

[liyongg]

Thank you! Do you have any pointers for how I should structure this? For my use case I want to assign $theme_colour to several variables inside of SCSS, and it is used inside defined classes to make backgrounds based on this specified colour. Would the filter then somehow modify the existing (S)CSS, or does it work similarly to the following example on the Pandoc website?

function Strong(elem)
  return pandoc.SmallCaps(elem.content)
end

I'm not familiar with Lua so if you could point me towards a specific example/documentation then it would greatly help!

[mcanouil]

You can take a look at the other extensions.

Note that you might be overthinking the whole thing here.
Why not use SCSS variables directly?

[liyongg]

I was under the impression that you could not specify a hexcolour/CSS valid colour like this in the yaml of a .qmd file

---
scss-dynamic-colour: 'red'
---

to then call it in a SCSS file:

/*-- scss:defaults --*/
$presentation-heading-color: $scss-dynamic-colour;  # not even sure what syntax this should be?

or do you mean something else? Ideally I would not want others that want to use a custom format to have to modify the SCSS file in order to change colours (in this case).

[mcanouil]

If you want absolutely to use the YAML front matter to define the colour, then you need to learn Lua and define a filter.

Alternatively, you could simply define the colour directly in the SCSS file at the beginning.

And if you want to make a "custom format", then you have to create an extension.