fix: dark theme support in stories (#1950)

Author: Adzouz

.changeset/thirty-tigers-fix.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': minor
+---
+
+fix: dark mode switch in stories and colors page

.github/workflows/bundle-size.yml

@@ -39,3 +39,4 @@ jobs:
         uses: preactjs/compressed-size-action@v2
         with:
           pattern: '**/dist/**/*.{cjs,js,mjs,svg}'
+          install-script: 'yarn install'

docs/.storybook/preview.tsx

@@ -45,12 +45,62 @@ const createCustomTheme = (theme: DefaultTheme, base: 'light' | 'dark' = 'light'
 
 const themeQueryURL = parse(document.location.search).theme;
 
+// Reusable hook to get dark mode state from localStorage
+export const useLocalStorageDarkMode = () => {
+  const [isDark, setIsDark] = React.useState(() => {
+    if (themeQueryURL) return themeQueryURL;
+
+    const themeParameters = localStorage.getItem('sb-addon-themes-3');
+    let theme = 'light';
+    try {
+      theme = JSON.parse(themeParameters || '{}').current;
+    } catch (error) {
+      console.error(error);
+    }
+    return theme === 'dark';
+  });
+
+  React.useEffect(() => {
+    const handleStorageChange = () => {
+      const themeParameters = localStorage.getItem('sb-addon-themes-3');
+      let theme = 'light';
+      try {
+        theme = JSON.parse(themeParameters || '{}').current;
+      } catch (error) {
+        console.error(error);
+      }
+      setIsDark(theme === 'dark');
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    return () => window.removeEventListener('storage', handleStorageChange);
+  }, []);
+
+  return isDark;
+};
+
+// Safe hook that tries useDarkMode first, then falls back to localStorage
+export const useSafeDarkMode = () => {
+  try {
+    return useDarkMode();
+  } catch (error) {
+    return useLocalStorageDarkMode();
+  }
+};
+
 const Theme = ({ children, isDarkMode, ...props }: BoxProps & { isDarkMode?: boolean }) => {
   const [isDark, setIsDark] = React.useState(() => {
     if (themeQueryURL) return themeQueryURL;
     if (isDarkMode !== undefined) return isDarkMode;
-    // For docs, check localStorage directly
-    return localStorage.getItem('sb-addon-themes-3') === 'dark';
+
+    const themeParameters = localStorage.getItem('sb-addon-themes-3');
+    let theme = 'light';
+    try {
+      theme = JSON.parse(themeParameters || '{}').current;
+    } catch (error) {
+      console.error(error);
+    }
+    return theme === 'dark';
   });
 
   React.useEffect(() => {
@@ -63,7 +113,13 @@ const Theme = ({ children, isDarkMode, ...props }: BoxProps & { isDarkMode?: boo
   React.useEffect(() => {
     if (isDarkMode === undefined) {
       const handleStorageChange = () => {
-        const theme = localStorage.getItem('sb-addon-themes-3');
+        const themeParameters = localStorage.getItem('sb-addon-themes-3');
+        let theme = 'light';
+        try {
+          theme = JSON.parse(themeParameters || '{}').current;
+        } catch (error) {
+          console.error(error);
+        }
         setIsDark(theme === 'dark');
       };
       window.addEventListener('storage', handleStorageChange);

docs/components/ColorCards.tsx

@@ -8,9 +8,10 @@ import {
   useDesignSystem,
   darkTheme,
 } from '@strapi/design-system';
-import { useDarkMode } from '@vueless/storybook-dark-mode';
 import tinycolor2 from 'tinycolor2';
 
+import { useSafeDarkMode } from '../.storybook/preview';
+
 import { H2 } from './Typography';
 
 const COLOR_CARD_NAMES = ['Neutral', 'Primary', 'Secondary', 'Alternative', 'Success', 'Warning', 'Danger'];
@@ -61,7 +62,7 @@ interface CardProps {
 }
 
 const Card = ({ colorKey, colorName, colorShade }: CardProps) => {
-  const isDark = useDarkMode();
+  const isDark = useSafeDarkMode();
 
   const colorHex = (isDark ? darkTheme : lightTheme).colors[colorKey];
 
@@ -135,7 +136,7 @@ const Card = ({ colorKey, colorName, colorShade }: CardProps) => {
  * -----------------------------------------------------------------------------------------------*/
 
 const ContrastInfo = ({ backgroundColor = '', isLighter = false, isSmall = false }) => {
-  const isDark = useDarkMode();
+  const isDark = useSafeDarkMode();
   const theme = isDark ? darkTheme : lightTheme;
   const textColor = isLighter ? theme.colors.neutral0 : theme.colors.neutral1000;
 

docs/package.json

@@ -20,7 +20,7 @@
     "@storybook/react-vite": "^9.0.17",
     "@vitejs/plugin-react": "4.3.1",
     "chromatic": "11.5.3",
-    "eslint-plugin-mdx": "3.1.5",
+    "eslint-plugin-mdx": "3.6.2",
     "outdent": "0.8.0",
     "rimraf": "5.0.7",
     "storybook": "^9.0.17",

package.json

@@ -72,6 +72,9 @@
     "node": ">=16.0.0 <=20.x.x",
     "npm": ">=6.0.0"
   },
+  "peerDependencies": {
+    "typescript": "^5.1.3"
+  },
   "packageManager": "[email protected]",
   "dependencies": {
     "@vueless/storybook-dark-mode": "9.0.6"

packages/design-system/src/utilities/Portal/Portal.tsx

@@ -15,7 +15,10 @@ interface PortalProps extends BoxProps<'div'> {
 
 const Portal = React.forwardRef<PortalElement, PortalProps>(
   ({ container = globalThis?.document?.body, ...portalProps }, forwardedRef) => {
-    return container ? createPortal(<Box ref={forwardedRef} {...portalProps} />, container) : null;
+    if (!container) {
+      return null;
+    }
+    return createPortal(<Box ref={forwardedRef} {...portalProps} />, container) as React.ReactElement;
   },
 );