Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

callout title with "dark" revealjs themes #11943

Open
jtkulas opened this issue Jan 23, 2025 · 5 comments
Open

callout title with "dark" revealjs themes #11943

jtkulas opened this issue Jan 23, 2025 · 5 comments
Assignees
Labels
bug Something isn't working callouts Issues with Callout Blocks. revealjs Issues with the revealjs format themes Related to HTML theming or any other style related issue (like highlight-style)
Milestone

Comments

@jtkulas
Copy link

jtkulas commented Jan 23, 2025

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'):

Image

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

@jtkulas jtkulas added the bug Something isn't working label Jan 23, 2025
@mcanouil mcanouil added revealjs Issues with the revealjs format callouts Issues with Callout Blocks. themes Related to HTML theming or any other style related issue (like highlight-style) labels Jan 23, 2025
@mcanouil

This comment has been minimized.

@jtkulas

This comment has been minimized.

@cderv
Copy link
Collaborator

cderv commented Jan 24, 2025

Thanks for the report.

We have indeed a big difference 🤔

Quarto 1.5

Image

With current Quarto 1.6+

Image

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

    Image

  • Dark theme

    Image

The font color is adapted correctly.

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

@cderv cderv self-assigned this Jan 24, 2025
@cderv cderv added this to the v1.7 milestone Jan 24, 2025
@gordonwoodhull
Copy link
Contributor

gordonwoodhull commented Jan 25, 2025

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
Copy link
Collaborator

cderv commented Jan 27, 2025

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.

// 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... 🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working callouts Issues with Callout Blocks. revealjs Issues with the revealjs format themes Related to HTML theming or any other style related issue (like highlight-style)
Projects
None yet
Development

No branches or pull requests

4 participants