diff --git a/package.json b/package.json
index bcd6cc25d9..0664fc64dd 100644
--- a/package.json
+++ b/package.json
@@ -209,7 +209,6 @@
"@storybook/addon-interactions": "^7.6.7",
"@storybook/addon-links": "^7.6.7",
"@storybook/addon-onboarding": "^1.0.10",
- "@storybook/addon-themes": "^8.0.0",
"@storybook/blocks": "^7.6.3",
"@storybook/core-server": "7.6.3",
"@storybook/jest": "^0.2.3",
@@ -299,6 +298,7 @@
"storybook": "^7.6.3",
"storybook-addon-cookie": "^3.2.0",
"storybook-addon-pseudo-states": "^2.1.2",
+ "storybook-dark-mode": "^4.0.1",
"supertest": "^6.1.3",
"ts-jest": "^29.1.1",
"ts-loader": "^9.2.3",
diff --git a/packages/twenty-front/.storybook/main.ts b/packages/twenty-front/.storybook/main.ts
index 82a6b77d62..e3a39f5fce 100644
--- a/packages/twenty-front/.storybook/main.ts
+++ b/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',
],
diff --git a/packages/twenty-front/.storybook/manager-head.html b/packages/twenty-front/.storybook/manager-head.html
new file mode 100644
index 0000000000..0be4849fca
--- /dev/null
+++ b/packages/twenty-front/.storybook/manager-head.html
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/packages/twenty-front/.storybook/preview.ts b/packages/twenty-front/.storybook/preview.tsx
similarity index 82%
rename from packages/twenty-front/.storybook/preview.ts
rename to packages/twenty-front/.storybook/preview.tsx
index ae7cf6028e..86745cdf78 100644
--- a/packages/twenty-front/.storybook/preview.ts
+++ b/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({
- 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 (
+
+
+
+ );
+ },
RootDecorator,
mswDecorator,
],
diff --git a/packages/twenty-front/src/testing/ComponentStorybookLayout.tsx b/packages/twenty-front/src/testing/ComponentStorybookLayout.tsx
index 57fbe65540..284182c4d8 100644
--- a/packages/twenty-front/src/testing/ComponentStorybookLayout.tsx
+++ b/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;
diff --git a/packages/twenty-ui/.storybook/main.ts b/packages/twenty-ui/.storybook/main.ts
index 27f1649f89..270259adfd 100644
--- a/packages/twenty-ui/.storybook/main.ts
+++ b/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',
],
diff --git a/packages/twenty-ui/.storybook/manager-head.html b/packages/twenty-ui/.storybook/manager-head.html
new file mode 100644
index 0000000000..0be4849fca
--- /dev/null
+++ b/packages/twenty-ui/.storybook/manager-head.html
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/packages/twenty-ui/.storybook/preview.ts b/packages/twenty-ui/.storybook/preview.ts
deleted file mode 100644
index f83a29739a..0000000000
--- a/packages/twenty-ui/.storybook/preview.ts
+++ /dev/null
@@ -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({
- themes: {
- light: THEME_LIGHT,
- dark: THEME_DARK,
- },
- defaultTheme: 'light',
- Provider: ThemeProvider,
- }),
- ],
-};
-
-export default preview;
diff --git a/packages/twenty-ui/.storybook/preview.tsx b/packages/twenty-ui/.storybook/preview.tsx
new file mode 100644
index 0000000000..83da6ca43a
--- /dev/null
+++ b/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 (
+
+
+
+ );
+ },
+ ],
+};
+
+export default preview;
diff --git a/yarn.lock b/yarn.lock
index bd7ff00751..cc7ad961a7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10502,7 +10502,7 @@ __metadata:
languageName: node
linkType: hard
-"@radix-ui/react-slot@npm:1.0.2":
+"@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2":
version: 1.0.2
resolution: "@radix-ui/react-slot@npm:1.0.2"
dependencies:
@@ -13180,15 +13180,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/addon-themes@npm:^8.0.0":
- version: 8.0.0
- resolution: "@storybook/addon-themes@npm:8.0.0"
- dependencies:
- ts-dedent: "npm:^2.0.0"
- checksum: 4a095d69c67a84c9f496573cb91c230b8ac82a5a94b79bed95b3c0986585e6d65ea6f1b85bc8c4e2bbac1a4270775e193708665ba1de656b4a3cd02a029ee6fb
- languageName: node
- linkType: hard
-
"@storybook/addon-toolbars@npm:7.6.7":
version: 7.6.7
resolution: "@storybook/addon-toolbars@npm:7.6.7"
@@ -13365,6 +13356,19 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/channels@npm:8.0.6":
+ version: 8.0.6
+ resolution: "@storybook/channels@npm:8.0.6"
+ dependencies:
+ "@storybook/client-logger": "npm:8.0.6"
+ "@storybook/core-events": "npm:8.0.6"
+ "@storybook/global": "npm:^5.0.0"
+ telejson: "npm:^7.2.0"
+ tiny-invariant: "npm:^1.3.1"
+ checksum: 1df4a4e7e3259b959c94d5d4275aeed9fa0c8c139654fb0a6b0c943ec508fa21dd3915cfb276e1f1f363ffd4359ac284e0e05460aa7cc94bd8e0c2138a26a527
+ languageName: node
+ linkType: hard
+
"@storybook/cli@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/cli@npm:7.6.17"
@@ -13443,6 +13447,15 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/client-logger@npm:8.0.6":
+ version: 8.0.6
+ resolution: "@storybook/client-logger@npm:8.0.6"
+ dependencies:
+ "@storybook/global": "npm:^5.0.0"
+ checksum: 8b40a8031d6ec311b5761a95651090b1d07cbece014f623ce9d6e81f3fbb8b6bb75bc535cea88e2ecc4e52994ee718698aaae08d7311e597d926e9395c686b4d
+ languageName: node
+ linkType: hard
+
"@storybook/codemod@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/codemod@npm:7.6.17"
@@ -13486,6 +13499,26 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/components@npm:^8.0.0":
+ version: 8.0.6
+ resolution: "@storybook/components@npm:8.0.6"
+ dependencies:
+ "@radix-ui/react-slot": "npm:^1.0.2"
+ "@storybook/client-logger": "npm:8.0.6"
+ "@storybook/csf": "npm:^0.1.2"
+ "@storybook/global": "npm:^5.0.0"
+ "@storybook/icons": "npm:^1.2.5"
+ "@storybook/theming": "npm:8.0.6"
+ "@storybook/types": "npm:8.0.6"
+ memoizerific: "npm:^1.11.3"
+ util-deprecate: "npm:^1.0.2"
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ checksum: a848bcce56920fa5894f6452cbba988a507d47b52a83992dd6dbe565ef83ec72bb441358c18667a7011eb2d73e14ea20daf27799847f51380696faa407de314a
+ languageName: node
+ linkType: hard
+
"@storybook/core-client@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/core-client@npm:7.6.17"
@@ -13626,6 +13659,15 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/core-events@npm:8.0.6, @storybook/core-events@npm:^8.0.0":
+ version: 8.0.6
+ resolution: "@storybook/core-events@npm:8.0.6"
+ dependencies:
+ ts-dedent: "npm:^2.0.0"
+ checksum: 4771b9c959cbb5434ed410a373100d2a012cec65e2c23205c22c27a5273297ff389d0dd507e20277006ac30f19135bb4505cadac052f2f43d91c2bd9063a5b70
+ languageName: node
+ linkType: hard
+
"@storybook/core-server@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/core-server@npm:7.6.17"
@@ -13866,7 +13908,7 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/icons@npm:^1.2.9":
+"@storybook/icons@npm:^1.2.5, @storybook/icons@npm:^1.2.9":
version: 1.2.9
resolution: "@storybook/icons@npm:1.2.9"
peerDependencies:
@@ -13925,6 +13967,29 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/manager-api@npm:^8.0.0":
+ version: 8.0.6
+ resolution: "@storybook/manager-api@npm:8.0.6"
+ dependencies:
+ "@storybook/channels": "npm:8.0.6"
+ "@storybook/client-logger": "npm:8.0.6"
+ "@storybook/core-events": "npm:8.0.6"
+ "@storybook/csf": "npm:^0.1.2"
+ "@storybook/global": "npm:^5.0.0"
+ "@storybook/icons": "npm:^1.2.5"
+ "@storybook/router": "npm:8.0.6"
+ "@storybook/theming": "npm:8.0.6"
+ "@storybook/types": "npm:8.0.6"
+ dequal: "npm:^2.0.2"
+ lodash: "npm:^4.17.21"
+ memoizerific: "npm:^1.11.3"
+ store2: "npm:^2.14.2"
+ telejson: "npm:^7.2.0"
+ ts-dedent: "npm:^2.0.0"
+ checksum: 719bef42fee448286ca20f82e7a831ef073ee7732118e434930e25a1f9cd838e4be82e7c66e0d6803c4b40e8195a9e43c4b3b6d2b00ae65a4aef65a7d1674905
+ languageName: node
+ linkType: hard
+
"@storybook/manager@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/manager@npm:7.6.17"
@@ -14169,6 +14234,17 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/router@npm:8.0.6":
+ version: 8.0.6
+ resolution: "@storybook/router@npm:8.0.6"
+ dependencies:
+ "@storybook/client-logger": "npm:8.0.6"
+ memoizerific: "npm:^1.11.3"
+ qs: "npm:^6.10.0"
+ checksum: 62a852b3e3f0f92d36a6b43cca350f4370a4f67e8964cb67aad8d1dfe3f7deab8561584ffa10aa69c0028edbc62b8e2fb0c1c949bdaf5a697238354edd43fb31
+ languageName: node
+ linkType: hard
+
"@storybook/telemetry@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/telemetry@npm:7.6.17"
@@ -14301,6 +14377,26 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/theming@npm:8.0.6, @storybook/theming@npm:^8.0.0":
+ version: 8.0.6
+ resolution: "@storybook/theming@npm:8.0.6"
+ dependencies:
+ "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1"
+ "@storybook/client-logger": "npm:8.0.6"
+ "@storybook/global": "npm:^5.0.0"
+ memoizerific: "npm:^1.11.3"
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ react:
+ optional: true
+ react-dom:
+ optional: true
+ checksum: 4870e3d517f93f09937e5d53b1724ad1a39a8990ad232eb2bc1724fe70968cf6b51ffe73d010d0ddd5893d3e87981a491d2506114427dea97ee97e65e942e3e2
+ languageName: node
+ linkType: hard
+
"@storybook/types@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/types@npm:7.6.17"
@@ -14337,6 +14433,17 @@ __metadata:
languageName: node
linkType: hard
+"@storybook/types@npm:8.0.6":
+ version: 8.0.6
+ resolution: "@storybook/types@npm:8.0.6"
+ dependencies:
+ "@storybook/channels": "npm:8.0.6"
+ "@types/express": "npm:^4.7.0"
+ file-system-cache: "npm:2.3.0"
+ checksum: 160f94dfe1502475e3568956f181982e2a4e1ad2d2e1ae0443148490423f313b807139af436f6cfe956b89837a9e4523f45043e55494ef52b2ab833c1003606e
+ languageName: node
+ linkType: hard
+
"@stylistic/eslint-plugin-js@npm:1.5.3, @stylistic/eslint-plugin-js@npm:^1.5.3":
version: 1.5.3
resolution: "@stylistic/eslint-plugin-js@npm:1.5.3"
@@ -43778,6 +43885,22 @@ __metadata:
languageName: node
linkType: hard
+"storybook-dark-mode@npm:^4.0.1":
+ version: 4.0.1
+ resolution: "storybook-dark-mode@npm:4.0.1"
+ dependencies:
+ "@storybook/components": "npm:^8.0.0"
+ "@storybook/core-events": "npm:^8.0.0"
+ "@storybook/global": "npm:^5.0.0"
+ "@storybook/icons": "npm:^1.2.5"
+ "@storybook/manager-api": "npm:^8.0.0"
+ "@storybook/theming": "npm:^8.0.0"
+ fast-deep-equal: "npm:^3.1.3"
+ memoizerific: "npm:^1.11.3"
+ checksum: 201e13e7bbed85ad7a52d65984da9347b0ecaf1458ec569a6645a5e6dc04638b8aa61ed52a56a775321f801f1a035444b6d0d715624aa217f7d6ea7671060d3e
+ languageName: node
+ linkType: hard
+
"storybook@npm:^7.6.3":
version: 7.6.17
resolution: "storybook@npm:7.6.17"
@@ -45675,7 +45798,6 @@ __metadata:
"@storybook/addon-interactions": "npm:^7.6.7"
"@storybook/addon-links": "npm:^7.6.7"
"@storybook/addon-onboarding": "npm:^1.0.10"
- "@storybook/addon-themes": "npm:^8.0.0"
"@storybook/blocks": "npm:^7.6.3"
"@storybook/core-server": "npm:7.6.3"
"@storybook/icons": "npm:^1.2.9"
@@ -45878,6 +46000,7 @@ __metadata:
storybook: "npm:^7.6.3"
storybook-addon-cookie: "npm:^3.2.0"
storybook-addon-pseudo-states: "npm:^2.1.2"
+ storybook-dark-mode: "npm:^4.0.1"
stripe: "npm:^14.17.0"
supertest: "npm:^6.1.3"
ts-jest: "npm:^29.1.1"