Force light mode for notebook outputs

src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss

@@ -10,14 +10,3 @@
     0 0.2rem 0.5rem var(--pst-color-shadow),
     0 0 0.0625rem var(--pst-color-shadow) !important;
 }
-
-/**
-   * Set background of some cell outputs to white-ish to make sure colors work
-   * This is because many libraries make output that only looks good on white
-   */
-@mixin cell-output-background {
-  color: var(--pst-color-on-background);
-  background-color: var(--pst-color-text-base);
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-}

src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss

@@ -6,28 +6,56 @@
  * In the future, we might add dark theme support for specific packages.
  */
 
-/*******************************************************************************
- * nbsphinx
- */
-html div.rendered_html,
-// NBsphinx ipywidgets output selector
-html .jp-RenderedHTMLCommon {
-  table {
-    table-layout: auto;
+// For both nbsphinx and MyST-NB, force light mode because many notebook outputs
+// do not support dark mode.
+
+.bd-content {
+  // nbsphinx
+  .nboutput,
+  // MyST-NB
+  .cell_output {
+    @include theme-colors("light");
+    @include sd-colors-for-mode("light");
+    color-scheme: light;
+    color: var(--pst-color-text-base);
   }
 }
 
 // Dark theme special-cases
 html[data-theme="dark"] .bd-content {
+  @mixin cell-output-background {
+    background-color: var(--pst-color-background);
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+  }
+
   .nboutput {
-    .output_area.rendered_html {
+    .output_area {
       @include cell-output-background;
     }
 
     .output_area.stderr {
       background-color: var(--pst-color-danger);
     }
   }
+
+  div.cell_output {
+    img,
+    .text_html {
+      @include cell-output-background;
+    }
+  }
+}
+
+/*******************************************************************************
+ * nbsphinx
+ */
+html div.rendered_html,
+// NBsphinx ipywidgets output selector
+html .jp-RenderedHTMLCommon {
+  table {
+    table-layout: auto;
+  }
 }
 
 // Add extra padding to the final item in an nbsphinx container
@@ -44,16 +72,6 @@ div.cell_output .output {
   overflow-x: auto;
 }
 
-// Dark theme special-cases
-html[data-theme="dark"] .bd-content {
-  div.cell_output {
-    img,
-    .text_html {
-      @include cell-output-background;
-    }
-  }
-}
-
 // Prevent tables from scrunching together
 .bd-content {
   div.cell_input {

src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss

@@ -78,38 +78,42 @@ $all-colors: map-merge($pst-semantic-colors, $extra-semantic-colors);
   --sd-color-#{$name}-highlight: var(--pst-color-#{$name}-highlight);
 }
 
-// Now we override the --sd-color-* variables.
-@each $mode in (light, dark) {
-  html[data-theme="#{$mode}"] {
-    // check if this color is defined differently for light/dark
-    @each $name in $sd-semantic-color-names {
-      $definition: map-get($all-colors, $name);
-      @if type-of($definition) == map {
-        @each $key, $value in $definition {
-          @if str-index($key, $mode) != null {
-            // since now we define the bg colours in the semantic colours and not
-            // by changing opacity, we need to check if the key contains bg and the
-            // correct mode (light/dark)
-            @if str-index($key, "bg") != null {
-              --sd-color-#{$name}-bg: #{$value};
-              // create local variable
-              $bg-var: --sd-color-#{$name}-bg;
-              $value: check-color($value);
-              --sd-color-#{$name}-bg-text: #{a11y-combination($value)};
-            } @else {
-              $value: check-color($value);
-              @include create-sd-colors($value, $name);
-            }
+@mixin sd-colors-for-mode($mode) {
+  // check if this color is defined differently for light/dark
+  @each $name in $sd-semantic-color-names {
+    $definition: map-get($all-colors, $name);
+    @if type-of($definition) == map {
+      @each $key, $value in $definition {
+        @if str-index($key, $mode) != null {
+          // since now we define the bg colours in the semantic colours and not
+          // by changing opacity, we need to check if the key contains bg and the
+          // correct mode (light/dark)
+          @if str-index($key, "bg") != null {
+            --sd-color-#{$name}-bg: #{$value};
+            // create local variable
+            $bg-var: --sd-color-#{$name}-bg;
+            $value: check-color($value);
+            --sd-color-#{$name}-bg-text: #{a11y-combination($value)};
+          } @else {
+            $value: check-color($value);
+            @include create-sd-colors($value, $name);
           }
         }
-      } @else {
-        $value: map-get($all-colors, $name);
-        @include create-sd-colors($value, $name);
       }
+    } @else {
+      $value: map-get($all-colors, $name);
+      @include create-sd-colors($value, $name);
     }
   }
 }
 
+// Now we override the --sd-color-* variables.
+@each $mode in (light, dark) {
+  html[data-theme="#{$mode}"] {
+    @include sd-colors-for-mode($mode);
+  }
+}
+
 // Make sure the color border variables are set using our variables
 @each $mode in (light, dark) {
   html[data-theme="#{$mode}"] {