Skip to content

Comments

Fix dark mode sentinel for saturated brand colours (#14084)#14085

Open
gordonwoodhull wants to merge 1 commit intomainfrom
bugfix/14084
Open

Fix dark mode sentinel for saturated brand colours (#14084)#14085
gordonwoodhull wants to merge 1 commit intomainfrom
bugfix/14084

Conversation

@gordonwoodhull
Copy link
Contributor

Summary

  • Fixes dark mode detection for brand colour overrides with perceptually-dark but low-HWB-blackness colours (e.g. blue #0000FF)
  • The old sentinel used HWB blackness($body-bg) which returns 0% for blue, incorrectly classifying dark themes as light
  • For HTML dual-theme builds, literal /*! dark */ / /*! light */ comments are now injected from the TypeScript pipeline which knows the theme at build time
  • For HTML single-theme and RevealJS, the sentinel now uses oklch perceptual lightness (color.channel($bg, "lightness", $space: oklch) < 50%) which correctly identifies dark colours regardless of saturation

Closes #14084

Test plan

  • Playwright tests for HTML dual-theme with blue brand background (toggle applies quarto-dark)
  • Playwright tests for HTML single-theme with blue brand background (data-mode attributes correct)
  • Playwright tests for RevealJS dark theme with blue brand background (body.quarto-dark, dark syntax highlighting)
  • Playwright tests for RevealJS dark theme baseline (no brand, still works)
  • All 78 existing HTML dark mode tests pass (no regressions)
  • All 6 existing RevealJS light-dark-content tests pass
  • Verified new tests fail without fix, pass with fix

🤖 Generated with Claude Code

…4084)

The dark/light sentinel used HWB blackness() which returns 0% for
colours like blue (#0000FF), incorrectly classifying them as light.

For HTML dual-theme builds, inject literal /*! dark */ and /*! light */
comments from the TS pipeline which knows the theme at build time.
For HTML single-theme and RevealJS, use oklch perceptual lightness
(color.channel($bg, "lightness", $space: oklch) < 50%) which correctly
identifies perceptually dark colours regardless of saturation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@posit-snyk-bot
Copy link
Collaborator

posit-snyk-bot commented Feb 22, 2026

Snyk checks have passed. No issues have been found so far.

Status Scanner Critical High Medium Low Total (0)
Open Source Security 0 0 0 0 0 issues
Licenses 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@gordonwoodhull gordonwoodhull added this to the v1.9 milestone Feb 22, 2026
Copy link
Collaborator

@mcanouil mcanouil left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've tried on my real example and this seems to work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

3 participants