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

Abierto
  • ¿Algo no está bien?
#15,305 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
58/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Lenguaje dominante
JavaScript
Estrellas
6.2k
Forks
482
Merge medio
17 h 46 min
PR fusionados (30 d)
135

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de quarto-dev/quarto-cli

Todos los issues de quarto-dev/quarto-cli

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.