cell renderings attribute with light and dark

Author: gordonwoodhull

news/changelog-1.7.md

@@ -43,6 +43,7 @@ All changes included in 1.7:
 
 ## `html` format
 
+- ([#12277](https://github.com/quarto-dev/quarto-cli/pull/12277)): Provide light and dark plot and table renderings with `renderings: [light,dark]`
 - ([#11860](https://github.com/quarto-dev/quarto-cli/issues/11860)): ES6 modules that import other local JS modules in documents with `embed-resources: true` are now correctly embedded.
 
 ## `pdf` format

src/resources/filters/main.lua

@@ -61,6 +61,7 @@ import("./quarto-init/knitr-fixup.lua")
 import("./quarto-post/render-asciidoc.lua")
 import("./quarto-post/book.lua")
 import("./quarto-post/cites.lua")
+import("./quarto-post/cell_renderings.lua")
 import("./quarto-post/delink.lua")
 import("./quarto-post/docx.lua")
 import("./quarto-post/fig-cleanup.lua")
@@ -393,6 +394,9 @@ local quarto_post_filters = {
     },
     traverser = 'jog',
   },
+  { name = "post-choose-cell_renderings",
+    filter = choose_cell_renderings()
+  },
   { name = "post-landscape-div",
     filter = landscape_div(),
     flags = { "has_landscape" },

src/resources/filters/quarto-post/cell_renderings.lua

@@ -0,0 +1,54 @@
+function choose_cell_renderings()
+  function jsonDecodeArray(json)
+    if json:sub(1, 1) == '[' then
+      return quarto.json.decode(json)
+    elseif json:sub(1, 1) == '{' then
+      quarto.log.warning('expected array or scalar', json)
+    else
+      return {json}
+    end
+  end
+  
+  return {
+    Div = function(div)
+      -- Only process cell div with renderings attr
+      if not div.classes:includes("cell") or not div.attributes["renderings"] then
+        return nil
+      end
+      local renderingsJson = div.attributes['renderings']
+      local renderings = jsonDecodeArray(renderingsJson)
+      if not type(renderings) == "table" or #renderings == 0 then
+        quarto.log.warning("renderings expected array of rendering names, got", renderings)
+        return nil
+      end
+      local cods = {}
+      for i, cellOutput in ipairs(div.content) do
+        if cellOutput.classes:includes("cell-output-display") then
+          table.insert(cods, cellOutput)
+        end
+      end
+    
+      if #cods ~= #renderings then
+        quarto.log.warning("need", #renderings, "cell-output-display for renderings", table.concat(renderings, ",") .. ";", "got", #cods)
+        return nil
+      end
+    
+      local outputs = {}
+      for i, r in ipairs(renderings) do
+        outputs[r] = cods[i]
+      end
+      local lightDiv = outputs['light']
+      local darkDiv = outputs['dark']
+    
+      if quarto.format.isHtmlOutput() then
+        div.content = pandoc.Blocks({
+          pandoc.Div(lightDiv.content, pandoc.Attr("", {'light-content'}, {})),
+          pandoc.Div(darkDiv.content, pandoc.Attr("", {'dark-content'}, {}))
+        })
+      else
+        div.content = pandoc.Blocks({lightDiv})
+      end
+      return div
+    end
+  }
+end

src/resources/formats/html/bootstrap/dist/scss/_light-dark.scss

@@ -0,0 +1,7 @@
+body.quarto-light .dark-content {
+  display: none;
+}
+
+body.quarto-dark .light-content {
+  display: none;
+}

src/resources/formats/html/bootstrap/dist/scss/bootstrap.scss

@@ -1,7 +1,6 @@
 @import "mixins/banner";
 @include bsBanner("");
 
-
 // scss-docs-start import-stack
 // Configuration
 @import "variables-dark";
@@ -14,6 +13,7 @@
 @import "type";
 @import "images";
 @import "containers";
+@import "light-dark";
 @import "grid";
 @import "tables";
 @import "forms";

src/resources/schema/cell-attributes.yml

@@ -10,6 +10,11 @@
   schema: string
   description: "Classes to apply to cell container"
 
+- name: renderings
+  schema:
+    arrayOf: string
+  description: "Array of rendering names"
+
 - name: tags
   tags:
     engine: jupyter

tests/docs/smoke-all/dark-mode/matplotlib-brandless.qmd

@@ -0,0 +1,195 @@
+---
+title: "jupyter dark mode - matplotlib"
+engine: jupyter
+format:
+  html:
+    theme:
+      light: united
+      dark: slate
+keep-md: true
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        -
+          - 'div.light-content'
+          - 'div.dark-content'
+        - []
+---
+
+```{python}
+#| echo: false
+import yaml
+import tempfile
+import os
+
+def apply_mpl_colors(bgcolor, fgcolor, primarycolor):
+    fd, name = tempfile.mkstemp("mplstyle")
+    os.close(fd)
+    with open(name, "w") as out:
+        out.write("axes.facecolor: \"%s\"\n" % bgcolor)
+        out.write("axes.edgecolor: \"%s\"\n" % fgcolor)
+        out.write("axes.labelcolor: \"%s\"\n" % fgcolor)
+        out.write("axes.titlecolor: \"%s\"\n" % fgcolor)
+        out.write("figure.facecolor: \"%s\"\n" % bgcolor)
+        out.write("figure.edgecolor: \"%s\"\n" % fgcolor)
+        out.write("text.color: \"%s\"\n" % fgcolor)
+        out.write("xtick.color: \"%s\"\n" % fgcolor)
+        out.write("ytick.color: \"%s\"\n" % fgcolor)
+        # seems to require named color, is there a better way?
+        out.write("axes.prop_cycle: cycler('color', ['%s'])" % primarycolor)
+    plt.style.use(name)
+    os.unlink(name)
+
+def united_colors():
+    apply_mpl_colors("#ffffff", "#333333", "red")
+
+def slate_colors():
+    apply_mpl_colors("#282B30", "#aaaaaa", "white")
+```
+
+### No crossref or caption
+```{python}
+#| echo: false
+#| renderings: [light, dark]
+import numpy as np
+import matplotlib.pyplot as plt
+
+# Parameters for the normal distribution
+mean = 0
+std_dev = 1
+
+# Generate data
+x = np.linspace(mean - 4*std_dev, mean + 4*std_dev, 1000)
+y = (1/(std_dev * np.sqrt(2 * np.pi))) * np.exp(-0.5 * ((x - mean) / std_dev)**2)
+
+# Plotting
+united_colors()
+plt.figure(figsize=(8, 5))
+plt.plot(x, y, label='Normal Distribution')
+plt.title('Normal Distribution Curve')
+plt.xlabel('X-axis')
+plt.ylabel('Probability Density')
+plt.legend()
+plt.grid(True)
+plt.show()
+
+slate_colors()
+plt.figure(figsize=(8, 5))
+plt.plot(x, y, label='Normal Distribution')
+plt.title('Normal Distribution Curve')
+plt.xlabel('X-axis')
+plt.ylabel('Probability Density')
+plt.legend()
+plt.grid(True)
+plt.show()
+```
+
+### With crossref but no caption
+
+::: {#fig-matplotlib-line}
+```{python}
+#| echo: false
+#| renderings: [light, dark]
+import matplotlib.pyplot as plt
+
+united_colors()
+plt.title("Hello")
+plt.plot([1,2,3])
+plt.grid(True)
+plt.show(block=False)
+
+slate_colors()
+plt.figure()
+plt.title("Hello")
+plt.plot([1,2,3])
+plt.grid(True)
+plt.show(block=False)
+```
+:::
+
+### With caption but no crossref
+
+::: {}
+```{python}
+#| echo: false
+#| renderings: [light, dark]
+
+# author: "anthropic claude-3-5-sonnet-20240620"
+import numpy as np
+import matplotlib.pyplot as plt
+
+# Generate data points
+x = np.linspace(0, 2 * np.pi, 100)
+y = np.sin(x)
+
+united_colors()
+plt.figure(figsize=(10, 6))
+plt.plot(x, y)
+plt.title('Sine Wave')
+plt.xlabel('x')
+plt.ylabel('sin(x)')
+plt.grid(True)
+plt.axhline(y=0, color='k', linestyle='--')
+plt.axvline(x=0, color='k', linestyle='--')
+plt.show()
+
+slate_colors()
+plt.figure(figsize=(10, 6))
+plt.plot(x, y)
+plt.title('Sine Wave')
+plt.xlabel('x')
+plt.ylabel('sin(x)')
+plt.grid(True)
+plt.axhline(y=0, color='k', linestyle='--')
+plt.axvline(x=0, color='k', linestyle='--')
+plt.show()
+```
+matplotlib sine wave
+
+:::
+
+### With crossref and caption
+
+::: {#fig-matplotlib-cosine}
+```{python}
+#| echo: false
+#| renderings: [dark, light]
+import numpy as np
+import matplotlib.pyplot as plt
+
+# Generate data points
+x = np.linspace(0, 2 * np.pi, 100)
+y = np.cos(x)
+
+# Create the plot
+slate_colors()
+plt.figure(figsize=(10, 6))
+plt.plot(x, y)
+plt.title('Cosine Wave')
+plt.xlabel('x')
+plt.ylabel('cos(x)')
+plt.grid(True)
+plt.axhline(y=0, color='k', linestyle='--')
+plt.axvline(x=0, color='k', linestyle='--')
+plt.show()
+
+united_colors()
+plt.figure(figsize=(10, 6))
+plt.plot(x, y)
+plt.title('Cosine Wave')
+plt.xlabel('x')
+plt.ylabel('cos(x)')
+plt.grid(True)
+plt.axhline(y=0, color='k', linestyle='--')
+plt.axvline(x=0, color='k', linestyle='--')
+plt.show()
+```
+
+matplotlib cosine wave
+:::
+
+Here's a [link](https://example.com).
+
+
+{{< lipsum 3 >}}