Fix storybook backgrounds in MDX

change/@ni-nimble-components-d2bcd216-9379-4164-aabb-5137f31fc546.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Fix sb mdx backgrounds",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/nimble-components/.storybook/preview.js

@@ -61,6 +61,33 @@ export const parameters = {
     }
 };
 
+const createOrUpdateBackgroundWorkaround = style => {
+    let styleElement = document.querySelector('.nimble-background-workaround');
+    if (!styleElement) {
+        styleElement = document.createElement('style');
+        styleElement.classList.add('nimble-background-workaround');
+        document.head.append(styleElement);
+    }
+    styleElement.innerHTML = style;
+};
+
+// Storybook background plugin does not support mdx
+// Workaround based on: https://github.com/storybookjs/storybook/issues/13323#issuecomment-876296801
+export default {
+    decorators: [
+        (story, context) => {
+            const defaultBackgroundColorKey = context?.parameters?.backgrounds?.default;
+            const defaultBackgroundColor = context?.parameters?.backgrounds?.values?.find(v => v.name === defaultBackgroundColorKey)?.value;
+            const currentBackgroundColor = context?.globals?.backgrounds?.value ?? defaultBackgroundColor;
+            const style = `.docs-story {
+                background-color: ${currentBackgroundColor}
+            }`;
+            createOrUpdateBackgroundWorkaround(style);
+            return story();
+        }
+    ]
+};
+
 // Storybook's default serialization of events includes the serialized event target. This can
 // be quite large, such as in a table with a lot of records. Therefore, the serialization depth
 // should be limited to avoid poor performance.