How to change Table of contents font-size in Quarto Revealjs

[YJallen]

Description

Hello there,
How to change Quarto Revealjs TOC (Table Of Contents) fontsize and color? I follow the tutorial on the website, and use the scss as below: First is my YAML and my qmd text, but it doesn't work to me.

My quarto version in 1.3.427

---
title: "Hello everyone"
authors:
  - "allen"
institute:
 - University 
date: 2023-07-04
format:
  revealjs:
    df-print: paged
    theme: [serif.scss] 
    slide-number: c/t
    toc: TRUE
    toc-depth: 1
    toc-title: TOC!!
    chalkboard: true
    menu: TRUE
editor: visual
---
# a for apple 

## Eating apple is good 


# b for banana 

## banana is good 

/*-- scss:defaults --*/

// fonts
$font-family-sans-serif: "Palatino Linotype", serif !default;
$toc-font-size: 3em;
$toc-color: red;

// colors
$body-bg: #f0f1eb !default;
$body-color: #000 !default;
$link-color: #51483d !default;

$selection-bg: #26351c;

// headings
$presentation-heading-font: "Palatino Linotype", serif !default;
$presentation-heading-color: #383d3d !default;

/*-- scss:rules --*/

.reveal a {
  line-height: 1.3em;
}

Thx and greetings!
Wish have a nice day
allen

[mcanouil]

Where did you find $toc-font-size and $toc-color?
Available SCSS variables are described in https://quarto.org/docs/presentations/revealjs/themes.html#sass-variables and those are not in it.

When playing around HTML and (S)CSS, the best way to understand and target the elements is to open the file in your favourite browser and use the inspect/developper mode.

#TOC {
  font-size: 5em;
}

[YJallen]

I found the $toc-font-size and $toc-color at Quarto HTML Theming page as below :

https://quarto.org/docs/output-formats/html-themes.html

#TOC {
  font-size: 5em;
}

The way that learn how to custom scss file at Quarto is really helpful, make me more understand about it.
It work !!! I appreciate it.

[YJallen]

@mcanouil Thanks, some time revealjs and html make me confused. Your description helped me a lot!!

Wish you a nice day.

allen

[mcanouil]

Glad it helped!

[cderv]

This is a good report! I believe this would be among the variable to also make available for revealjs 🤔

[mcanouil]

More generally, some kind of standardisation of the exposed SASS variables could be a good enhancement.

I let you eventually open an "enhancement issue" for Reveal.js 😉

[cderv]

Yes this is exactly that. This is now done at :#6096