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

@@ -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>
       )
     },
   ],