Skip to content

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

@rmvegasm

Description

@rmvegasm

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

Metadata

Metadata

Assignees

Labels

accessibilityenhancementNew feature or requesthtmlIssues with HTML and related web technology (html/css/scss/js)

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions