Storybook fix dark mode (#4865)

preview has now also a dark background & added a one click change theme
button

<img width="994" alt="Bildschirmfoto 2024-04-06 um 18 27 45"
src="https://github.com/twentyhq/twenty/assets/48770548/95f12617-e48f-4492-9b51-13410aff43ee">

packages/twenty-front/.storybook/main.ts

@@ -33,7 +33,7 @@ const config: StorybookConfig = {
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
     '@storybook/addon-coverage',
-    '@storybook/addon-themes',
+    'storybook-dark-mode',
     'storybook-addon-cookie',
     'storybook-addon-pseudo-states',
   ],

packages/twenty-front/.storybook/manager-head.html

@@ -0,0 +1,5 @@
+<style>
+    [data-is-storybook="true"] {
+        background-color: transparent!important;
+    }
+</style>

packages/twenty-front/.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import { ThemeProvider } from '@emotion/react';
-import { withThemeFromJSXProvider } from '@storybook/addon-themes';
-import { Preview, ReactRenderer } from '@storybook/react';
+import { Preview } from '@storybook/react';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
+import { useDarkMode } from 'storybook-dark-mode';
 
 import { THEME_DARK } from '@/ui/theme/constants/ThemeDark';
 import { THEME_LIGHT } from '@/ui/theme/constants/ThemeLight';
@@ -30,14 +30,16 @@ initialize({
 
 const preview: Preview = {
   decorators: [
-    withThemeFromJSXProvider<ReactRenderer>({
-      themes: {
-        light: THEME_LIGHT,
-        dark: THEME_DARK,
-      },
-      defaultTheme: 'light',
-      Provider: ThemeProvider,
-    }),
+    (Story) => {
+      const mode = useDarkMode() ? 'Dark' : 'Light';
+
+      const theme = mode === 'Dark' ? THEME_DARK : THEME_LIGHT;
+      return (
+        <ThemeProvider theme={theme}>
+          <Story />
+        </ThemeProvider>
+      );
+    },
     RootDecorator,
     mswDecorator,
   ],

packages/twenty-front/src/testing/ComponentStorybookLayout.tsx

@@ -1,8 +1,6 @@
 import styled from '@emotion/styled';
 
 const StyledLayout = styled.div<{ width?: number }>`
-  background: ${({ theme }) => theme.background.primary};
-  border: 1px solid ${({ theme }) => theme.border.color.light};
   border-radius: 5px;
 
   display: flex;

packages/twenty-ui/.storybook/main.ts

@@ -8,7 +8,7 @@ const config: StorybookConfig = {
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
     '@storybook/addon-coverage',
-    '@storybook/addon-themes',
+    'storybook-dark-mode',
     'storybook-addon-cookie',
     'storybook-addon-pseudo-states',
   ],

packages/twenty-ui/.storybook/manager-head.html

@@ -0,0 +1,5 @@
+<style>
+    [data-is-storybook="true"] {
+        background-color: transparent!important;
+    }
+</style>

packages/twenty-ui/.storybook/preview.ts

@@ -1,21 +0,0 @@
-import { ThemeProvider } from '@emotion/react';
-import { withThemeFromJSXProvider } from '@storybook/addon-themes';
-import { Preview, ReactRenderer } from '@storybook/react';
-
-import { THEME_DARK, THEME_LIGHT } from '../src/theme/index';
-
-const preview: Preview = {
-  // TODO: Add toggle for darkTheme.
-  decorators: [
-    withThemeFromJSXProvider<ReactRenderer>({
-      themes: {
-        light: THEME_LIGHT,
-        dark: THEME_DARK,
-      },
-      defaultTheme: 'light',
-      Provider: ThemeProvider,
-    }),
-  ],
-};
-
-export default preview;

packages/twenty-ui/.storybook/preview.tsx

@@ -0,0 +1,22 @@
+import { ThemeProvider } from '@emotion/react';
+import { Preview } from '@storybook/react';
+import { useDarkMode } from 'storybook-dark-mode';
+
+import { THEME_DARK, THEME_LIGHT } from '../src/theme/index';
+
+const preview: Preview = {
+  decorators: [
+    (Story) => {
+      const mode = useDarkMode() ? 'Dark' : 'Light';
+
+      const theme = mode === 'Dark' ? THEME_DARK : THEME_LIGHT;
+      return (
+        <ThemeProvider theme={theme}>
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ],
+};
+
+export default preview;