Fabio Theme Demo

Fabio Setti

Fordham University

2025-11-16

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 double 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

par(mar = c(4, 4, 1, 1)) 
plot(pressure)

Zoom Code Output

Code output can also be zoomed in the same way you would for images (double left-click on code output):

summary(lm(cyl ~ disp, mtcars))

Call:
lm(formula = cyl ~ disp, data = mtcars)

Residuals:
    Min      1Q  Median      3Q     Max 
-1.3236 -0.6317 -0.1129  0.6915  1.2266 

Coefficients:
            Estimate Std. Error t value Pr(>|t|)    
(Intercept) 3.188568   0.296388   10.76 8.12e-12 ***
disp        0.012998   0.001136   11.45 1.80e-12 ***
---
Signif. codes:  0 '***' 0.001 '**' 0.01 '*' 0.05 '.' 0.1 ' ' 1

Residual standard error: 0.7837 on 30 degrees of freedom
Multiple R-squared:  0.8137,    Adjusted R-squared:  0.8075 
F-statistic:   131 on 1 and 30 DF,  p-value: 1.803e-12

Easily change Code chunks Size

the Fabio_theme.scss file includes some custom classes to change the size of code chunks and output. This can be achieved by adding to the #| classes: option to any R chunk:

# added `#| classes: code-90`
2 + 4
[1] 6
# normal size, no #| classes: option
2 + 4
[1] 6
# added `#| classes: code-125`
2 + 4
[1] 6
# added `#| classes: code-150`
2 + 4
[1] 6
# added `#| classes: code-200`
2 + 4
[1] 6

If other sizes are needed, it’s very quick to create a class with a specific size, add it to the .scss style file, and then assign it to a chunk

Animations On/Off

The theme 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 so that students can see the full slides right away. I turn them on when presenting!

Accessibility and QOL Improvements

The theme 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 đź‘‹