In cell `column: margin` doesn't work with `renderings: [light, dark]`?

[cderv]

Discussed in https://github.com/orgs/quarto-dev/discussions/13811

^{Originally posted by tentacles-from-outer-space December 18, 2025}

Description

Is it known issue that this options doesn't work together? Is it related to cell cross-reference with renderings option? Or I am missing something?

---
title: "Untitled"
format:
  html:
    theme:
      light: flatly
      dark: darkly
---

```{r}
table_light <- data.frame(x = "I am light mode table", y=1)
table_dark <- data.frame(x = "DARK MODE", y=2)
```

# dark/light mode - works

```{r}
#| renderings: [light, dark]

knitr::kable(table_light)
knitr::kable(table_dark)
```

# to the Margin - works

```{r}
#| column: margin

knitr::kable(table_light)
knitr::kable(table_dark)
```

# both together - not work

```{r}
#| column: margin
#| renderings: [light, dark]

knitr::kable(table_light)
knitr::kable(table_dark)
```

# with explicit div - works

::: {.column-margin}

```{r}
#| renderings: [light, dark]

knitr::kable(table_light)
knitr::kable(table_dark)
```

:::

[cderv]

Looking into this to understand, this is what I found

The column classes are being lost during filter processing. When both options are used together, the HTML output shows the renderings work but the column layout doesn't:

<!-- Expected: both column-margin AND light-content/dark-content classes -->
<div class="cell-output-display column-margin light-content">...</div>
<div class="cell-output-display column-margin dark-content">...</div>

<!-- Actual: only light-content/dark-content, missing column-margin -->
<div class="light-content">...</div>
<div class="dark-content">...</div>

This happens because of filter ordering:

1. columns-preprocess runs first
   

   quarto-cli/src/resources/filters/main.lua

   Lines 600 to 603 in b323477

   	{ name = "layout-columns-preprocess",
   	filter = columns_preprocess(),
   	traverser = 'jog',
   	},

   It catches the column margin class on the cell div
   

   quarto-cli/src/resources/filters/layout/columns-preprocess.lua

   Lines 27 to 36 in b323477

   	Div = function(el)
   	if el.classes:includes('cell') then
   	-- for code chunks that aren't layout panels, forward the column classes to the output
   	-- figures or tables (otherwise, the column class should be used to layout the whole panel)
   	resolveColumnClassesForCodeCell(el)
   	else
   	resolveColumnClassesForEl(el)
   	end
   	return el
   	end,

   and forwards column classes from the cell div to the .cell-output-display divs
   

   quarto-cli/src/resources/filters/layout/columns-preprocess.lua

   Lines 88 to 144 in b323477

   	for i, childEl in ipairs(el.content) do
   	if childEl.classes ~= nil and childEl.classes:includes('cell-output-display') then
   	-- look through the children for any figures or tables
   	local forwarded = false
   	for j, figOrTableEl in ipairs(childEl.content) do
   	local custom = _quarto.ast.resolve_custom_data(figOrTableEl)
   	if custom ~= nil then
   	local ref_type = crossref.categories.by_name[custom.type].ref_type
   	local custom_classes = float_classes[ref_type]
   	local custom_caption_classes = float_caption_classes[ref_type]
   	-- applyClasses(colClasses, captionClasses, containerEl, colEl, captionEl, scope)
   	applyClasses(custom_classes, custom_caption_classes, el, childEl, custom, ref_type)
   	else
   	local figure = discoverFigure(figOrTableEl, false)
   	if figure ~= nil then
   	-- forward to figures
   	applyClasses(figClasses, figCaptionClasses, el, childEl, figure, 'fig')
   	forwarded = true
   	elseif hasFigureRef(figOrTableEl) then
   	-- forward to figure divs
   	applyClasses(figClasses, figCaptionClasses, el, childEl, figOrTableEl, 'fig')
   	forwarded = true
   	elseif (is_regular_node(figOrTableEl, "Div") and hasTableRef(figOrTableEl)) then
   	-- for a table div, apply the classes to the figOrTableEl itself
   	applyClasses(tblClasses, tblCaptionClasses, el, childEl, figOrTableEl, 'tbl')
   	forwarded = true
   	elseif figOrTableEl.t == 'Table' then
   	-- the figOrTableEl is a table, just apply the classes to the div around it
   	applyClasses(tblClasses, tblCaptionClasses, el, childEl, childEl, 'tbl')
   	forwarded = true
   	elseif figOrTableEl.t == "Figure" then
   	-- the figOrTableEl is a table, just apply the classes to the div around it
   	applyClasses(figClasses, figCaptionClasses, el, childEl, figOrTableEl, 'fig')
   	forwarded = true
   	end
   	end
   	end
   	-- no known children were discovered, apply the column classes to the cell output display itself
   	if not forwarded then
   	-- figure out whether there are tables inside this element
   	-- if so, use tbl scope, otherwise treat as a fig
   	local tableCount = countTables(el)
   	local scope = 'fig'
   	if tableCount > 0 then
   	scope = 'tbl'
   	end
   	-- forward the classes from the proper scope onto the cell-output-display div
   	local colClasses = computeClassesForScopedColumns(el, scope)
   	local capClasses = computeClassesForScopedCaption(el, scope)
   	applyClasses(colClasses, capClasses, el, childEl, childEl, scope)
   	end
   	end
   	end

2. cell-renderings runs second
   

   quarto-cli/src/resources/filters/main.lua

   Lines 396 to 399 in b323477

   	{ name = "post-choose-cell_renderings",
   	filter = choose_cell_renderings(),
   	flags = { "has_renderings" },
   	},

   and creates new divs for HTML output:
   

   quarto-cli/src/resources/filters/quarto-post/cell-renderings.lua

   Lines 54 to 56 in b323477

   	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'}, {})))

   The filter unwraps lightDiv and darkDiv to get their content, then creates entirely new divs with only the theme classes. This discards the existing .cell-output-display divs that columns-preprocess had already annotated with column classes.

The explicit div workaround works because the .column-margin class is on a parent div that the renderings filter doesn't touch.

Did we try keeping the other classes on the .cell-output-display and just adding light or dark class ?

I don't know if can find generic support, but maybe we could try make exception feature by feature. Starting by column margin here.

Another way to this is that we need to fix column margin so that #| column: margin does create the div syntax in the intermediate instead of use having to deal with .cell .column margin. But this add a div layer so not sure it is without side effect. We have a lot of processing, include html post processing expected class somewhere. Example:

quarto-cli/src/format/html/format-html-bootstrap.ts

Lines 333 to 337 in b323477

	// Ensure that any magin figures / images are marked as fluid
	// Attempt to fix https://github.com/quarto-dev/quarto-cli/issues/5516
	const marginImgNodes = doc.querySelectorAll(
	".column-margin .cell-output-display img:not(.img-fluid)",
	);