From f144f13efc41525ba72fb05855d5649b7a42149c Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Fri, 10 Jan 2025 15:27:51 +0000
Subject: [PATCH] Merge pull request #22818 from
 overleaf/td-storybook-overall-editor-theme

Make theme switcher work in BS5 editor Storybook stories

GitOrigin-RevId: ff9a9a14c2e9bdaccefab2652fbfbd54c544635e
---
 services/web/.storybook/preview.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/services/web/.storybook/preview.tsx b/services/web/.storybook/preview.tsx
index 8707cde5f3..e998af1647 100644
--- a/services/web/.storybook/preview.tsx
+++ b/services/web/.storybook/preview.tsx
@@ -139,7 +139,6 @@ const preview: Preview = {
         items: [
           { value: 'main-', title: 'Default' },
           { value: 'main-light-', title: 'Light' },
-          { value: 'main-ieee-', title: 'IEEE' },
         ],
       },
     },
@@ -154,10 +153,10 @@ const preview: Preview = {
         bootstrap3Style: await import(
           `!!to-string-loader!css-loader!less-loader!../../../services/web/frontend/stylesheets/${theme}style.less`
         ),
-        // NOTE: this uses `${theme}style.scss` rather than `${theme}.scss`
-        // so that webpack only bundles files ending with "style.scss"
+        // Themes are applied differently in Bootstrap 5 code
         bootstrap5Style: await import(
-          `!!to-string-loader!css-loader!resolve-url-loader!sass-loader!../../../services/web/frontend/stylesheets/bootstrap-5/${theme}style.scss`
+          // @ts-ignore
+          `!!to-string-loader!css-loader!resolve-url-loader!sass-loader!../../../services/web/frontend/stylesheets/bootstrap-5/main-style.scss`
         ),
       }
     },
@@ -175,14 +174,18 @@ const preview: Preview = {
       resetMeta(bootstrapVersion)
 
       return (
-        <>
+        <div
+          data-theme={
+            context.globals.theme === 'main-light-' ? 'light' : 'default'
+          }
+        >
           {activeStyle && <style>{activeStyle.default}</style>}
           <Story
             {...context}
             // force re-renders when switching between Bootstrap versions
             key={bootstrapVersion}
           />
-        </>
+        </div>
       )
     },
   ],