Feature Request: SASS-variables for Callout Blocks in revealJS presentation

[Mavoort]

Description

Hello,
I would like to create a custom theme for my revealjs presentation.
This is (womewhat) how it's supposed to look (except for the icon):

To achieve this, one would typically create a custom.scss file and set the corresponding SASS-variables to change things like colors, fonts or margins.

However, I am unable to change the color of the callout boxes of my presentatio that way. It would be nice to have some SASS variables for that, e.g. callout-color-tip, callout-color-warning like we have for HTML pages.

At the moment I try to overwrite the colors with come custom css instead. However, setting the border colors via

/*-- scss:defaults --*/
$purple: #800080;

/*-- scss:rules --*/
div.callout-warning {
  border-left-color: $purple !important;
}

doesn't work either, because the default color in Quarto has also set the important attribute.

[mcanouil]

It does not work because you need to be more precise in your rule as explained in https://quarto.org/docs/presentations/revealjs/themes.html#customizing-themes.

I don't know why the default CSS rule in Quarto adds !important to it in Reveal.js (edit: it is "needed" to overwrite Bootstrap in regular HTML) but here you also need to use it to overwrite Quarto.

Note that you can't change the colour of the icon because that's a raster image.

---
title: "Quarto Playground"
format:
  revealjs:
    theme: [default, custom.scss]
---

## Quarto Playground

::: {.callout-warning icon="false"}
## {{< iconify octicon:copilot-warning-16 >}} Warning

This is a warning!
:::

/*-- scss:defaults --*/
$purple: #800080;

/*-- scss:rules --*/
.reveal .slide div.callout-warning {
  border-left-color: $purple !important;
}

.reveal .slide div.callout-warning.callout-style-default .callout-title {
  background-color: lighten($purple, 50%);
}

Also note the following discussion:

• [Revealjs] Customisation of callouts #4755

[Mavoort]

That works! Thanks for your help.

[cderv]

Enhancement on this is tracked at

• [Revealjs] Allow customisation of callouts similar as in HTML  #5038