RocketChat · tassoevan · Jan 26, 2026 · Jan 23, 2026 · Jan 26, 2026
diff --git a/.changeset/proud-tables-shave.md b/.changeset/proud-tables-shave.md
@@ -0,0 +1,10 @@
+---
+'@rocket.chat/storybook-dark-mode': minor
+'@rocket.chat/fuselage-toastbar': patch
+'@rocket.chat/fuselage-forms': patch
+'@rocket.chat/onboarding-ui': patch
+'@rocket.chat/fuselage': patch
+'@rocket.chat/layout': patch
+---
+
+feat(storybook-dark-mode): Fork `storybook-dark-mode`
diff --git a/.yarn/patches/storybook-dark-mode-npm-4.0.2-1acb0927fb.patch b/.yarn/patches/storybook-dark-mode-npm-4.0.2-1acb0927fb.patch
diff --git a/README.md b/README.md
@@ -27,6 +27,7 @@
 | 📦 [`@rocket.chat/mp3-encoder`](/packages/mp3-encoder) | A LAME encoder to be used in web workers | [![npm](https://img.shields.io/npm/v/@rocket.chat/mp3-encoder?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/mp3-encoder) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/mp3-encoder?style=flat-square) |
 | 📦 [`@rocket.chat/onboarding-ui`](/packages/onboarding-ui) | Set of components and functions for the onboarding experience on Rocket.Chat | [![npm](https://img.shields.io/npm/v/@rocket.chat/onboarding-ui?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/onboarding-ui) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/onboarding-ui?style=flat-square) |
 | 📦 [`@rocket.chat/prettier-config`](/packages/prettier-config) | Prettier configuration for Rocket.Chat repositories | [![npm](https://img.shields.io/npm/v/@rocket.chat/prettier-config?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/prettier-config) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/prettier-config?style=flat-square) |
+| 📦 [`@rocket.chat/storybook-dark-mode`](/packages/storybook-dark-mode) | Toggle between light and dark mode in Storybook (Rocket.Chat fork) | [![npm](https://img.shields.io/npm/v/@rocket.chat/storybook-dark-mode?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/storybook-dark-mode) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/storybook-dark-mode?style=flat-square) |
 | 📦 [`@rocket.chat/string-helpers`](/packages/string-helpers) | Helper functions for string manipulation | [![npm](https://img.shields.io/npm/v/@rocket.chat/string-helpers?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/string-helpers) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/string-helpers?style=flat-square) |
 | 📦 [`@rocket.chat/styled`](/packages/styled) | A simple styled API for React components | [![npm](https://img.shields.io/npm/v/@rocket.chat/styled?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/styled) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/styled?style=flat-square) |
 | 📦 [`@rocket.chat/stylis-logical-props-middleware`](/packages/stylis-logical-props-middleware) | Stylis middleware to handle CSS Logical Properties and their fallbacks | [![npm](https://img.shields.io/npm/v/@rocket.chat/stylis-logical-props-middleware?style=flat-square)](https://www.npmjs.com/package/@rocket.chat/stylis-logical-props-middleware) | ![deps](https://img.shields.io/librariesio/release/npm/@rocket.chat/stylis-logical-props-middleware?style=flat-square) |
diff --git a/packages/fuselage-forms/.storybook/DocsContainer.tsx b/packages/fuselage-forms/.storybook/DocsContainer.tsx
@@ -1,9 +1,9 @@
+import { DARK_MODE_EVENT_NAME } from '@rocket.chat/storybook-dark-mode';
 import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks';
 import type { ComponentPropsWithoutRef } from 'react';
 import { useEffect, useState } from 'react';
 import { addons } from 'storybook/preview-api';
 import { themes } from 'storybook/theming';
-import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 
 const channel = addons.getChannel();
 

diff --git a/packages/fuselage-forms/.storybook/main.ts b/packages/fuselage-forms/.storybook/main.ts
@@ -4,7 +4,7 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 
 export default {
   addons: [
-    getAbsolutePath('storybook-dark-mode'),
+    getAbsolutePath('@rocket.chat/storybook-dark-mode'),
     getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
     getAbsolutePath('@storybook/addon-docs'),
   ],

diff --git a/packages/fuselage-forms/.storybook/preview.tsx b/packages/fuselage-forms/.storybook/preview.tsx
@@ -1,9 +1,9 @@
 import { PaletteStyleTag } from '@rocket.chat/fuselage';
 import breakpointTokens from '@rocket.chat/fuselage-tokens/breakpoints.json';
 import surface from '@rocket.chat/fuselage-tokens/dist/surface.json';
+import { useDarkMode } from '@rocket.chat/storybook-dark-mode';
 import type { Preview } from '@storybook/react-webpack5';
 import { themes } from 'storybook/theming';
-import { useDarkMode } from 'storybook-dark-mode';
 
 import manifest from '../package.json';
 

diff --git a/packages/fuselage-forms/package.json b/packages/fuselage-forms/package.json
@@ -37,6 +37,7 @@
   "devDependencies": {
     "@rocket.chat/fuselage": "*",
     "@rocket.chat/fuselage-tokens": "workspace:~",
+    "@rocket.chat/storybook-dark-mode": "workspace:~",
     "@storybook/addon-docs": "~9.1.17",
     "@storybook/addon-webpack5-compiler-swc": "~4.0.2",
     "@storybook/react-webpack5": "~9.1.17",
@@ -59,7 +60,6 @@
     "react-dom": "~18.3.1",
     "rimraf": "~6.0.1",
     "storybook": "~9.1.17",
-    "storybook-dark-mode": "patch:storybook-dark-mode@npm%3A4.0.2#~/.yarn/patches/storybook-dark-mode-npm-4.0.2-1acb0927fb.patch",
     "ts-jest": "~29.4.6",
     "typescript": "~5.9.3",
     "webpack": "~5.102.1"

diff --git a/packages/fuselage-toastbar/.storybook/DocsContainer.tsx b/packages/fuselage-toastbar/.storybook/DocsContainer.tsx
@@ -1,9 +1,9 @@
+import { DARK_MODE_EVENT_NAME } from '@rocket.chat/storybook-dark-mode';
 import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks';
 import type { ComponentPropsWithoutRef } from 'react';
 import { useEffect, useState } from 'react';
 import { addons } from 'storybook/preview-api';
 import { themes } from 'storybook/theming';
-import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 
 const channel = addons.getChannel();
 

diff --git a/packages/fuselage-toastbar/.storybook/main.ts b/packages/fuselage-toastbar/.storybook/main.ts
@@ -4,7 +4,7 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
   addons: [
-    getAbsolutePath('storybook-dark-mode'),
+    getAbsolutePath('@rocket.chat/storybook-dark-mode'),
     getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
     getAbsolutePath('@storybook/addon-docs'),
   ],

diff --git a/packages/fuselage-toastbar/.storybook/preview.tsx b/packages/fuselage-toastbar/.storybook/preview.tsx
@@ -1,9 +1,9 @@
 import surface from '@rocket.chat/fuselage-tokens/dist/surface.json';
 import { DarkModeProvider } from '@rocket.chat/layout';
+import { useDarkMode } from '@rocket.chat/storybook-dark-mode';
 import type { Preview } from '@storybook/react-webpack5';
 import { Suspense } from 'react';
 import { themes } from 'storybook/theming';
-import { useDarkMode } from 'storybook-dark-mode';
 
 import manifest from '../package.json';
 import ToastBarProvider from '../src/ToastBarProvider';

diff --git a/packages/fuselage-toastbar/package.json b/packages/fuselage-toastbar/package.json
@@ -49,6 +49,7 @@
     "@rocket.chat/fuselage-hooks": "workspace:~",
     "@rocket.chat/fuselage-tokens": "workspace:~",
     "@rocket.chat/layout": "workspace:~",
+    "@rocket.chat/storybook-dark-mode": "workspace:~",
     "@rocket.chat/styled": "workspace:~",
     "@storybook/addon-docs": "~9.1.17",
     "@storybook/addon-webpack5-compiler-swc": "~4.0.2",
@@ -69,7 +70,6 @@
     "react-dom": "~18.3.1",
     "rimraf": "~6.0.1",
     "storybook": "~9.1.17",
-    "storybook-dark-mode": "patch:storybook-dark-mode@npm%3A4.0.2#~/.yarn/patches/storybook-dark-mode-npm-4.0.2-1acb0927fb.patch",
     "ts-jest": "~29.4.6",
     "typedoc": "~0.28.16",
     "typescript": "~5.9.3"

diff --git a/packages/fuselage/.storybook/DocsContainer.tsx b/packages/fuselage/.storybook/DocsContainer.tsx
@@ -1,9 +1,9 @@
+import { DARK_MODE_EVENT_NAME } from '@rocket.chat/storybook-dark-mode';
 import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks';
 import type { ComponentPropsWithoutRef } from 'react';
 import { useEffect, useState } from 'react';
 import { addons } from 'storybook/preview-api';
 import { themes } from 'storybook/theming';
-import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 
 const channel = addons.getChannel();
 

diff --git a/packages/fuselage/.storybook/main.ts b/packages/fuselage/.storybook/main.ts
@@ -5,7 +5,7 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 export default {
   addons: [
     getAbsolutePath('@storybook/addon-a11y'),
-    getAbsolutePath('storybook-dark-mode'),
+    getAbsolutePath('@rocket.chat/storybook-dark-mode'),
     getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
     {
       name: getAbsolutePath('@storybook/addon-styling-webpack'),

diff --git a/packages/fuselage/.storybook/preview.tsx b/packages/fuselage/.storybook/preview.tsx
@@ -1,8 +1,8 @@
 import breakpointTokens from '@rocket.chat/fuselage-tokens/breakpoints.json';
 import surface from '@rocket.chat/fuselage-tokens/dist/surface.json';
+import { useDarkMode } from '@rocket.chat/storybook-dark-mode';
 import type { Preview } from '@storybook/react-webpack5';
 import { themes } from 'storybook/theming';
-import { useDarkMode } from 'storybook-dark-mode';
 
 import manifest from '../package.json';
 import { PaletteStyleTag } from '../src';

diff --git a/packages/fuselage/package.json b/packages/fuselage/package.json
@@ -54,6 +54,7 @@
     "@babel/preset-react": "~7.27.1",
     "@rocket.chat/fuselage-hooks": "workspace:~",
     "@rocket.chat/icons": "workspace:~",
+    "@rocket.chat/storybook-dark-mode": "workspace:~",
     "@storybook/addon-a11y": "~9.1.17",
     "@storybook/addon-docs": "~9.1.17",
     "@storybook/addon-links": "~9.1.17",
@@ -97,7 +98,6 @@
     "sass": "~1.93.3",
     "sass-loader": "~16.0.6",
     "storybook": "~9.1.17",
-    "storybook-dark-mode": "patch:storybook-dark-mode@npm%3A4.0.2#~/.yarn/patches/storybook-dark-mode-npm-4.0.2-1acb0927fb.patch",
     "style-loader": "~4.0.0",
     "stylelint": "~16.25.0",
     "stylelint-order": "~7.0.1",

diff --git a/packages/layout/.storybook/DocsContainer.tsx b/packages/layout/.storybook/DocsContainer.tsx
@@ -1,9 +1,9 @@
+import { DARK_MODE_EVENT_NAME } from '@rocket.chat/storybook-dark-mode';
 import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks';
 import type { ComponentPropsWithoutRef } from 'react';
 import { useEffect, useState } from 'react';
 import { addons } from 'storybook/preview-api';
 import { themes } from 'storybook/theming';
-import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 
 const channel = addons.getChannel();
 

diff --git a/packages/layout/.storybook/main.ts b/packages/layout/.storybook/main.ts
@@ -4,7 +4,7 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 
 export default {
   addons: [
-    getAbsolutePath('storybook-dark-mode'),
+    getAbsolutePath('@rocket.chat/storybook-dark-mode'),
     getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
     getAbsolutePath('@storybook/addon-a11y'),
     getAbsolutePath('@storybook/addon-docs'),

diff --git a/packages/layout/.storybook/preview.tsx b/packages/layout/.storybook/preview.tsx
@@ -1,9 +1,9 @@
 import { PaletteStyleTag } from '@rocket.chat/fuselage';
 import surface from '@rocket.chat/fuselage-tokens/dist/surface.json';
+import { useDarkMode } from '@rocket.chat/storybook-dark-mode';
 import type { Preview } from '@storybook/react-webpack5';
 import { Suspense } from 'react';
 import { themes } from 'storybook/theming';
-import { useDarkMode } from 'storybook-dark-mode';
 
 import manifest from '../package.json';
 import DarkModeProvider from '../src/DarkModeProvider';

diff --git a/packages/layout/package.json b/packages/layout/package.json
@@ -37,6 +37,7 @@
   "devDependencies": {
     "@rocket.chat/fuselage": "workspace:~",
     "@rocket.chat/fuselage-tokens": "workspace:~",
+    "@rocket.chat/storybook-dark-mode": "workspace:~",
     "@storybook/addon-a11y": "~9.1.17",
     "@storybook/addon-docs": "~9.1.17",
     "@storybook/addon-webpack5-compiler-swc": "~4.0.2",
@@ -57,7 +58,6 @@
     "react-i18next": "~13.2.2",
     "rimraf": "~6.0.1",
     "storybook": "~9.1.17",
-    "storybook-dark-mode": "patch:storybook-dark-mode@npm%3A4.0.2#~/.yarn/patches/storybook-dark-mode-npm-4.0.2-1acb0927fb.patch",
     "ts-jest": "~29.4.6",
     "typedoc": "~0.28.16",
     "typescript": "~5.9.3"

diff --git a/packages/onboarding-ui/.storybook/DocsContainer.tsx b/packages/onboarding-ui/.storybook/DocsContainer.tsx
@@ -1,9 +1,9 @@
+import { DARK_MODE_EVENT_NAME } from '@rocket.chat/storybook-dark-mode';
 import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks';
 import type { ComponentPropsWithoutRef } from 'react';
 import { useEffect, useState } from 'react';
 import { addons } from 'storybook/preview-api';
 import { themes } from 'storybook/theming';
-import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
 
 const channel = addons.getChannel();
 

diff --git a/packages/onboarding-ui/.storybook/main.ts b/packages/onboarding-ui/.storybook/main.ts
@@ -5,7 +5,7 @@ import type { StorybookConfig } from '@storybook/react-webpack5';
 export default {
   addons: [
     getAbsolutePath('@storybook/addon-a11y'),
-    getAbsolutePath('storybook-dark-mode'),
+    getAbsolutePath('@rocket.chat/storybook-dark-mode'),
     getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
     getAbsolutePath('@storybook/addon-docs'),
   ],

diff --git a/packages/onboarding-ui/.storybook/preview.tsx b/packages/onboarding-ui/.storybook/preview.tsx
@@ -1,12 +1,12 @@
 import { PaletteStyleTag } from '@rocket.chat/fuselage';
 import surface from '@rocket.chat/fuselage-tokens/dist/surface.json';
 import { DarkModeProvider } from '@rocket.chat/layout';
+import { useDarkMode } from '@rocket.chat/storybook-dark-mode';
 import type { Preview } from '@storybook/react-webpack5';
 import i18next from 'i18next';
 import { Suspense } from 'react';
 import { I18nextProvider, initReactI18next } from 'react-i18next';
 import { themes } from 'storybook/theming';
-import { useDarkMode } from 'storybook-dark-mode';
 
 import manifest from '../package.json';
 

diff --git a/packages/onboarding-ui/package.json b/packages/onboarding-ui/package.json
@@ -48,6 +48,7 @@
     "@rocket.chat/icons": "workspace:~",
     "@rocket.chat/layout": "workspace:~",
     "@rocket.chat/logo": "workspace:~",
+    "@rocket.chat/storybook-dark-mode": "workspace:~",
     "@rocket.chat/styled": "workspace:~",
     "@storybook/addon-a11y": "~9.1.17",
     "@storybook/addon-docs": "~9.1.17",
@@ -69,7 +70,6 @@
     "react-i18next": "~13.2.2",
     "rimraf": "~6.0.1",
     "storybook": "~9.1.17",
-    "storybook-dark-mode": "patch:storybook-dark-mode@npm%3A4.0.2#~/.yarn/patches/storybook-dark-mode-npm-4.0.2-1acb0927fb.patch",
     "ts-jest": "~29.4.6",
     "typedoc": "~0.28.16",
     "typescript": "~5.9.3"

diff --git a/packages/storybook-dark-mode/.gitignore b/packages/storybook-dark-mode/.gitignore
@@ -0,0 +1 @@
+/dist
diff --git a/packages/storybook-dark-mode/LICENSE b/packages/storybook-dark-mode/LICENSE
@@ -0,0 +1,20 @@
+Copyright (c) 2019 Andrew Lisowski <lisowski54@gmail.com>
+Copyright (c) 2026 Rocket.Chat Technologies Corp.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+OR OTHER DEALINGS IN THE SOFTWARE.