feat(storybook): add theme toggle (#44234)

tools/ui-components/.storybook/preview.js

@@ -5,5 +5,39 @@ export const parameters = {
       color: /(background|color)$/i,
       date: /Date$/
     }
+  },
+  backgrounds: {
+    values: [
+      {
+        name: 'light',
+        value: '#ffffff'
+      },
+      {
+        name: 'dark',
+        value: '#0a0a23'
+      }
+    ]
   }
 };
+
+export const decorators = [renderTheme];
+
+/**
+ * Gets matching theme name for currently selected background and provides it
+ * to the story.
+ */
+function renderTheme(Story, context) {
+  const selectedBackgroundValue = context.globals.backgrounds?.value;
+  const selectedBackgroundName = parameters.backgrounds.values.find(
+    bg => bg.value === selectedBackgroundValue
+  )?.name;
+
+  // There can be no background selected, prevent "undefined" className
+  const className = selectedBackgroundName || '';
+
+  return (
+    <div className={className}>
+      <Story />
+    </div>
+  );
+}