Further fixing webStorybookColorScheme, removing DOM stuff from npm p…

…ackage

packages/components/src/App.tsx

@@ -1,22 +1,42 @@
 import * as SplashScreen from 'expo-splash-screen'
+import { ColorSchemeName, View } from 'react-native'
 import { I18nextProvider } from 'react-i18next'
-import { View } from 'react-native'
 import { registerRootComponent } from 'expo'
 import { useFonts } from 'expo-font'
-import React, { useCallback } from 'react'
+import React, { useCallback, useSyncExternalStore } from 'react'
 
 import StorybookUI from '../.storybook/native'
 import i18n from './utils/translation/i18n'
 
 SplashScreen.preventAutoHideAsync()
 
+/** Function to initiate Expo/Storybook running of components package */
 export const initiateExpo = (expoApp: typeof App) => {
   // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
   // It also ensures that whether you load the app in Expo Go or in a native build,
   // the environment is set up appropriately
   registerRootComponent(expoApp)
 }
 
+/** Function to initialize listening to light/dark mode toggle in Web Storybook to set color scheme */
+export const webStorybookColorScheme = () => {
+  // Mimics RN useColorScheme hook, but listens to the parent body's class ('light'/'dark' from storybook-dark-mode)
+  return useSyncExternalStore(
+    (callback) => {
+      window.parent.addEventListener('click', callback)
+      return () => window.parent.removeEventListener('click', callback)
+    },
+    (): ColorSchemeName => {
+      const colorScheme = window.parent.document.body.className
+      if (colorScheme !== 'light' && colorScheme !== 'dark') {
+        return null
+      }
+
+      return colorScheme
+    }
+  )
+}
+
 const App = () => {
   // Loads in custom fonts async
   const [fontsLoaded, fontError] = useFonts({

packages/components/src/main.tsx

@@ -1,3 +1,5 @@
+import { ColorSchemeName } from "react-native"
+
 /**
  * Module to set App environment:
  *   - Standalone Expo App (Storybook environment)
@@ -6,6 +8,7 @@
 export type AppType = {
   default: JSX.Element | null
   initiateExpo: ((expoApp: JSX.Element | null) => void) | null
+  webStorybookColorScheme: () => ColorSchemeName | null
 }
 
 let App: AppType

packages/components/src/utils/index.tsx

@@ -4,21 +4,17 @@ import {
   StyleProp,
   ViewStyle,
 } from 'react-native'
-import { useSyncExternalStore } from 'react'
+
+import App from '../main'
 
 /** Function for web Storybook to override setting colorScheme based on UI toggle button */
 export function webStorybookColorScheme(): ColorSchemeName {
   // If not web Storybook, set with RN useColorScheme hook
   if (!process.env.STORYBOOK_WEB) {
     return null
   }
-
-  // Mimicking RN's useColorScheme hook, but using storybook-dark-mode's setting of HTML top-body class to light/dark
-  return useSyncExternalStore(callback => {
-    window.top!.addEventListener("click", callback);
-    return () => window.top!.removeEventListener("click", callback);
-  },
-  (): ColorSchemeName => window.top ? window.top.document.body.className as ColorSchemeName : null,)
+
+  return App.webStorybookColorScheme()
 }
 
 /**