Brand colour overrides can break dark mode sentinel, disabling `renderings` toggle

[mcanouil]

Bug description

When using brand with colour overrides in a document that has both light and dark themes, the renderings cell option (used to show different plot outputs for light vs dark mode) can stop working. The dark rendering is always hidden and the light rendering is always shown, regardless of the active colour scheme.

The root cause is that the dark mode sentinel in _bootstrap-rules.scss (line 1939) depends on the computed blackness of $body-bg:

@if (quarto-color.blackness($body-bg) > $code-block-theme-dark-threshhold) {
  /*! dark */
} @else {
  /*! light */
}

When brand overrides $body-bg with a colour whose HWB blackness falls below the threshold (e.g., blue/#0000FF has 0% blackness despite being perceptually dark), the sentinel evaluates to /*! light */ for the dark stylesheet. This causes data-mode="light" to be set on the dark <link> tag instead of data-mode="dark", so toggleBodyColorMode() never applies the quarto-dark body class, and the CSS rules body.quarto-dark .light-content { display: none } / body.quarto-light .dark-content { display: none } never toggle.

Steps to reproduce

---
brand:
  color: 
    background:
      light: "red"
      dark: "blue"
    foreground:
      light: "green"
      dark: "yellow"
format:
  html:
    theme:
      light:
        - cosmo
        - brand
      dark:
        - darkly
        - brand
---

::: {#fig-caption-crossref}

```{r}
#| label: caption-crossref
#| renderings: [dark, light]
par(bg = "#FFFFFF", fg = "#000000")
plot(1:10) # Shown in `light` mode
title("First plot")


par(bg = "#000000", fg = "#FFFFFF", col.axis = "#FFFFFF")
plot(1:10) # Shown in `dark` mode
title("Second plot")
```

Light and dark renderings with a caption and crossref

:::

Actual behaviour

Both the light and dark bootstrap <link> tags have data-mode="light":

<link href="...bootstrap-760272c23cb19874a8d3af056b140ad0.min.css" class="quarto-color-scheme" id="quarto-bootstrap" data-mode="light">
<link href="...bootstrap-dark-65b74e4f2eba21c947a68701f2701928.min.css" class="quarto-color-scheme quarto-color-alternate" id="quarto-bootstrap" data-mode="light">

Toggling to dark mode enables the dark stylesheet but the body retains the quarto-light class. The dark rendering (dark-content) remains hidden.

Expected behaviour

The dark bootstrap <link> tag should have data-mode="dark":

<link href="...bootstrap-dark-....min.css" class="quarto-color-scheme quarto-color-alternate" id="quarto-bootstrap" data-mode="dark">

Toggling to dark mode should apply the quarto-dark body class, hiding light-content and showing dark-content.

Without brand, the same document (using only cosmo/darkly themes) works correctly: the dark CSS contains the /*! dark */ sentinel and data-mode="dark" is set as expected.

Your environment

• IDE: VSCode
• OS: macOS (Darwin 25.3.0)

Quarto check output

Quarto 99.9.9
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: d36fe5461f754f714cfb62f56d44cf9509760044
      Path: /Users/mcanouil/Projects/quarto-dev/quarto-cli/package/dist/bin

[✓] Checking tools....................OK
      TinyTeX: v2026.02
      VeraPDF: 1.28.2
      Chromium: (not installed)
      Chrome Headless Shell: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/mcanouil/Library/TinyTeX/bin/universal-darwin
      Version: 2025

[✓] Checking Chrome Headless....................OK
      Using: Chrome from QUARTO_CHROMIUM
      Path: /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

[✓] Checking basic markdown render....OK

[mcanouil]

It seems it could be fixed easily by not enforcing theme using CSS colour computation

• quarto-cli/src/command/render/pandoc-html.ts

  Line 226 in 84b751b

  target.attribs["data-mode"] = cssResult.dark ? "dark" : "light";

maybe with the following to not break curent behaviour:

const isDarkByConfig = target.attribs["class"]?.includes("quarto-color-alternate");
target.attribs["data-mode"] = (cssResult.dark || isDarkByConfig) ? "dark" : "light";

[gordonwoodhull]

Fascinating! The code above calculates the blackness of the background color at SCSS compilation time, and injects a comment, which we later read to find out if the stylesheet is light or dark.

Instead, since we usually are generating both light and dark stylesheets and know which one we are generating, we should inject the comment directly.

For the single-theme case and for revealjs we can inject this SCSS:

  @if (color.channel($body-bg, "lightness", $space: oklch) < 50%) {
    /*! dark */
  } @else {
    /*! light */
  }

replacing the incorrect blackness calculation. OKLCH lightness for blue (#0000FF) is 45.2%