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?

Whiteside

How did you change the color? If you used CSS is that inline? In chunk? In a separate CSS file? Are you using a theme, if so, which one? (A reproducible question will get you better answers a lot faster...check it out: making R reproducible questions. – Tasso

dear @Tasso thank you for the suggestion, I edited the question further. I hope it will help somewhat. – Whiteside

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.

Hemangioma

Answer 2

"A bracketed sequence of inlines, as one would use to begin a link, will be treated as a Span with attributes if it is followed immediately by attributes"

• Official Quarto docs here

e.g.

I am a [red]{style="color:green;"} word.

Spurtle

Answer 3

The best way to style was already provided by @cderv through the use of custom style.scss.

Unfortunately, I am sometimes in a hurry and out of laziness just use inline code. Use html <p> or <span> (span doesn't break lines) to style only the paragraphs or words you want.

For example:

Install the following extensions (in <span style="color:cyan;">_extensions</span> folder, on Win 11 path is `C:\Users\username\Documents\_extensions`):

Renders like this:

Wholesome