When respect-user-color-scheme: true is set in a Quarto HTML document, the
page respects the user's OS-level light/dark preference at load time, but does
not follow it when the OS theme changes while the page is open. This
behaviour is described in #12426 but I believe is no longer needed, and the
expected behaviour for most users setting respect-user-color-scheme: true
would be for the document to follow the system theme anytime it changes.
Quarto version
Quarto 1.9.37
[✓] Checking environment information...
Quarto cache location: /home/coy/.cache/quarto
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.8.3: OK
Dart Sass version 1.87.0: OK
Deno version 2.4.5: OK
Typst version 0.14.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.9.37
Path: /opt/quarto/bin
[✓] Checking tools....................OK
TinyTeX: (not installed)
Chromium: (not installed)
Chrome Headless Shell: (not installed)
VeraPDF: (not installed)
[✓] Checking LaTeX....................OK
Using: Installation From Path
Path: /home/coy/texlive/2023/bin/x86_64-linux
Version: 2023
[✓] Checking Chrome Headless....................OK
Chrome: (not detected)
[✓] Checking basic markdown render....OK
[✓] Checking R installation...........OK
Version: 4.5.3
Path: /usr/lib/R
LibPaths:
- /home/coy/R/x86_64-pc-linux-gnu-library/4.5
- /usr/local/lib/R/site-library
- /usr/lib/R/site-library
- /usr/lib/R/library
knitr: 1.51
rmarkdown: 2.31
[✓] Checking Knitr engine render......OK
[✓] Checking Python 3 installation....OK
Version: 3.13.5
Path: /usr/bin/python3
Jupyter: (None)
Jupyter is not available in this Python installation.
Install with python3 -m pip install jupyter
[✓] Checking Julia installation...
Steps to reproduce
This minimal example shows the described behavior. With changes made in #14552 the rendered document follows what's described in it.
---
title: "Follow System Theme Test"
format:
html:
theme:
light: flatly
dark: darkly
respect-user-color-scheme: true
---
## Test
This document uses `respect-user-color-scheme: true` with light/dark themes.
- The page should start in the theme matching your OS preference.
- The toggle button (top right or navbar) should switch themes.
- When you change your OS theme (system settings → dark/light), the page
should follow automatically.
- After manually toggling, the page should remember your choice, but if the
OS theme changes, the override should expire and the page should follow
the system again.
Open your OS theme settings (or use Developer Tools → Rendering → Emulate
CSS media feature prefers-color-scheme) to test.
<!-- Content-visible blocks: .light-content shows only in light mode,
.dark-content shows only in dark mode. These verify that theme
switching still works correctly when following the system. -->
:::{.callout-note .light-content}
## Light-only note
This callout is only visible when the page is in **light mode**.
It should appear/disappear as the system theme changes.
:::
:::{.callout-warning .dark-content}
## Dark-only warning
This callout is only visible when the page is in **dark mode**.
It should appear/disappear as the system theme changes.
:::
When
respect-user-color-scheme: trueis set in a Quarto HTML document, thepage respects the user's OS-level light/dark preference at load time, but does
not follow it when the OS theme changes while the page is open. This
behaviour is described in #12426 but I believe is no longer needed, and the
expected behaviour for most users setting
respect-user-color-scheme: truewould be for the document to follow the system theme anytime it changes.
Quarto version
Steps to reproduce
This minimal example shows the described behavior. With changes made in #14552 the rendered document follows what's described in it.