callout title with "dark" revealjs themes

[jtkulas]

Bug description

Callout block rendering appears "very muted" with dark RevealJS themes via Quarto 1.6.40 (I've only verified with `moon', 'night', and 'league'):

The callouts appear fine with default or light-background themes.

Session info:

R version 4.2.2 (2022-10-31 ucrt)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19045)

Matrix products: default

locale:
[1] LC_COLLATE=English_United States.utf8
[2] LC_CTYPE=English_United States.utf8
[3] LC_MONETARY=English_United States.utf8
[4] LC_NUMERIC=C
[5] LC_TIME=English_United States.utf8

attached base packages:
[1] stats graphics grDevices utils datasets methods base

loaded via a namespace (and not attached):
[1] compiler_4.2.2 fastmap_1.1.1 cli_3.6.0 tools_4.2.2
[5] htmltools_0.5.7 rstudioapi_0.15.0 yaml_2.3.10 rmarkdown_2.28
[9] knitr_1.45 jsonlite_1.8.9 xfun_0.42 digest_0.6.31
[13] rlang_1.1.3 evaluate_1.0.0

Steps to reproduce

---
title: "Untitled"
format: 
  revealjs:
    theme: moon #night,league
---

## Callout

::: {.callout-note}
Hey there
:::

Expected behavior

No response

Actual behavior

No response

Your environment

R version 4.2.2 (2022-10-31 ucrt)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19045)

IDE - RStudio 2024.04.1 Build 748

Quarto check output

Quarto 1.6.40
[>] Checking environment information...
Quarto cache location: C:\Users\ergadmin\AppData\Local\quarto
[>] Checking versions of quarto binary dependencies...
Pandoc version 3.4.0: OK
Dart Sass version 1.70.0: OK
Deno version 1.46.3: OK
Typst version 0.11.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
Version: 1.6.40
Path: C:\Users\ergadmin\AppData\Local\Programs\Quarto\bin
CodePage: 1252

[>] Checking tools....................OK
TinyTeX: (external install)
Chromium: (not installed)

[>] Checking LaTeX....................OK
Using: TinyTex
Path: C:\Users\ergadmin\AppData\Roaming\TinyTeX\bin\windows
Version: 2024

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
Version: 3.10.9 (Conda)
Path: C:/Users/ergadmin/anaconda3/python.exe
Jupyter: 5.2.0
Kernels: python3

[>] Checking Jupyter engine render....OK

[>] Checking R installation...........OK
Version: 4.2.2
Path: C:/PROGRA1/R/R-421.2
LibPaths:
- C:/Users/ergadmin/AppData/Local/R/win-library/4.2
- C:/Program Files/R/R-4.2.2/library
knitr: 1.45
rmarkdown: 2.28

[>] Checking Knitr engine render......OK

[mcanouil]

Could you properly format your post using code blocks for code and terminal outputs? Thanks.
If your code contains code blocks, you need to enclose it using more backticks, i.e., usually four ````.
See https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us.

[jtkulas]

Sorry about that!

---
title: "Untitled"
format: 
  revealjs:
    theme: moon #night,league
---

## Callout

::: {.callout-note}
Hey there
:::

[cderv]

Thanks for the report.

We have indeed a big difference 🤔

Quarto 1.5

With current Quarto 1.6+

This is happening as I reworked Callout theming in revealjs to allows customization, by doing the same as in bootstrap. However, some Revealjs themes needs to have tweaking.

I'll see how I can adapt (maybe revert back to previous blue or adapt the blue based on dark theme or not).

For comparaison, here is callout on dark theme with bootstrap

• Light theme

  

• Dark theme

  

The font color is adapted correctly.

So I believe here, this is about font color in callout title not being the correct one 🤔

[gordonwoodhull]

It looks to me that previously the callout title background and text were not affected by the dark theme? Unless that's a slightly different light blue.

I think the change is because the primary color is mixed with the background color instead of lightened as part of the implementation of brand colors by @cscheid.

So yes, I agree it is truer to dark mode to use the light foreground color for the callout title text (similar to bootstrap), rather than revert to the old behavior.

[cderv]

It looks to me that previously the callout title background and text were not affected by the dark theme? Unless that's a slightly different light blue.

Yes the colors for callouts were hardcoded for Revealjs. Now they are using the same logic as in Boostrap allowing some SCSS variables to tweak them.

This lead to callout's color to be responsive to light vs dark. This part is expected change to me, following Revealjs update in Quarto 1.6

I think the change is because the primary color is mixed with the background color instead of lightened as part of the implementation of brand colors

Not that sure. I found that color for callout title is in fact hardcoded in dark theme.

quarto-cli/src/resources/formats/revealjs/quarto.scss

Lines 669 to 680 in deaee80

	// This is a sentinel value that renderers can use to determine
	// whether the theme is dark or light
	@if (
	quarto-color.blackness($backgroundColor) > $code-block-theme-dark-threshhold
	) {
	/*! dark */
	.reveal div.callout.callout-style-default .callout-title {
	color: #222;
	}
	} @else {
	/*! light */
	}

Which I wasn't expected when I did the change, and I missed it. This was ok with previous hardcoded light color title background also use with dark slide. But this is not now.

So to me, this is about making the callout title color being responsive to its color background, and checking that all themes work well with that.

FWIW I have PR incoming. I'll check about consideration in #11825 but I am not sure right now the brand work on this was done also for revealjs. I may include it in this then... 🤔