diff --git a/storybook/.storybook/main.css b/storybook/.storybook/main.css
index 9e27ba6df55..d187fc52d8b 100644
--- a/storybook/.storybook/main.css
+++ b/storybook/.storybook/main.css
@@ -15,6 +15,16 @@ body.dark {
   color: #fff;
 }
 
+body.hc-light {
+  background-color: #fff;
+  color: #000;
+}
+
+body.hc-dark {
+  background-color: #000;
+  color: #fff;
+}
+
 /* Docs page story preview containers */
 body.light .docs-story {
   background-color: #f6f6f6;
@@ -24,6 +34,14 @@ body.dark .docs-story {
   background-color: #222222;
 }
 
+body.hc-light .docs-story {
+  background-color: #fff;
+}
+
+body.hc-dark .docs-story {
+  background-color: #000;
+}
+
 /* Storybook's canvas background */
 body.light .sb-show-main {
   background-color: #f6f6f6;
@@ -32,3 +50,11 @@ body.light .sb-show-main {
 body.dark .sb-show-main {
   background-color: #222222;
 }
+
+body.hc-light .sb-show-main {
+  background-color: #fff;
+}
+
+body.hc-dark .sb-show-main {
+  background-color: #000;
+}
diff --git a/storybook/.storybook/preview.ts b/storybook/.storybook/preview.ts
index 7e3d36cd58b..f7b26f191c1 100644
--- a/storybook/.storybook/preview.ts
+++ b/storybook/.storybook/preview.ts
@@ -35,6 +35,8 @@ const preview: Preview = {
       themes: {
         light: 'light',
         dark: 'dark',
+        'hc-light': 'hc-light',
+        'hc-dark': 'hc-dark',
       },
       defaultTheme: 'light',
       parentSelector: 'body',