My custom plugin creates a button in a reveal.js presentation. It is similar to the menu & chalkboard buttons that come with quarto and is created by the css background-image
property. I want it to have the fill
attribute from the $link-color
variable, which is defined in my custom theme.scss
-file.
Just like the other buttons, that are coloured by the following SASS function (defined in quarto.scss
):
// STYLESHEET FROM QUARTO
/*-- scss:functions --*/
@function colorToRGB($color) {
@return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color) +
")";
}
/*-- scss:rules --*/
.reveal .slide-menu-button .fa-bars::before {
background-image: url('data:image/svg+xml,<svg fill="#{colorToRGB($link-color)}" ...</svg>');
}
Using a plugin.scss
like this does not work.
// STYLESHEET FOR PLUGIN
/*-- scss:functions --*/
@function colorToRGB($color) {
@return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color) +
")";
}
/*-- scss:rules --*/
.reveal .custom-button .fa-bars::before {
background-image: url('data:image/svg+xml,<svg fill="#{colorToRGB($link-color)}" ...</svg>');
}
Unfortunately this function (or functions defined by me) is not being created if I use my own custom stylesheet for my plugin using the command quarto render
.
Including it in the quarto.scss
file works as well as styling it via javascript. However, using SASS would make more sense to create a standalone plugin.
Is it possible at all to use a custom stylesheet for my plugin that is built via SASS?