apply body.quarto-dark if default theme is dark

Author: gordonwoodhull

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

@@ -1060,8 +1060,17 @@ function bootstrapHtmlFinalizer(format: Format, flags: PandocFlags) {
       }
     }
 
-    // start body with .quarto-light for proper display when JS is disabled
-    doc.body.classList.add("quarto-light");
+    // start body with light or dark class for proper display when JS is disabled
+    let initialLightDarkClass = "quarto-light";
+    // some logic duplicated from resolveThemeLayer
+    const theme = format.metadata.theme;
+    if (theme && !Array.isArray(theme) && typeof theme === "object") {
+      const keys = Object.keys(theme);
+      if(keys.length > 1 && keys[0] === "dark") {
+        initialLightDarkClass = "quarto-dark";
+      }
+    }
+    doc.body.classList.add(initialLightDarkClass);
 
     // If there is no margin content and no toc in the right margin
     // then lower the z-order so everything else can get on top

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

@@ -0,0 +1,196 @@
+---
+title: "jupyter dark mode - matplotlib"
+engine: jupyter
+format:
+  html:
+    theme:
+      dark: slate
+      light: united
+keep-md: true
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        -
+          - 'body.quarto-dark'
+          - 'div.cell div.light-content'
+          - 'div.cell 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 >}}

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

@@ -12,6 +12,7 @@ _quarto:
     html:
       ensureHtmlElements:
         -
+          - 'body.quarto-light'
           - 'div.cell div.light-content'
           - 'div.cell div.dark-content'
         - []