fix: column-margin with renderings option (#13825)

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.
 

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

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;
 }

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))
+```