0

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?

jwarz
  • 481
  • 2
  • 9

0 Answers0