How to change text color in Quarto slides?

Question

After adding CSS style colour as green

The editor is making Heading 1 green but in the RStudio slide Preview, the text followed by Heading 1 is green but not the Heading 1.

qmd file looks like this:

---
format: revealjs
---

I wanted to change the color of the heading text so I wrote under the CSS styles color:green but this changes the text following the heading but not the heading text itself.

What change I need to do if I want to change the colour of any one specific slide heading?

Answer 1

How to style Quarto reveal presentation

Best way to customize one of Quarto reveal presentation is to use a .scss file to provide new rule in addition of the default theme. See about Customization

---
title: "example"
format: 
  revealjs:
    theme: [default, style.scss]
---

## Nalanda Academy 

Hello

## Slide 2

Quarto

You can change one or several default values of the theme is to use the SASS variables:

/*-- scss:defaults --*/
$presentation-heading-color: green;

/*-- scss:rules --*/

You can use usual CSS rules to be more scoped to slide heading for example

/*-- scss:defaults --*/
$custom-col: green;

/*-- scss:rules --*/

.reveal section h2 {
  color: $custom-col;
}

We really recommend using a custom theme like that to modify the default CSS.

About the issue with inline style

You can use inline style on html element, it should work. However, you may have found an issue with Pandoc, than is used by Quarto. The inline style set on a header is set to the all section when --section-divs is used. This can be replicated with html format and not only revealjs.

quarto pandoc -t html -f markdown -s --section-divs -o test.html test.qmd

So it happens also with revealjs format. It is showing correctly in the visual editor because we emulate the result.