`respect-user-color-scheme: true` does not follow system theme dynamically

Open
#14,551 2 comments 0 reactions 1 assignee View on GitHub

@cderv is already working on this.

Since May 27, 2026.

Assessment

This issue has not been assessed yet.

Description

accessibility enhancement html themes

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.
:::

Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from quarto-dev/quarto-cli

All issues in quarto-dev/quarto-cli

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.