Fabio Theme Demo

Fabio Setti

Fordham University

2025-06-29

Original Quarto Reveal Demo

Original demo for a Quarto Reveal presentation: https://quarto.org/docs/presentations/revealjs/demo/#/title-slide


The current theme adds some useful features. Most of the custom JS was implemented with some help from ChatGPT and my good friend Paul Hazelton (I am no web developer 🤷)


I also plan on adding more and more features as the need presents itself! Or, if you have any suggestions/feature requests, let me know here: https://github.com/quinix45/Fabio_Theme/issues

Changing the Theme Color

The minimalist style of the theme is intended to accommodate multiple theme colors. The theme color can be easily modified:

Open the Fabio_theme.scss file.

↓

Find and edit the value of the $theme-color: variable with the desired theme color. Save.

↓

Render .qmd file.

Note: other global variables such as font and font size can also be changed in the same way.

A video of how to change the theme color can be found at the following link:


https://youtu.be/_gTuedSeh5o

Many Slides elements adjust dynamically to the theme color.

Zoomable Images

Tired of hearing that your figures are too small to read?? Custom JS zoom options for figures on left-click! To reset to original position, right-click on image.

Note: Using .absolute to position images will interfere with the zoom feature. If zoom function is needed for an absolutely positioned images, I recommend creating an absolutely position div and place the image inside it like so:


<div style="position: absolute; top:60%; left:50%;">
![](Fabio_theme/theme_images/avg_plot.png){width="30%"}
</div>

GGplot Output

Zoom also works with GGplot output

#some random comment to see if chunk resizes correctly
par(mar = c(4, 4, 1, 1)) 
plot(pressure)

Animations On/Off

The the also includes custom .js code that allows to turn animation on and off when the “t” key is pressed

  • press “t”
  • Animations can then be played as one normally would by using the arrow keys
  • animations are off by default. I turn them on when presenting!

Accessibility and Quality of Life Improvements

The them also adds 4 icons at the bottom left:

  • The magnifying lens toggles a search box on the top right that can be used to search throughout the slides. This functionality is available in base reveal.js, but the shortcut is not very intuitive and not explicitly stated to users. I also added a search button that can be pressed to initiate the search (instead of pressing “enter” or “return” being the only way of initiating the search)

  • the two arrows can be clicked to navigate back and forth (I do not like the reveal.js default that creates two huge arrows when navigation commands are shown). I add navigation arrows by default in the theme because I found that some users do not immediately realize that arrow keys can be used to navigate slides.

  • The full screen button makes it intuitive that a full screen option exists. In my experience, a good deal of users do not know about pressing “F11” in browsers to get full screen.

  • Added some @media properties that improve the viewing experience of the slides on screens of varying sizes (e.g., phones, tablets). However, a computer browser is still recommended.

If I think of Some Other Useful Features, I will Add them đź‘‹