Colour scheme choice on one website changes every other Quarto site on the same origin

Offen
  • Stimmt etwas nicht?
#15,305 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
58/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
javascript
Bereich
frontend

Rechercherichtung

Start with src/resources/formats/html/templates/quarto-html-before-body.ejs, linked in the issue, and inspect how the colour scheme preference is read and stored. Reproduce with two rendered sites under one local HTTP origin using the supplied steps. Done means changing the colour scheme on one site leaves the other site's choice unchanged; the reader mode and tabset keys are noted as related but are not confirmed by the reporter.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

bug dark-mode websites
I have:
  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide
Bug description

Quarto stores the reader's colour scheme choice under one fixed localStorage key, quarto-color-scheme.
localStorage is per origin, so every Quarto site served from the same origin reads and writes the same value.
This is the usual layout for project sites on GitHub Pages, where user.github.io/site-a/ and user.github.io/site-b/ share the origin user.github.io.

A reader who switches site-a to dark finds site-b dark on their next visit, although they never touched its toggle.

The reader mode (quarto-reader-mode) and tabset (quarto-persistent-tabsets-data) keys are fixed in the same way.
I only tested the colour scheme.

Related: #15296 (the same code throws when storage is blocked).

Steps to reproduce

Two website projects, site-a and site-b, each with this _quarto.yml (only the title differs):

project:
  type: website
website:
  title: "site-a"
  navbar:
    left:
      - index.qmd
format:
  html:
    theme:
      light: flatly
      dark: darkly

index.qmd:

---
title: "site-a"
---

Hello.
  1. Run quarto render in each folder.
  2. Serve the parent folder over HTTP, for example python3 -m http.server, so both sites share one origin.
  3. Open /site-b/_site/index.html: it is light.
  4. Open /site-a/_site/index.html and click the colour scheme toggle.
  5. Open /site-b/_site/index.html again.
Actual behavior

site-b opens dark.
State read in Chromium 156 with a light system preference:

site-b first visit:   {'body': 'quarto-light', 'stored': None}
site-a before toggle: {'body': 'quarto-light', 'stored': None}
site-a after toggle:  {'body': 'quarto-dark',  'stored': 'alternate'}
site-b next visit:    {'body': 'quarto-dark',  'stored': 'alternate'}

https://github.com/user-attachments/assets/af5995a0-b13e-4eab-ac2d-2155ce1c39b8

Expected behavior

Each site keeps its own choice.
One option is a key that includes the site path, for example the site-url path or the site root that Quarto already knows at render time.

Your environment
  • IDE: none, command line.
  • OS: macOS 27.2.
  • Browser: Chromium 156.0.8078.4 (Playwright).
Quarto check output

Reproduced with a development build of main at 089ba530b.
The template is the same at the v1.11.9 tag.

Quarto 99.9.9
[✓] Checking environment information...
      Quarto cache location: /Users/mcanouil/Library/Caches/quarto
      Project: none found (single-file mode)
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.107.1: OK
      Deno version 2.9.8: OK
      Typst version 0.15.1: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: 089ba530b3ed4ec156a355d41b6b7de2db3e44ea
      Path: /Users/mcanouil/Projects/quarto-dev/quarto-cli/package/dist/bin
[✓] Checking tools....................OK
      TinyTeX: v2026.07
      Chrome Headless Shell: (not installed)
      VeraPDF: (not installed)
[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/mcanouil/Library/TinyTeX/bin/universal-darwin
      Version: 2026
[✓] Checking Chrome Headless....................OK
      Using: Chrome from QUARTO_CHROMIUM
      Path: /Applications/Brave Browser.app/Contents/MacOS/Brave Browser
[✓] Checking basic markdown render....OK
Vorherrschende Sprache
JavaScript
Sterne
6.2k
Forks
482
Ø Merge
17 Std. 46 Min.
Gemergte PRs (30 T.)
135

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus quarto-dev/quarto-cli

Alle Issues in quarto-dev/quarto-cli

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.