diff --git a/tools/ui-components/.storybook/preview.js b/tools/ui-components/.storybook/preview.js
index edfafd9b8a4..c2d12f3b988 100644
--- a/tools/ui-components/.storybook/preview.js
+++ b/tools/ui-components/.storybook/preview.js
@@ -10,11 +10,11 @@ export const parameters = {
   backgrounds: {
     values: [
       {
-        name: 'light',
+        name: 'light-palette',
         value: '#ffffff'
       },
       {
-        name: 'dark',
+        name: 'dark-palette',
         value: '#0a0a23'
       }
     ]
diff --git a/tools/ui-components/src/colors.css b/tools/ui-components/src/colors.css
index 1eed80f522c..4ee7ca05932 100644
--- a/tools/ui-components/src/colors.css
+++ b/tools/ui-components/src/colors.css
@@ -89,8 +89,7 @@
   --red90: var(--red90);
 }
 
-html,
-div.light {
+.light-palette {
   --foreground-primary: var(--gray90);
   --foreground-secondary: var(--gray85);
   --foreground-tertiary: var(--gray80);
@@ -109,8 +108,7 @@ div.light {
   --focus-outline-color: var(--blue50);
 }
 
-html.dark,
-div.dark {
+.dark-palette {
   --foreground-primary: var(--gray00);
   --foreground-secondary: var(--gray05);
   --foreground-tertiary: var(--gray10);