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

Aperta
  • Qualcosa non va?
#15,305 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
58/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript
Ambito
frontend

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
Lingua principale
JavaScript
Stelle
6.2k
Fork
482
Merge medio
17h 46m
PR unite (30g)
135

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di quarto-dev/quarto-cli

Tutte le issue di quarto-dev/quarto-cli

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.