remove theme context in favour of hook

packages/status-react/src/contexts/theme-context.tsx

@@ -1,59 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  useLayoutEffect,
-  useMemo,
-} from 'react'
-
-import { createTheme, darkTheme, theme as defaultTheme } from '../styles/config'
-
-import type { Theme } from '../styles/config'
-import type { Config } from '../types/config'
-
-const ThemeContext = createContext<Theme | undefined>(undefined)
-
-interface Props {
-  theme: Config['theme']
-  children: React.ReactNode
-}
-
-export const ThemeProvider = (props: Props) => {
-  const { children, theme = 'light' } = props
-
-  const appTheme = useMemo(() => {
-    if (!theme || theme === 'light') {
-      return defaultTheme
-    }
-
-    if (theme === 'dark') {
-      return darkTheme
-    }
-
-    return createTheme({
-      colors: theme.colors,
-      fonts: theme.fonts,
-    })
-  }, [theme])
-
-  useLayoutEffect(() => {
-    document.body.classList.add(appTheme)
-
-    return () => {
-      document.body.classList.remove(appTheme)
-    }
-  }, [appTheme])
-
-  return (
-    <ThemeContext.Provider value={appTheme}>{children}</ThemeContext.Provider>
-  )
-}
-
-export const useTheme = () => {
-  const context = useContext(ThemeContext)
-
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider')
-  }
-
-  return context
-}

packages/status-react/src/hooks/use-theme.tsx

@@ -0,0 +1,30 @@
+import { useLayoutEffect, useMemo } from 'react'
+
+import { createTheme, darkTheme, theme as defaultTheme } from '../styles/config'
+
+import type { Config } from '../types/config'
+
+export const useTheme = (theme?: Config['theme']) => {
+  const appTheme = useMemo(() => {
+    if (!theme || theme === 'light') {
+      return defaultTheme
+    }
+
+    if (theme === 'dark') {
+      return darkTheme
+    }
+
+    return createTheme({
+      colors: theme.colors,
+      fonts: theme.fonts,
+    })
+  }, [theme])
+
+  useLayoutEffect(() => {
+    document.body.classList.add(appTheme)
+
+    return () => {
+      document.body.classList.remove(appTheme)
+    }
+  }, [appTheme])
+}

packages/status-react/src/routes/index.tsx

@@ -11,12 +11,13 @@ import {
 import { MainSidebar } from '~/src/components/main-sidebar'
 import { AppProvider } from '~/src/contexts/app-context'
 import { DialogProvider } from '~/src/contexts/dialog-context'
-import { ThemeProvider } from '~/src/contexts/theme-context'
 import { ProtocolProvider, useProtocol } from '~/src/protocol'
 import { Chat } from '~/src/routes/chat'
 import { styled } from '~/src/styles/config'
 import { GlobalStyle } from '~/src/styles/GlobalStyle'
 
+import { useTheme } from '../hooks/use-theme'
+
 import type { Config } from '~/src/types/config'
 
 interface Props extends Config {
@@ -44,11 +45,12 @@ const Gate = (props: { children: JSX.Element }) => {
 export const Community = (props: Props) => {
   const { theme, router: Router = BrowserRouter } = props
 
+  useTheme(theme)
+
   return (
     <Router>
       <ProtocolProvider options={{ publicKey: props.publicKey }}>
         <AppProvider config={props}>
-          <ThemeProvider theme={theme}>
           <DialogProvider>
             <GlobalStyle />
             <Wrapper>
@@ -65,7 +67,6 @@ export const Community = (props: Props) => {
               </Routes>
             </Wrapper>
           </DialogProvider>
-          </ThemeProvider>
         </AppProvider>
       </ProtocolProvider>
     </Router>