diff --git a/news/changelog-1.9.md b/news/changelog-1.9.md index ff2c6927681..1cfffe9dd4f 100644 --- a/news/changelog-1.9.md +++ b/news/changelog-1.9.md @@ -47,6 +47,7 @@ All changes included in 1.9: - ([#13413](https://github.com/quarto-dev/quarto-cli/issues/13413)): Fix uncentered play button in `video` shortcodes from cross-reference divs. (author: @bruvellu) - ([#13508](https://github.com/quarto-dev/quarto-cli/issues/13508)): Add `aria-label` support to `video` shortcode for improved accessibility. - ([#13685](https://github.com/quarto-dev/quarto-cli/issues/13685)): Fix remote font URLs in brand extensions being incorrectly joined with the extension path, resulting in broken font imports. +- ([#13825](https://github.com/quarto-dev/quarto-cli/issues/13825)): Fix `column: margin` not working with `renderings: [light, dark]` option. Column classes are now preserved when applying theme classes to cell outputs. - ([#13883](https://github.com/quarto-dev/quarto-cli/issues/13883)): Fix unequal top/bottom spacing in simple untitled callouts. - ([#13900](https://github.com/quarto-dev/quarto-cli/issues/13900)): Warn when `renderings` cell option contains duplicate names. Previously, duplicate names like `[dark, light, dark, light]` would silently use only the last output for each name. diff --git a/src/resources/filters/quarto-post/cell-renderings.lua b/src/resources/filters/quarto-post/cell-renderings.lua index 712f3ac80d9..1aab630a6d2 100644 --- a/src/resources/filters/quarto-post/cell-renderings.lua +++ b/src/resources/filters/quarto-post/cell-renderings.lua @@ -57,8 +57,11 @@ function choose_cell_renderings() blocks:insert(darkDiv) end elseif quarto.format.isHtmlOutput() and lightDiv and darkDiv then - blocks:insert(pandoc.Div(lightDiv.content, pandoc.Attr("", {'light-content'}, {}))) - blocks:insert(pandoc.Div(darkDiv.content, pandoc.Attr("", {'dark-content'}, {}))) + -- Preserve existing classes (e.g., column-margin, cell-output-display) and add theme class + lightDiv.classes:insert('light-content') + darkDiv.classes:insert('dark-content') + blocks:insert(lightDiv) + blocks:insert(darkDiv) else blocks:insert(lightDiv or darkDiv) end diff --git a/src/resources/formats/html/bootstrap/_bootstrap-rules.scss b/src/resources/formats/html/bootstrap/_bootstrap-rules.scss index f2dfa7e0829..8c041fd8c71 100644 --- a/src/resources/formats/html/bootstrap/_bootstrap-rules.scss +++ b/src/resources/formats/html/bootstrap/_bootstrap-rules.scss @@ -730,6 +730,12 @@ aside, display: block; } +// Fix for light/dark renderings in column-margin: when light-content is hidden +// in dark mode, remove padding-top from dark-content so it aligns correctly +body.quarto-dark .column-margin.column-container > .light-content + .dark-content { + padding-top: 0; +} + .column-margin.column-container > *.collapse:not(.show) { display: none; } diff --git a/tests/docs/smoke-all/dark-mode/renderings-column-margin.qmd b/tests/docs/smoke-all/dark-mode/renderings-column-margin.qmd new file mode 100644 index 00000000000..ea6d3cc0ae7 --- /dev/null +++ b/tests/docs/smoke-all/dark-mode/renderings-column-margin.qmd @@ -0,0 +1,27 @@ +--- +title: "renderings with column-margin" +format: + html: + theme: + light: flatly + dark: darkly +_quarto: + tests: + html: + ensureHtmlElements: + - + - 'div.cell div.column-margin div.cell-output-display.light-content' + - 'div.cell div.column-margin div.cell-output-display.dark-content' + - [] +--- + +This tests that `column: margin` works together with `renderings: [light, dark]`. +The column-margin class should be preserved when creating light/dark content divs. + +```{r} +#| column: margin +#| renderings: [light, dark] + +knitr::kable(data.frame(x = "Light mode", y = 1)) +knitr::kable(data.frame(x = "Dark mode", y = 2)) +```