From d2941d514e1d8901e5425f52e43bcd8a6fdc04bd Mon Sep 17 00:00:00 2001
From: Kamil Emeleev <emeleev.kamil@gmail.com>
Date: Fri, 14 Aug 2026 14:44:16 +0300
Subject: [PATCH] docs(storybook): fix blank content in Safari

---
 .storybook/components/DocContainer.tsx | 21 +++------------------
 1 file changed, 3 insertions(+), 18 deletions(-)

diff --git a/.storybook/components/DocContainer.tsx b/.storybook/components/DocContainer.tsx
index e592bb431..f20b0d5c9 100644
--- a/.storybook/components/DocContainer.tsx
+++ b/.storybook/components/DocContainer.tsx
@@ -1,16 +1,12 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext } from 'react';
 
 import { Provider } from '@koobiq/react-components';
-import { isNotNil } from '@koobiq/react-core';
 import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks';
 import { linkTo } from '@storybook/addon-links';
-import { DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
-import { addons } from 'storybook/preview-api';
+import { useDarkMode } from '@vueless/storybook-dark-mode';
 
 import { light, dark } from '../themes';
 
-const channel = addons.getChannel();
-
 export const ThemeProviderContext = createContext<{
   isDark?: boolean;
 } | null>(null);
@@ -19,18 +15,7 @@ export const useThemeProvider = () => useContext(ThemeProviderContext);
 
 export const DocContainer: typeof BaseContainer = (params) => {
   const { context, children } = params;
-  const [isDark, setDark] = useState();
-  const themeIsMounted = isNotNil(isDark);
-
-  useEffect(() => {
-    channel.on(DARK_MODE_EVENT_NAME, setDark);
-
-    return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
-  }, [channel, setDark]);
-
-  if (!themeIsMounted) {
-    return null;
-  }
+  const isDark = useDarkMode();
 
   return (
     <BaseContainer context={context} theme={isDark ? dark : light}>