diff --git a/tools/ui-components/.storybook/preview.js b/tools/ui-components/.storybook/preview.js
index 1cc8d03f2d1..3b1bde1b4d9 100644
--- a/tools/ui-components/.storybook/preview.js
+++ b/tools/ui-components/.storybook/preview.js
@@ -41,9 +41,13 @@ function renderTheme(Story, context) {
   // Use the value of the default background to prevent "undefined" className
   const className = selectedBackgroundName || parameters.backgrounds.default;
 
-  return (
-    <div className={className}>
-      <Story />
-    </div>
-  );
+  if (className === 'light-palette') {
+    document.body.classList.remove('dark-palette');
+    document.body.classList.add('light-palette');
+  } else {
+    document.body.classList.remove('light-palette');
+    document.body.classList.add('dark-palette');
+  }
+
+  return <Story />;
 }